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

How can I set selected option selected in vue.js 2?

提问by samuel toh

My component vue is like this :

我的组件 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>

I use this : <option :selected>Choose Province</option>to selected

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

But whene executed, on the gulp watch exist error

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

The error like this :

像这样的错误：

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)

./~/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)

Seems my step is wrong

好像我的步骤错了

How can I solve it?

我该如何解决？

回答by Amresh Venugopal

Handling the errors

处理错误

You are binding properties to nothing. :requiredin

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

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

and :selectedin

并:selected在

<option :selected>Choose Province</option>

If you set the code like so, your errors should be gone:

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

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

Getting the select tags to have a default value

使选择标签具有默认值

1. you would now need to have a dataproperty called selectedso that v-model works. So,

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

2. If that seems like too much work, you can also do it like:

   <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. 您现在需要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>
   

---

---

When to use which method?

什么时候使用哪种方法？

1. You can use the v-modelapproach if your default value depends on some data property.

2. You can go for the second method if your default selected value happens to be the first option.

3. You can also handle it programmatically by doing so:

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

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>
   

回答by gtamborero

The simplest answer is to set the selected option to trueor false.

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

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

Where the data object is:

数据对象在哪里：

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

This is an example to set the selected month day:

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

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

On your data set:

在您的数据集上：

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

回答by leaveme_alone

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

Here "challan.warehouse_id" come from "challan" object you get from:

这里“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;
  }); 
 }

回答by Aafiya Hanafi

You simply need to remove v-bind (:) from selected and required attributes. Like this :-

您只需要从选定的和必需的属性中删除 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>

You are not binding anything to the vue instance through these attributes thats why it is giving error.

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