Vue.js <select> v模型没有绑定组件

Question

我想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> 

Answer 1

使用v-model而不是v-bind这里

<select v-bind="selected"> 

Answer 2

<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; 
    }