Vue 2 - Avertissement concernant le changement d'accessoires

Question

J'ai commencé la série https://laracasts.com/series/learning-vue-step-by-step. J'ai arrêté le cours Vue, Laravel et AJAX avec l'erreur suivante :

vue.js:2574 [Vue warn] : évitez de modifier directement les accessoires car la valeur sera écrasée à chaque nouveau rendu du composant parent. Utilisez plutôt des données ou des propriétés calculées en fonction de la valeur de l'accessoire. Props en cours de modification : "liste" (trouvée dans le composant)

J'ai ce code dans main.js

Vue.component('task', {
    template: '#task-template',
    props: ['list'],
    created() {
        this.list = JSON.parse(this.list);
    }
});
new Vue({
    el: '.container'
})

Je sais que le problème vient de created() lorsque je remplace la propriété list, mais je suis nouveau sur Vue donc je n'ai absolument aucune idée de comment le résoudre. Est-ce que quelqu'un sait comment (et expliquez pourquoi) résoudre ce problème ?

Answer 1

Le mode Vue est props 向下，events activé. Cela semble simple, mais il est facile de l'oublier lors de l'écriture de composants personnalisés.

À partir de Vue 2.2.0, vous pouvez utiliser v -model (avec propriétés calculées). Je trouve que cette combinaison crée une interface simple, propre et cohérente entre les composants :

• Toute props 都保持响应状态（即，它不会被克隆，也不需要 watch fonction transmise au composant met à jour la copie locale lorsqu'un changement est détecté).
• Les modifications sont automatiquement envoyées au parent.
• Fonctionne avec plusieurs niveaux de composants.

Les propriétés calculées permettent de définir les setters et les getters individuellement. Cela permet de réécrire le composant Task comme suit :

Vue.component('Task', {
    template: '#task-template',
    props: ['list'],
    model: {
        prop: 'list',
        event: 'listchange'
    },
    computed: {
        listLocal: {
            get: function() {
                return this.list
            },
            set: function(value) {
                this.$emit('listchange', value)
            }
        }
    }
})

La propriété

model définit le prop与v-model associé et quel événement sera émis en cas de modification. Vous pouvez ensuite appeler ce composant depuis le composant parent comme ceci :

<Task v-model="parentList"></Task>

listLocal 计算属性在组件内提供了一个简单的 getter 和 setter 接口（将其视为私有变量）。在 #task-template 中，您可以渲染 listLocal 并且它将保持反应性（即，如果 parentList 更改，它将更新 Task 组件）。您还可以通过调用 setter（例如 this.listLocal = newList）来更改 listLocal, il enverra les modifications au parent.

L'avantage de ce modèle est que vous pouvez transmettre listLocal à un composant enfant de listLocal 传递给 Task 的子组件（使用 v-model (en utilisant v-model) et les modifications du composant enfant seront propagées vers le haut composants de niveau.

Par exemple, disons que nous avons un seul EditTask 组件，用于对任务数据进行某种类型的修改。通过使用相同的 v-model 和计算属性模式，我们可以将 listLocal 传递给组件（使用 v-model) :

<script type="text/x-template" id="task-template">
    <div>
        <EditTask v-model="listLocal"></EditTask>
    </div>
</script>

Si EditTask发出更改，它将适当地调用listLocal上的set()，从而将事件传播到顶层。同样，EditTask 组件也可以使用 v-model appelle d'autres composants enfants (tels que des éléments de formulaire).

Answer 2

Cela est dû au fait que : Changer les accessoires localement est considéré comme un anti-modèle dans Vue 2

Si vous souhaitez muter un accessoire localement, ce que vous devez faire maintenant est de déclarer un code de champ>valeur dans dataprops en utilisant props

comme valeur initiale, puis de muter la copie :

Vue.component('task', {
    template: '#task-template',
    props: ['list'],
    data: function () {
        return {
            mutableList: JSON.parse(this.list);
        }
    }
});

Vous pouvez en savoir plus sur Guide officiel Vue.js

---

Remarque 1 : Veuillez noterVous ne devriez pas pas proppour prop et 使用相同的名称>données

, c'est-à-dire :

data: function () { return { list: JSON.parse(this.list) } } // WRONG!!

Note 2 : Puisque props j'ai l'impression qu'il y a une certaine confusion concernant les accessoires et la réactivité, je vous recommande de jeter un œil à ce thread🎜