vuejs select问题

Question

<select v-model='selected'>
          <option v-for="option in options" v-bind:value="option.value">
            {{ option.text }}
          </option>
        </select>
        <span>Selected: {{ selected }}</span>
    

 data : {
        selected: '',
        options: [
          { text: 'One', value: 'A' , selected:false },
          { text: 'Two', value: 'B', selected:true },
          { text: 'Three', value: 'C', selected:false }
        ]
    }

vuejs问题，我从options中知道默认选中selected为true的值，然后切换的时候也能知道选中哪个值。。。。。。求解

Answer 1

你selected 已经绑定在<select></select> 上了 , 你选择了哪个选项， selected 就是那个选项的value了 ，你想让哪个选项为默认选中的话，就在data里的seleced 设置为那个选项的value

<select v-model='selected'>
          <option v-for="option in options" v-bind:value="option.value">
            {{ option.text }}
          </option>
        </select>
        <span>Selected: {{ selected }}</span>
 data : {
        selected: 'C',   // 比如想要默认选中为 Three 那么就把他设置为C
        options: [
          { text: 'One', value: 'A' },  //每个选项里面就不用在多一个selected 了
          { text: 'Two', value: 'B' },
          { text: 'Three', value: 'C' }
        ]
    }

Answer 2

可以试一下vm.$watch()监听数据变化