如何设置在 vue.js 2 中选择的选定选项？

Question

我的组件 vue 是这样的：

 <template>
    <select class="form-control" v-model="selected" :required @change="changeLocation">
        <option :selected>Choose Province</option>
        <option v-for="option in options" v-bind:value="option.id" >{{ option.name }}</option>
    </select>
</template>

我用这个： <option :selected>Choose Province</option> 选择

但是当执行时，在 gulp watch 上存在错误

像这样的错误：

.//vue-loader/lib/template-compiler.js?id=data-v-53777228!.//vue-load er/lib/selector.js?type=template&index=0!./resources 中的错误/assets/js/components/bootst rap/LocationBsSelect.vue 模块构建失败：SyntaxError: Unexpected token (28:4)

看来我的步骤是错误的

我该如何解决？

原文由 samuel toh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

处理错误

您将属性绑定到任何内容。 :required 在

<select class="form-control" v-model="selected" :required @change="changeLocation">

和 :selected 在

<option :selected>Choose Province</option>

如果你像这样设置代码，你的错误应该消失了：

 <template>
  <select class="form-control" v-model="selected" :required @change="changeLocation">
    <option>Choose Province</option>
    <option v-for="option in options" v-bind:value="option.id" >{{ option.name }}</option>
 </select>
</template>

让选择标签具有默认值

1. 您现在需要有一个 data 属性称为 selected 以便 v-model 工作。所以，

    {
     data () {
       return {
         selected: "Choose Province"
       }
     }
   }

1. 如果这看起来工作量太大，您也可以这样做：

    <template>
     <select class="form-control" :required="true" @change="changeLocation">
      <option :selected="true">Choose Province</option>
      <option v-for="option in options" v-bind:value="option.id" >{{ option.name }}</option>
     </select>
   </template>

---

什么时候用什么方法？

1. 如果您的默认值取决于某些数据属性，您可以使用 v-model 方法。

2. 如果您的默认选择值恰好是第一个 option ，则可以采用第二种方法。

3. 您还可以通过以下方式以编程方式处理它：

    <select class="form-control" :required="true">
     <option
      v-for="option in options"
      v-bind:value="option.id"
      :selected="option == '<the default value you want>'"
     >{{ option }}</option>
   </select>

原文由 Amresh Venugopal 发布，翻译遵循 CC BY-SA 3.0 许可协议