javascript - Vue.js utilise des fonctions pour exploiter les propriétés des objets dans les données sans déclencher de mises à jour

Question

J'ai rencontré ce problème lors de l'apprentissage du framework Vue.js. Dans la partie itération d'objet du rendu de liste, j'ai mis un objet objet dans les données et un élément bouton dans l'élément li pour supprimer les attributs correspondant à l'itération, mais en cliquant sur le bouton bouton Ensuite, les attributs correspondants dans l'objet sont supprimés, mais la vue n'est pas mise à jour et les attributs supprimés sont toujours là. Est-ce la raison.

var list1 = new Vue({
    el:'#list1',
    data:{
        parentMessage:'Fuck',
        object:{
            firstName:'Coma',
            lastName:'Cc'
        }
    },
    methods:{
        remove:function(index){
            //Array.prototype.splice.call(this.object, index, 1);
            delete((this.object)[index]);
        }
    }
})

<ul id="list1">
        <li v-for="(value, key, index) in object">
            {{ index }} - {{ key }} - {{value}}
            <button v-on:click="remove(key)">Delete</button>
        </li>
    </ul>

Answer 1

Pour modifier obj, vous devez utiliser la méthode Object.assign pour que l'objet vue déclenche des modifications
De plus, les objets ne modifient généralement que la valeur de l'attribut d'objet et suppriment rarement l'attribut d'objet

var obj = {
    a:1,
    b:2
};
obj = Object.assign({},obj,{a:3});
obj = {
    a:3,
    b:2
};