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

像这样的错误：

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

处理错误

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

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

和:selected in

<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数组。

Answer 7

因此，据我了解，主要目标是将“选择省份”设置为默认值。 我尝试了其他选项，但最简单的选项最适合我：

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