[英]Vue.js <select> v-model not binding within component
我正在嘗試Vue.js,除了在組件中使用選擇的輸入外,其他一切看起來都很棒。 我創建了一個基本的提琴設置來說明問題: https : //jsfiddle.net/8f24xLdq/
<div class="panel-body" id="vue">
<example></example>
</div>
<script type="text/x-template" id="t">
<div>
<select v-bind="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<script>
Vue.component('example', {
template: "#t",
data: function() {
return {
selected: 'A',
options: [{
text: 'One',
value: 'A'
}, {
text: 'Two',
value: 'B'
}, {
text: 'Three',
value: 'C'
}]
}
}
});
new Vue({
el: "#vue"
});
</script>
在<select >
使用v-model
而不是v-bind
<select v-model="selected">
<div class="col-md-6">
<select v-model="selectedto">
<option v-for="option in estados" v-bind:value="option.id" :key="option.id" v-html="option.label">
</option>
</select>
<span v-html="selectedto"></span>
</div>
mounted: function () {
console.log('created', this);
var vm = this;
vm.$root.selectedto = 1;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.