268

https://laracasts.com/series/learning-vue-step-by-stepシリーズを始めました。Vue、Laravel、および AJAXのレッスンを次のエラーで停止しました。

vue.js:2574 [Vue 警告]: 親コンポーネントが再レンダリングされるたびに値が上書きされるため、prop を直接変更しないでください。代わりに、プロパティの値に基づいてデータまたは計算されたプロパティを使用してください。変更されている小道具：「リスト」（コンポーネントにあります）

このコードはmain.jsにあります

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

リストプロップを上書きするときにcreated()に問題があることは知っていますが、私はVueの初心者なので、修正方法がまったくわかりません。誰でもそれを修正する方法（および理由を説明してください）を知っていますか？

4

27 に答える 27

335

これは、prop をローカルで変更することが Vue 2 でアンチパターンと見なされるという事実に関係しています。

propをローカルで変更したい場合に今すべきことは、値を初期値としてdata使用するフィールドを宣言してから、コピーを変更することです。props

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

詳細については、Vue.js 公式ガイドを参照してください。

注 1:とに同じ名前を使用しないでpropdataください。

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

注 2:と反応性に関して混乱があると思うので、このスレッドを参照することをお勧めします。props

于 2016-10-07T05:47:30.000 に答える
9

答えは簡単です。値をいくつかのローカル コンポーネント変数 (getter、setter、または watcher で計算されたデータ プロパティである可能性があります) に割り当てることによって、直接 prop ミューテーションを中断する必要があります。

ウォッチャーを使用した簡単なソリューションを次に示します。

<template>
  <input
    v-model="input"
    @input="updateInput" 
    @change="updateInput"
  />

</template>

<script>
  export default {
  props: {
    value: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      input: '',
    };
  },
  watch: {
    value: {
      handler(after) {
        this.input = after;
      },
      immediate: true,
    },
  },
  methods: {
    updateInput() {
      this.$emit('input', this.input);
    },
  },
};
</script>

これは、データ入力コンポーネントを作成するために使用するものであり、問​​題なく機能します。親から送信された新しいデータ (v-model(ed)) は、値ウォッチャーによって監視され、入力変数に割り当てられます。入力が受信されると、そのアクションをキャッチして、データが入力であることを示唆する入力を親に送信できます。フォーム要素から。

于 2019-11-26T09:42:55.177 に答える
6

私もこの問題に直面しました。$onと を使用した後に警告が消えました$emit。子コンポーネントから親コンポーネントにデータを送信するのに使用$onおよび推奨されるようなものです。$emit

于 2017-06-15T13:55:26.707 に答える
4

このような計算されたメソッドを追加する必要があります

component.vue

props: ['list'],
computed: {
    listJson: function(){
        return JSON.parse(this.list);
    }
}
于 2017-12-21T10:39:11.387 に答える
4

多くのコード、ウォッチャー、および計算されたプロパティの使用を避けるのに役立つこの回答を提供したいと思います。場合によっては、これが適切な解決策になることがあります。

小道具は、一方通行のコミュニケーションを提供するように設計されています。

小道具付きのモーダルshow/hideボタンがある場合、私にとって最善の解決策は、イベントを発行することです。

<button @click="$emit('close')">Close Modal</button>

次に、モーダル要素にリスナーを追加します。

<modal :show="show" @close="show = false"></modal>

(この場合、base-modal で easy を直接show使用できるため、prop はおそらく不要です)v-if="show"

于 2019-09-27T05:51:52.880 に答える
0

小道具を新しい変数に割り当てます。

data () {
    return {
        listClone: this.list
    }
}
于 2022-02-23T18:32:20.450 に答える