Как установить выбранную опцию в vue.js 2?

Мой компонент 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 в. /~/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)

Кажется, мой шаг неправилен

Как я могу это решить?

Ответ 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>

Получение тегов выбора для значения по умолчанию

теперь вам нужно будет иметь свойство data selected так, чтобы работала v-модель. Так,
```
{
  data () {
    return {
      selected: "Choose Province"
    }
  }
}
```

Если это кажется слишком большой работой, вы также можете сделать это так:

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

Когда использовать какой метод?

Вы можете использовать подход v-model если ваше значение по умолчанию зависит от некоторого свойства данных.
Вы можете использовать второй метод, если выбранным значением по умолчанию является первый option.

Вы также можете обрабатывать его программно, делая это:

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

Ответ 2

<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" исходит от объекта "хабан", из которого вы получаете:

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;
  }); 
 }

Ответ 3

Самый простой ответ - установить для выбранного параметра значение 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 number of the month
    }
}