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

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

Vue 反應性不會獲取添加到數組元素的新屬性

Vue 反應性不會獲取添加到數組元素的新屬性

尚方寶劍之說 2022-12-18 19:00:35
不確定我的解釋是否正確,但我面臨一個問題,我的模板元素之一沒有對數組元素的添加屬性做出反應。例如:<div v-for="user in users"     v-bind:key="user.id"     v-bind:name="user.name">     {{user.name}}     <div class="warn" v-if="user.hasWarning">Warning!</div></div>我試圖在hasWarning: true添加到時顯示警告userdata:() {  users: [    {id: 1, name: "Foo"}  ]},methods:{  showWarning: function(id) {    users.forEach(user => {      if (user.id == id) {        user.hasWarning = true;      }    });  }}我試著打電話showWarning(id),我確實看到hasWarning從控制臺和 Vue 開發人員工具添加到用戶,但它沒有呈現<div class class="warn" v-if="user.hasWarning"..。如果我將我的用戶設置為{id: 1, name: "foo", hasWarning: false},它似乎工作正常,但為什么它不適用于添加的屬性?我應該完全避免它嗎?
查看完整描述

1 回答

?
LEATH

TA貢獻1936條經驗 獲得超7個贊

您必須使用該方法this.$set來注冊新屬性。請參閱文檔:https ://v2.vuejs.org/v2/api/#vm-set

嘗試這樣的事情:

<template>

  <div>

    <div v-for="user in users" v-bind:key="user.id" v-bind:name="user.name">

      {{ user.name }}

      <button @click="showWarning(user.id)">showWarning</button>

      <div class="warn" v-if="user.hasWarning">Warning!</div>

    </div>

  </div>

</template>


<script>

export default {

  name: 'App',

  data: () => ({

    users: [{ id: 1, name: 'Foo' }, { id: 2, name: 'Bar' }],

  }),

  methods: {

    showWarning(id) {

      let user = this.users.find(user => user.id == id);

      this.$set(user, 'hasWarning', true);

    },

  },

};

</script>


查看完整回答
反對 回復 2022-12-18
  • 1 回答
  • 0 關注
  • 123 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號