Question

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

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

您可以使用称为public class HomeController : Controller { public ActionResult Index() { return View(); } [HttpPost] public ActionResult Method1(BooModel model) { ... } [HttpPost] public ActionResult Method2(BooModel model) { ... } } public class BooModel { public int Id { get; set; } public string Name { get; set; } } @model WebApi.Controllers.BooModel @using (Html.BeginForm()) { @Html.TextBoxFor(x=>x.Id) @Html.TextBoxFor(x=>x.Name) <input type="submit" value="Method1" onclick='this.form.action="@Url.Action("Method1", "Home", null, this.Request.Url.Scheme)"' /> <input type="submit" value="Method2" onclick='this.form.action="@Url.Action("Method2", "Home", null, this.Request.Url.Scheme)"' /> }的{{1}}属性来执行此操作，并根据该属性值隐藏/显示错误消息：

computed

error

最后，您不需要该事件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>

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

1 个答案: