我有一个选择,我想填充计算数据,它工作正常:
<select style="width: 175px">
<option>None</option>
<option v-for="label in labels">{{label.description}</option>
</select>
var vm = new Vue({
el: '#div',
data: {
},
computed: {
labels: function () {
//return labels based on some logic
}
}
});
但是我想将所选值绑定到属性,所以我将我的代码更改为:
<select style="width: 175px" v-model=selectedLabel">
<option>None</option>
<option v-for="label in labels">{{label.description}</option>
</select>
var vm = new Vue({
el: '#div',
data: {
selectedLabel: ''
},
computed: {
labels: function () {
//return labels based on some logic
}
}
});
然后我在选择中根本没有数据。很明显,因为我将selectedLabel设置为&#39;&#39;,但我的选择中没有空选项。但我该如何解决这个问题呢?我不知道将要计算哪些数据,因此我无法预定义selectedLabel。
答案 0 :(得分:1)
只需将选择选项的默认值设置为json.decoder.JSONDecodeError: Expecting value: line 1 column 1 (char 0)
,如:
''
这将自动选择<div id="app">
<select style="width: 175px" v-model="selectedLabel">
<option value="">None</option>
<option v-for="label in labels" :value="label.value">{{label.description}}</option>
</select>
</div>
选项。
请参阅此fiddle
none
&#13;
var vm = new Vue({
el: '#app',
data: {
selectedLabel: ''
},
computed: {
labels: function () {
return [
{description:'test', value: 'test'},
{description: 'test1', value: 'test1'}
]
}
}
});
&#13;