How can I toggle a class on click in vue.js?

Question

I have got a component to display several options for a user. The user should be able to click on the option he likes and then send the form.

To give the user some sort of feedback, I want to toggle a class v-on:click. How can I set object.selected = true for the clicked object.type inside my selectObjectType() function?

Vue.component('obj', {
  props: ['name'],
  template: '<div>{{ name }}</div>'
})

new Vue({
  el: '#app',
  data: {
    message: 'Please select:',
    objectTypes: [
      { type: 'Cat', selected: false },
      { type: 'Dog', selected: false },
      { type: 'Fish', selected: false },
      { type: 'Bear', selected: false },
    ],
  },
  methods: {
  	selectObjectType: function (object) {
      console.log('Selected:', object.type)
      // how can I change set object.selected = true for the clicked object.type?
      
    }
  }
})

.col {
  height: 200px;
  width: 20%;
  cursor: pointer !important;
  margin-right: 2.5%;
  margin-left: 2.5%;
  border-radius: 3px;
  border: 1px solid lightgray;
  padding: 20px;
  box-sizing: border-box;
  float: left;
}

.col:hover {
  border-color: #000;
}

.col.selected {
  border-color: green;
}

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>
  <obj
     class="col"
     v-for="object in objectTypes"
     @click.native="selectObjectType(object)"     
     :key="object.id"
     :name="object.type"
     :class="{ 'selected': object.selected}"
     >
  </obj>
</div>

you can do object.selected = true; inside your selectObjectType function. but you have to set all of the other to false. — JV Lobo
– JV Lobo, Commented Jun 28, 2017 at 8:03
@abhishekkannojia this causes a script error, but it seems like this is what I would like to do! — Marian Rick
– Marian Rick, Commented Jun 28, 2017 at 8:04
@JVLobo The user should be possible to select multiple answers, so I want to toggle the class for each item individually — Marian Rick
– Marian Rick, Commented Jun 28, 2017 at 8:04

Oleg Shleif · Accepted Answer · 2017-06-28 08:06:22Z

Vue.component('obj', {
  props: ['name'],
  template: '<div>{{ name }}</div>'
})

new Vue({
  el: '#app',
  data: {
    message: 'Please select:',
    objectTypes: [
      { type: 'Cat', selected: false },
      { type: 'Dog', selected: false },
      { type: 'Fish', selected: false },
      { type: 'Bear', selected: false },
    ],
  },
  methods: {
  	selectObjectType: function (object) {
        object.selected = !object.selected;
        console.log('Selected:', object.type)
      
    }
  }
})

.col {
  height: 200px;
  width: 20%;
  cursor: pointer !important;
  margin-right: 2.5%;
  margin-left: 2.5%;
  border-radius: 3px;
  border: 1px solid lightgray;
  padding: 20px;
  box-sizing: border-box;
  float: left;
}

.col:hover {
  border-color: #000;
}

.col.selected {
  border-color: green;
}

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>
  <obj
     class="col"
     v-for="object in objectTypes"
     @click.native="selectObjectType(object)"     
     :key="object.id"
     :name="object.type"
     :class="object.selected ? 'selected' : ''"
     >
  </obj>
</div>

JV Lobo · Accepted Answer · 2017-06-28 08:06:38Z

If I've understood well, you want to click to selec/deselect the item.

I'd do that this way:

Vue.component('obj', {
  props: ['name'],
  template: '<div>{{ name }}</div>'
})

new Vue({
  el: '#app',
  data: {
    message: 'Please select:',
    objectTypes: [
      { type: 'Cat', selected: false },
      { type: 'Dog', selected: false },
      { type: 'Fish', selected: false },
      { type: 'Bear', selected: false },
    ],
  },
  methods: {
  	selectObjectType: function (object) {
      console.log('Selected:', object.type)
      // how can I change set object.selected = true for the clicked object.type?
      object.selected = !object.selected;
    }
  }
})

.col {
  height: 200px;
  width: 20%;
  cursor: pointer !important;
  margin-right: 2.5%;
  margin-left: 2.5%;
  border-radius: 3px;
  border: 1px solid lightgray;
  padding: 20px;
  box-sizing: border-box;
  float: left;
}

.col:hover {
  border-color: #000;
}

.col.selected {
  border-color: green;
}

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>
  <obj
     class="col"
     v-for="object in objectTypes"
     @click.native="selectObjectType(object)"     
     :key="object.id"
     :name="object.type"
     :class="{ 'selected': object.selected}"
     >
  </obj>
</div>

Collectives™ on Stack Overflow

How can I toggle a class on click in vue.js?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related