web-dev-qa-db-ja.com

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ウォッチでエラーが存在します

このようなエラー：

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

私のステップが間違っているようです

どうすれば解決できますか？

javascriptvue.jsvuejs2vue-component
32
samuel toh

エラーの処理

プロパティを何にもバインドしていません。 :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. vモデルが機能するように、dataというselectedプロパティが必要になります。そう、

    {
  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である場合、2番目の方法に進むことができます。

  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>
30
Amresh Venugopal

最も簡単な答えは、選択したオプションを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
    }
}
16
gtamborero
<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;
  }); 
 }
6
leaveme_alone