javascript - 如何在 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/2/来帮你。 要更改选定的值，只需设置模型。 如果这不是您需要的，请也制作一个 fiddle 。

谢谢。

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>