如何在Vue中有条件地设置所选选项

Question

是否可以预先设置选择框的选定值？

使用Vue(v2),我试图在Vue模板中创建这样的选择框.

<select v-model="selectedFlavor">
   <option v-for="flavor in flavors" 
           :value="flavor"
           :selected="selectedFlavor == flavor">{{ flavor }}</option>
</select>

和这样的组件:

Vue.component('flavor-pane', {
      ...
      data: function() {
          selectedFlavor: 'strawberry',
          flavors: ['blueberry', 'lime', 'strawberry'],
      });
}

本质上,我的想法是我需要遍历一个简单的数组,在选择框中创建几个选项,并将选择框的值设置为现有值.我可以这样做吗？

我的模板/组件渲染得很好,但selected即使符合条件并且在选择框中没有选择任何值,该属性似乎也不会出现在HTML中.

Answer 1

对的,这是可能的.我创建了这个示例https://jsfiddle.net/Luvq9n4r/1/来帮助您.要更改选定的值,只需设置模型.如果它不是你需要的,那么,请做一个小提琴.

谢谢.

new Vue({
  el: '#app',
  data: function() {
    return {
      selectedFlavor: 'lime',
      flavors: ['blueberry', 'lime', 'strawberry']
    }
  },
  methods: {
    change: function() {
      this.selectedFlavor = 'strawberry';
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
  <button @click="change()">Set Strawberry</button>
  <select v-model="selectedFlavor">
    <option v-for="flavor in flavors" :value="flavor">{{flavor}}</option>
  </select>
</div>