bootstrap / VueJS中未显示下拉选项“已选择”答案

【问题标题】：Dropdown option "selected" not showing in bootstrap / VueJSbootstrap / VueJS中未显示下拉选项“已选择”
【发布时间】：2019-02-10 15:56:51
【问题描述】：

使用带有引导程序的 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：

我应该在哪里寻找问题？

【问题讨论】：

标签： html twitter-bootstrap vue.js

【解决方案1】：

解决方法是在 Vue 模型中设置“selected”值，因为它是由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,

  },

现在显示正确：

【讨论】：