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

Question

我想验证至少一个需要选中该复选框。 我正在尝试验证何时通过循环单击复选框。 当我检查一个时，第一次单击时输出无效返回 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>

Answer 1

您可以使用称为error的compated属性来做到这一点，并根据该属性值隐藏/显示错误消息:

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"代替