Maison  >  Questions et réponses  >  le corps du texte

Vue 2 - Avertissement concernant le changement d'accessoires

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 ?

P粉818306280P粉818306280342 Il y a quelques jours572

répondre à tous(2)je répondrai

  • P粉715274052

    P粉7152740522023-10-14 09:15:14

    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 propv-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).

    répondre
    0
  • P粉268654873

    P粉2686548732023-10-14 00:33:06

    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🎜

    répondre
    0
  • Annulerrépondre