引导/ VueJS中未显示下拉选项“已选择”

Question

运行带有带有引导程序的Vuejs前端的Sails 1.0应用程序，并尝试在下拉列表中显示选定的“选项”，但在页面呈现时未显示为选中状态。我已经尝试过<option selected>ounces</option>和<option selected="selected">ounces</option>

HTML：

<!-- ... -->
<div class="col">
  <div class="form-group">
    <select v-bind:id="'ingredient' + index + 'Units'" class="form-control" v-model="newRecipeFormData.ingredients[index].units">
      <option selected>ounces</option> <!-- not showing as selected -->
      <option>grams</option>
      <option>pounds</option>
      <option>kilograms</option>
    </select>
  </div>
</div>

截屏1：

我应该在哪里找到问题？

Answer 1

解决方案是在Vue模型中设置“选定”值，因为该值已与v-model绑定

在我的js中：

  data: {
    recipes: {},

    newRecipeFormData: {
      recipeName: '',
      recipeNotes: '',
      ingredients: [
        { name: '', weight: '', units: 'ounces' },
        { name: '', weight: '', units: 'ounces' },
        { name: '', weight: '', units: 'ounces' },
        { name: '', weight: '', units: 'ounces' },
        { name: '', weight: '', units: 'ounces' },
        { name: '', weight: '', units: 'ounces' }
      ]
    },
    //…
    syncing: false,
    cloudError: '',
    //…
    recipesModalVisible: false,

  },

现在它可以正确显示：