如何设置在 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 令牌 (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. 您现在需要有一个名为 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. 如果您的默认选择值恰好是第一个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 实例，这就是它给出错误的原因。

Answer 5

另一种我经常觉得更可靠的方法是，您可以在 app.js 或启动 VueJS 的任何位置添加指令，例如：

Vue.directive('attr', (el, binding) => {
  if (binding.value === true) binding.value = ''
  if (binding.value === '' || binding.value) {
    el.setAttribute(binding.arg, binding.value)
  }
})

然后您可以使用v-attr 来设置一个属性，例如：

<option value="Western Australia" v-attr:selected="form.state == 'Western Australia'">Western Australia</option>

Answer 6

我的反应式多选代码

data() {
    return {
        article: {title: 'aaaaa', 'categoriesIds': [1,3], ...},
        selectCategories: {1: 'xxx', 2: 'www', 3: 'yyy', 4: 'zzz'},
    }
},

模板

<div class="form-group">
     <label for="content">Categories</label>
     <select name="categories" 
         v-model="article.categoriesIds" 
         id="categories" 
         multiple 
         class="form-control col-md-5" 
         size="6">
         <option v-for="(category, key) in selectCategories" 
             :key="key" 
             v-bind:value="key">{{category}}</option>
     </select>
</div>

所选项目绑定到 article.categoriesIds 数组。