如何在vue.js中点击一个班级？

Question

我有一个组件可以为用户显示多个选项。用户应该能够点击他喜欢的选项，然后发送表格。

要向用户提供某种反馈，我想切换课程v-on:click。如何为object.selected = true函数中点击的object.type设置selectObjectType()？

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>

Answer 1

＆＃13;

＆＃13;

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)
      
    }
  }
})

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果我理解得很好，您可以点击选择/取消选择该项目。

我这样做：

＆＃13;

＆＃13;

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;
    }
  }
})

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;