首頁猿問 Vue：如何綁定對象數組中的選中值

Vue：如何綁定對象數組中的選中值

JavaScript

慕田峪7331174 2022-12-02 16:21:30

在過去的 10 個小時里，我一直在為一個看似簡單的問題而苦苦掙扎，我希望有人能幫助我。情況：data: { user: { email: '[email protected]', has_items: [ { "id": 19, "userId": 63, "projectId": 1, "project": { "id": 1, "titel": "Project1" } }, { "id": 20, "userId": 63, "projectId": 2, "project": { "id": 2, "titel": "Project2" } } ] }, items: [ { "label": "Project1", "titel": "Project1", "projectId": 1 }, { "label": "Project2", "titel": "Project2", "projectId": 2 }, { "label": "Project3", "titel": "Project3", "projectId": 3 } ] }但是，我似乎無法將綁定has_items projectId到復選框選中狀態。我非常有信心這是亂搞讓事情變得更糟的情況之一，并且忽略了一個簡單的解決方案。我添加了一個示例小提琴：http: //jsfiddle.net/ebzgr4c3/31/希望有人能指出我犯的錯誤，并使這項工作 :)

查看完整描述

1 回答

神不在的星期二

TA貢獻1963條經驗獲得超6個贊

因為與中的元素user.has_items相比，中的元素有一些額外的格式items，所以我認為v-model這不是一個真正的選擇。在選中復選框和將其推送到用戶數組item之間，您需要空間來進行某種轉換。has_itemproject

您可以通過將 v-model 換成更手動的選項來騰出空間：事件。在我這里的示例中，我使用change事件來觸發一個方法，該方法根據復選框是否被選中來添加或刪除項目。

我用另一種方法設置復選框的初始值。此方法檢查復選框的關聯項目是否在用戶的項目數組中。

var demo = new Vue({

el: '#app',

data: {

user: {

email: '[email protected]',

has_items: [

{ "id": 19, "userId": 63, "projectId": 1, "project": { "id": 1, "titel": "Project1" } },

{ "id": 20, "userId": 63, "projectId": 2, "project": { "id": 2, "titel": "Project2" } }

]

items: [

{ "label": "Project1", "titel": "Project1", "projectId": 1 },

{ "label": "Project2", "titel": "Project2", "projectId": 2 },

{ "label": "Project3", "titel": "Project3", "projectId": 3 }

]

methods: {

userHasItem(project) {

return this.user.has_items.find(e => e.projectId == project.projectId) != undefined;

updateHasItems(checked, project) {

if (checked) {

// Add item to user.has_items

// [Translation between item and has_item goes here]

this.user.has_items.push(project);

}

else {

// Remove item from user.has_items based on ID

this.user.has_items.splice(this.user.has_items.findIndex(e => e.projectId == project.projectId), 1);

}

})

<label>{{project.titel}}</label>

</div>

<p>User's items</p>

</div>

反對回復 2022-12-02

1 回答
0 關注
158 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Vue：如何綁定對象數組中的選中值

Vue：如何綁定對象數組中的選中值

1 回答

添加回答