【问题标题】: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,
    
      },

    现在显示正确:

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2019-07-18
      • 1970-01-01
      • 1970-01-01
      • 2017-04-05
      • 2018-09-17
      • 1970-01-01
      相关资源
      最近更新 更多