vue.js - v-model 不适用于动态单选按钮,vue js
问题描述
var vue = new Vue({
el: '#app',
data: function (){
return {
categories: null,
foodItems: null,
selectedCategoryId: null
}
},
mounted: function() {
axios
.get('@Url.Action("GetCategories", "Home", new { area="Canteen" })')
.then(response => (this.categories = response.data))
}
});
<span>selected: {{ selectedCategoryId }}</span>
<div class="box box-default">
<div class="box-header with-border">
<div class="text-center text-uppercase"><b>Select</b></div>
</div>
<div class="box-body">
<div class="btn-group-vertical btn-block btn-group-toggle" data-toggle="buttons">
<label v-for="(category, index) in categories" class="btn btn-default active">
<input :id="'option-' + category.id" :value="category.id" type="radio" name="categories" autocomplete="off" v-model="selectedCategoryId" />{{ category.name }}
</label>
</div>
</div>
</div>
解决方案
这是工作示例
var vue = new Vue({
el: '#app',
data: function (){
return {
categories: null,
foodItems: null,
selectedCategoryId: null,
isdata:false
}
},
mounted: function() {
console.log("mounted");
var vm = this;
setTimeout(function(){
vm.categories = [
{id:1,name:'test1'},
{id:2,name:'test2'},
{id:3,name:'test3'}
];
vm.isdata = true;
}, 2000);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<span>selected: {{ selectedCategoryId }}</span>
<div class="box box-default">
<div class="box-header with-border">
<div v-show="!isdata">Loading....</div>
<div v-show="isdata" class="text-center text-uppercase"><b>Select</b></div>
</div>
<div class="box-body">
<div class="btn-group-vertical btn-block btn-group-toggle" data-toggle="buttons">
<label v-for="(category, index) in categories" class="btn btn-default active">
<input :id="'option-' + category.id" :value="category.id" type="radio" name="categories" autocomplete="off" v-model="selectedCategoryId" />{{ category.name }}
</label>
</div>
</div>
</div>
</div>
推荐阅读
- python - 合并来自两个数据帧的数据进行训练
- bash - 将日期时间格式从 DD-MM-YYYY HH:MM 转换为 DD/MM/YYYY HH:MM
- histogram - 将 R 脚本转换为 Shiny 应用程序的问题
- angular - 如何使用角度将图像存储在 cookie 中
- c# - 如何启动visual studio + 开放解决方案+ 启动项目
- microsoft-graph-api - 允许 Azure AD 应用仅代表一个特定用户发送邮件
- vhdl - 在有限状态机中将行为模型转换为 VHDL 代码的数据流模型
- node.js - 如何将详细信息与图像一起保存在 MongoDb 中
- c# - 我需要清除 Byte[] 吗?
- regex - 正则表达式 NLTK 分块 - 无法让我的正则表达式规则识别某些 pos 标签