第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

Vue：如何綁定對象數(shù)組中的選中值

Vue：如何綁定對象數(shù)組中的選中值

慕田峪7331174 2022-12-02 16:21:30
在過去的 10 個小時里，我一直在為一個看似簡單的問題而苦苦掙扎，我希望有人能幫助我。情況：data: {    user: {      email: 'test@test.com',      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到復(fù)選框選中狀態(tài)。我非常有信心這是亂搞讓事情變得更糟的情況之一，并且忽略了一個簡單的解決方案。我添加了一個示例小提琴：http: //jsfiddle.net/ebzgr4c3/31/希望有人能指出我犯的錯誤，并使這項工作 :)
查看完整描述

1 回答

?
神不在的星期二

TA貢獻1963條經(jīng)驗 獲得超6個贊

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


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


我用另一種方法設(shè)置復(fù)選框的初始值。此方法檢查復(fù)選框的關(guān)聯(lián)項目是否在用戶的項目數(shù)組中。


var demo = new Vue({

  el: '#app',


  data: {

    user: {

      email: 'test@test.com',

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

      }

    },

  },

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>


<div id="app">


  <div v-for="project in items" :key="project.projectId">

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

    <input type="checkbox" :checked="userHasItem(project)" :value="project" @change="updateHasItems($event.target.checked, project)"/>

  </div>

  

  <p>User's items</p>

  {{user.has_items}}

</div>


查看完整回答
反對 回復(fù) 2022-12-02
  • 1 回答
  • 0 關(guān)注
  • 156 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號