复选框单击 v-for 循环内的无效数据答案

【问题标题】：Checkbox click invalid data inside v-for loop复选框单击 v-for 循环内的无效数据
【发布时间】：2019-02-11 23:18:25
【问题描述】：

我想确认至少需要选中复选框。当我通过循环单击复选框时，我正在尝试验证。当我检查一个时，输出无效，在第一次单击时返回 false。当我取消选中时返回 true。但是当我使用 vue-dev 工具检查我的尺寸数组数据时，数据是有效的。我试图找到那些错误，但我没有找到。我不知道为什么。我想知道这是为什么？我错了吗？

new Vue({
  el: '#app',
  data: {
   		sizes:[
      	{id:1,name:'small',ischeck:false,price:0},
        {id:2,name:'medium',ischeck:false,price:0},
        {id:3,name:'large',ischeck:false,price:0}        
      ],
      newval:[]
  },
  methods: {
    checkchanged(){
    	for(var i=0;i<this.sizes.length;i++){           
      	console.log(this.sizes[i].ischeck);
      }     
      
    }
  }
})

<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>

<div id="app">
<span v-for="size in sizes">
  <input type="checkbox" v-model="size.ischeck" :value="size.ischeck" 
    @click="checkchanged">
    <label>{{size.name}}</label>
    <input type="text" :disabled="!size.ischeck" v-model="size.price">
</span>

</div>

【问题讨论】：

标签： javascript html vue.js vuejs2 vue-component

【解决方案1】：

您可以使用您称为error 的computed 属性来执行此操作，并根据该属性值隐藏/显示错误消息：

new Vue({
  el: '#app',
  data: {
   		sizes:[
      	{id:1,name:'small',ischeck:false,price:0},
        {id:2,name:'medium',ischeck:false,price:0},
        {id:3,name:'large',ischeck:false,price:0}        
      ],
      newval:[],
      
  },
  methods: {
    checkchanged(){
    	for(var i=0;i<this.sizes.length;i++){           
      	console.log(this.sizes[i].ischeck);
      }  
      
    }
  },
  computed:{
    error(){
      for(var i=0;i<this.sizes.length;i++){ 
      if(this.sizes[i].ischeck) return false;
    }
    return true;
    }
  }
})

<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>


<div id="app"  style="display :flex;flex-direction: column;">
<div v-for="size in sizes">
  <input type="checkbox" v-model="size.ischeck" :value="size.ischeck" 
    @change="checkchanged">
    <label>{{size.name}}</label>
    <input type="text" :disabled="!size.ischeck" v-model="size.price">
    
</div>
   <div v-if="error"  style="color:red">
     there's an error !
   </div>
</div>

最后你不需要那个事件@click="checkchanged"你可以使用@change="checkchanged"来代替

【讨论】：