javascript - 如何设置在 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 存在错误

这样的错误:

ERROR in ./~/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 Module build failed: SyntaxError: Unexpected token (28:4)

看来我的步骤不对

我该如何解决？

Answer 1

处理错误

您没有将属性绑定(bind)到任何东西。 :required 在

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

和:选中在

<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. 您现在需要一个名为 selected 的 data 属性，这样 v-model 才能工作。所以，

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

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

   <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. 如果您的默认选择值恰好是第一个选项，您可以使用第二种方法。

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>