Блог

Главная - Вопросы по программированию - VueJS dom не обновляется при перемещении элемента в массив

VueJS dom не обновляется при перемещении элемента в массив

#vue.js

#vue.js

Вопрос:

Я пытаюсь поместить новый элемент в массив, однако DOM не обновляется. Я прочитал документы Vue, в которых говорится, что используйте Vue.set, чтобы включить реактивность для добавления объектов в массив. https://jsfiddle.net/exL27gvz/40 /

     Vue.component('team-invite-list', ({
    template: '<div class="mt-2 flex"><a v-for="user in invitedUsers" :key="user.test" href="#">test</a></div>',
    props: ['invitedUsers'],
    methods: {
        addInvitedUser: function(user) {
            Vue.set(this.invitedUsers, this.invitedUsers.length, user)
        }
    },
    mounted() {
            console.log(this.invitedUsers)
      this.invitedUsers.push({test: '2'})
    }
}));

var vm = new Vue({
    data() {
    return {
    };
  },
  mounted() {

  }
}).$mount('#app');



<div id="app">
  <team-invite-list :invited-users="[{test: 'test'}]"></team-invite-list>
</div>

В DOM отображается только объект value, переданный в качестве реквизита.

Комментарии:

1. Не пытайтесь изменять реквизит

2. Спасибо, Дэн, это решило мою проблему. Если вы опубликуете его в качестве ответа, я могу пометить его как правильный ответ.

3. @Paradigm вы видели мой ответ?

4. Извините, @Dan, я только что пометил как действительный.

Ответ №1:

Не пытайтесь изменять реквизит. Вот некоторые пояснения из документов:

Все реквизиты образуют одностороннюю привязку между дочерним свойством и родительским… Это предотвращает случайное изменение состояния родительских компонентов, что может затруднить понимание потока данных вашего приложения. Кроме того, каждый раз, когда обновляется родительский компонент, все реквизиты в дочернем компоненте будут обновлены с последним значением. Это означает, что вы не должны пытаться изменять prop внутри дочернего компонента.

Если вы обнаружите, что хотите изменить реквизит, есть несколько вариантов. Вот два распространенных:

Vuex

Часто реквизиты не идеальны, когда вы можете использовать глобальное хранилище для управления состоянием. Это может избавить от необходимости обмениваться данными между компонентами. Каждый компонент может получать и устанавливать данные непосредственно из хранилища, и это разъединяет компоненты и может значительно упростить ваш дизайн. Если вы пытаетесь передать массив данных приложения, это хороший признак того, что вам следует использовать Vuex.

Клонировать / испускать

Если два компонента всегда отображаются вместе, или просто имеет смысл поддерживать отношения родитель / потомок, тогда сохраните prop, но передайте изменения обратно родительскому элементу. При необходимости вы можете клонировать реквизит в дочернем элементе, мутировать клон, а затем отправить его обратно.

Ответ №2:

Вы не смогли обновить prop внутри дочернего компонента, вы должны передать событие от дочернего к родительскому, чтобы обновить это свойство внутри родительского компонента :

  mounted() {
            console.log(this.invitedUsers)
          this.$emit("push-invite",{test: '2'})
    }

в родительском компоненте добавить @push-invite="pushInvite" :

 var vm = new Vue({
    data() {
    return {
    invitedUsers:[{test: 'test'}]
    };
  },
  methods:{
    pushInvite(invite){
      this.invitedUsers.push(invite)
    }
  },
  mounted() {

  }
}).$mount('#app');



<div id="app">
  <team-invite-list :invited-users="invitedUsers" @push-invite="pushInvite"></team-invite-list>
</div>