Vue.js: Toggle CSS class for dynamical data with method

Question

I have the following code:

<template>
<div id="projects">
  <Header />
  <b-container>
    <div class="row">
      <div :class="colSize" v-for="(data, index) in projects" :key="data._id">
        <b-card :title="data.name" :sub-title="user.jobresponsibilities">
          <p class="card-text">
            {{data.description}}
          </p>
          <b-btn v-b-toggle="'collapse'+index" @click="showCollapse(data)">Toggle Collapse</b-btn>
          <b-collapse :id="'collapse'+index">
            <b-card>
              description
            </b-card>
          </b-collapse>
        </b-card>
      </div>

    </div>
  </b-container>
</div>
</template>

<script>
import Header from '@/components/Header'
export default {
  name: 'dashboard',
  components: {
    Header
  },
  mounted() {},
  methods: {
    showCollapse(data) {
      this.colSize = 'col-8'
    }
  },
  data() {
    return {
      user: this.$store.getters.getUser,
      projects: this.$store.getters.getProject,
      colSize: 'col-4',
      show: false
    }
  }
}
</script>

<style lang="scss">
#projects {
    background-color: rgb(243, 243, 243);
}
</style>

Store.js: https://jsbin.com/kejinihoci/edit?js

What I want to achieve is that when I click on the toggle button, that the column size of the specific is changed (css class) and that it only show the collapsible for this item and not the other.

I tried to add an ID to the v-model to add it to my method but it did not work.

Boussadjra Brahim · Accepted Answer · 2018-12-14 21:02:26Z

1

You should do something dynamic like assigning an unique id (id="'collapse'+index") to each collapse and use v-b-toggle directive inside the correspondent button v-b-toggle="'collapse'+index" :

   <b-btn v-b-toggle="'collapse'+index" class="m-1">Toggle Collapse</b-btn>
      <b-collapse id="'collapse'+index" >
        <b-card>
          description
        </b-card>
      </b-collapse>

to make the class changes dynamically you should add a property called descShown to your projects array.

in getProject action inside your store

        let project = resp.data.project
        project=project.map((p)=>{
               p.descShown=false;
               return p;
               })
        commit('getProject_success', {
          project
        })

inside template:

    <div :class="['col-8':data.descShown,'col-6':!data.descShown}" v-for="(data, index) in projects" :key="data._id">

   ...
  <b-btn v-b-toggle="'collapse'+index" @click="showCollapse(index)">

your method should be like :

   showCollapse(index) {
        this.$set(this.projects,index,true);
     }

edited Dec 14, 2018 at 21:02

answered Dec 14, 2018 at 17:13

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

mrks Over a year ago

Thanks for the help! This sounds reasonable and works. But how can I change the CSS class of the div when I toggled?

Boussadjra Brahim Over a year ago

you could keep @click="showCollapse(data)" and that would change the class name inside the method

mrks Over a year ago

Thats what I tried but showCollapse(data) { this.colSize = 'col-8'} changes every card and not only the one I toggled :>

Boussadjra Brahim Over a year ago

could you show the store code, i will try to find a way to make class dynamic based on projects array

Boussadjra Brahim Over a year ago

i added details i hope that could help you

|

ryeMoss · Accepted Answer · 2018-12-14 19:28:59Z

1

This is a good opportunity to utilize what vue is built for - components! Create a new component for your <b-card>, pass the props you need down to it. Each of these components will have its own set of data and methods.

  <div :class="colSize" v-for="(data, index) in projects" :key="data._id">
    <b-card 
        :cardinfo="{
           data.name,
           user.jobresponsibilities
        }"
    ></b-card>
  </div>

Vue.component('b-card', {
  props: {
    cardinfo: {
        type: Object
    }
  }
}

answered Dec 14, 2018 at 19:28

ryeMoss

4,3631 gold badge19 silver badges35 bronze badges

Collectives™ on Stack Overflow

Vue.js: Toggle CSS class for dynamical data with method

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related