如何設置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>選定

但whene執行，在吞氣表存在錯誤

的錯誤是這樣的：

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)

似乎我的腳步是錯的

我該如何解決？

Answer 1

處理錯誤

您將屬性綁定到無。在

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

和:selected:required在

<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模型纔有效。所以，

   { 
       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

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