使用 v-for 在 vue 中填充多個 select 菜單和選項

Question

我正在嘗試使用 v-for 在 vue 中創建多選問題。

Select 菜單和選項通過 JSON 填充。

我無法按預期獲取選擇結果。

雖然我選擇 select 選項，但我無法保留值數據。

例如：當我 select 從第二個菜單中的任何選項時，在第一個菜單中的選擇被清除。 第一個菜單反之亦然。

 new Vue({ el: "#app", data: { selectedValue: [], checklists: [ { "id":1, "heading":"Environment", "deleted_at":null, "created_at":null, "updated_at":"2020-08-08T13:24:22.000000Z", "checklist_value":[ { "id":1, "checklists_id":1, "values":"Indoor", "notes":null, "deleted_at":null, "created_at":"2020-08-08T13:03:50.000000Z", "updated_at":"2020-08-08T13:03:50.000000Z" }, { "id":2, "checklists_id":1, "values":"Outdoor", "notes":null, "deleted_at":null, "created_at":"2020-08-08T13:13:27.000000Z", "updated_at":"2020-08-08T13:13:27.000000Z" } ] }, { "id":2, "heading":"Location of Camera's", "deleted_at":null, "created_at":"2020-08-08T11:41:31.000000Z", "updated_at":"2020-08-08T13:27:59.000000Z", "checklist_value":[ { "id":3, "checklists_id":2, "values":"Parking", "notes":null, "deleted_at":null, "created_at":"2020-08-08T13:28:45.000000Z", "updated_at":"2020-08-08T13:28:45.000000Z" }, { "id":4, "checklists_id":2, "values":"Balcony", "notes":null, "deleted_at":null, "created_at":"2020-08-08T13:28:53.000000Z", "updated_at":"2020-08-08T13:28:53.000000Z" } ] } ] }, methods: { getSelectedID(event) { console.log(this.selectedValue); } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div class="input-field col s12" v-for="(checklist, index) in checklists"> <select v-model="selectedValue" @change="getSelectedID($event)" multiple="multiple"> <option disabled>Choose options</option> <option v-for="(value,index) in checklist.checklist_value":value="value.id">{{value.values}}</option> </select> <label>{{checklist.heading}}</label> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <script> $(document).ready(function() { $('select').formSelect(); }); </script>

期望 v-model 應該為 select 菜單和 map 選項創建一個新的 object ，以便我可以將其傳遞給數據庫並保存它們。

如果你能告訴我我哪里錯了，我將不勝感激。

小提琴： https://jsfiddle.net/dvwkz15c/

Answer 1

每次更改 select 元素的值時，您都在分配相同的變量，因為它們都使用相同的 v-model。 您將 selectedValue 設置為一個數組，但您需要它是一個嵌套數組，以便您的結果知道不會覆蓋自己。

只需為每個 v-model 添加一個索引，以便它知道在更改或添加值時要覆蓋 selectedValue 數組的哪一部分。

<div class="input-field col s12" v-for="(checklist, index) in checklists">
    <select v-model="selectedValue[index]" @change="getSelectedID($event)" multiple="multiple">
    ...
</div>

新編輯：

對此感到抱歉，我之前的答案可能是由於某種版本的差異。 無論如何，您可以通過定義 Vue 數據 function 中的索引來修復您遇到的新錯誤，如下所示：

<select v-model="selectedValues[index]['values']"  multiple="multiple">

然后將數組定義更改為帶有子 arrays 的 object 定義。

selectedValues: [
    { "values": []},
    { "values": []},
],

您可以在每次添加清單時手動添加它（這會很痛苦），或者您可以設置一個安裝在 Vue 中的 function，它獲取您的清單數組的長度並自動在 selectedValues 數組中創建那么多 object 索引。

安裝示例

selectedValues: [],

...

mounted: function() { 
    for(let i=0; i < this.checklists.length; i ++) {
        this.selectedValues.push({
            "values": []
        });
    }
}

每當組件安裝在您的應用程序中時，這將在數組中創建索引。 根據數據的加載方式，您可能需要在Vue.nextTick(function() {... });中包圍 for 循環。 但是，如果您這樣做，您將需要更改“this”的 scope。

如果您還通過 Ajax 響應加載數據，則可以將循環放置在可以在安裝時和 Ajax 調用之后調用的方法中。 但是由於它使用的是push(..)你需要在這樣做之前重置數組this.selectedValues = []; ... (for loop)... this.selectedValues = []; ... (for loop)...