Question

我的数据：

products: {
    'price': [],
    'in_stock': [],
},

我有一些在同一型号上运行的复选框：

 <input type="checkbox" id="price-0" value="0" v-model="products.price">
 <label for="price-0">Studio</label>
 <input type="checkbox" id="price-1" value="1" v-model="products.price">
 <label for="price-1">Studio</label>
 ....

检查（并取消选中）后，如何在复选框中添加/删除课程？

Answer 1

这是一种方法。如果您在v-for循环中渲染输入，那么执行item.id之类的操作来替换data-0 data-1等的每个实例都会非常简单。

如果您想使用代码，也可以使用jsFiddle。

Vue.component('my-cool-component', {
	template: '#cool',
  data(){
  	return{
    	products: {
    		'price': [],
    		'in_stock': [],
        },
       isChk: [],
    }
  },
  methods:{
  	select(id){
          this.isChk.includes(id) ?  this.isChk.splice(this.isChk.indexOf(id), 1) : this.isChk.push(id)
      }
  }
});


const app = new Vue({
  el: '#app'
});

.checked {
  color: #fff;
  background: #f82c00;
  padding: 4px;
  border-radius: 3px;
}

.output {
  padding: 1px 15px;
  background: #413e3e;
  color: #fff;
  margin: 23px 5px;
  border-radius: 6px
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>


<div id="app">
  <my-cool-component></my-cool-component>
</div>

<template id="cool">
  <div id="wapper">
    <input
         id="price-0"
         type="checkbox"
         value="0"
         v-model="products.price" 
         @click="select('price-0')"
    >
    <label :class="{checked:isChk.includes('price-0')}" for="price-0">Studio</label>
    
    <input 
         id="price-1"
         type="checkbox"  
         value="1"
         v-model="products.price" 
         @click="select('price-1')">
     <label :class="{checked:isChk.includes('price-1')}"  for="price-1">Studio</label>
     
     <div class="output">
       <p>price -- {{products.price}}</p>
       <p>is checked -- {{isChk}}</p>
     </div>  
  </div>
</template>

Answer 2

在Vue中，最好以声明方式处理动态样式。这样做可以利用甜蜜的反应式样式绑定，根据数据更改自动更新它们。

这样的事情会做到：

<input type="checkbox" id="price-0" value="0" v-model="products.price" :class="{'checked-class' : products.price === 0}">
 <label for="price-0">Studio</label>
 <input type="checkbox" id="price-1" value="1" v-model="products.price"
    :class="{'checked-class' : products.price === 1}">
 <label for="price-1">Studio</label>

参考： https://vuejs.org/v2/guide/class-and-style.html

在检查时将类添加到复选框

2 个答案: