如何设置在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:意外的令牌(28:4)

似乎我的步骤是错误的

我该如何解决？

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"
       }
     }
   }
   

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

Answer 2

最简单的答案是将所选选项设置为true或false.

<option :selected="selectedDay === 1" value="1">1</option>

数据对象是:

data() {
    return {
        selectedDay: '1',
        // [1, 2, 3, ..., 31]
        days: Array.from({ length: 31 }, (v, i) => i).slice(1)
    }
}

这是设置所选月份日的示例:

<select v-model="selectedDay" style="width:10%;">
    <option v-for="day in days" :selected="selectedDay === day">{{ day }}</option>
</select>

在您的数据集上:

{
    data() {
        selectedDay: 1,
        // [1, 2, 3, ..., 31]
        days: Array.from({ length: 31 }, (v, i) => i).slice(1)
    },
    mounted () {
        let selectedDay = new Date();
        this.selectedDay = selectedDay.getDate(); // Sets selectedDay to the today's number of the month
    }
}

Answer 3

<select v-model="challan.warehouse_id">
<option value="">Select Warehouse</option>
<option v-for="warehouse in warehouses" v-bind:value="warehouse.id"  >
   {{ warehouse.name }}
</option>

这里"challan.warehouse_id"来自"challan"对象来自:

editChallan: function() {
    let that = this;
    axios.post('/api/challan_list/get_challan_data', {
    challan_id: that.challan_id
 })
 .then(function (response) {
    that.challan = response.data;
 })
 .catch(function (error) {
    that.errors = error;
  }); 
 }

Answer 4

您只需要从选定的和必需的属性中删除 v-bind (:)。像这样 ：-

<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>

您没有通过这些属性将任何内容绑定到 vue 实例，这就是它给出错误的原因。