web-dev-qa-db-ja.com

VueJSエラープロップを直接変更しないでください

モーダルを作成しようとしていますが、閉じるときにのみこのエラーが発生します。

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"

found in

---> <PanelDesconectarModal> at resources\assets\vue\PanelDesconectarModal.vue
       <VNavigationDrawer>
         <PanelDrawer> at resources\assets\vue\PanelDrawer.vue
           <VApp>
             <PanelRoot> at resources\assets\vue\PanelRoot.vue
               <VApp>
                 <Root>

PanelDesconectarModal.vue

<template>
    <v-dialog v-model="value" max-width="350">
        <v-card :dark="($theme === 'dark')">
            <v-card-title class="headline">Desconectar</v-card-title>
            <v-divider></v-divider>
            <v-card-text>Você tem certeza que deseja desconectar-se?</v-card-text>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn flat @click.native="closeDialog">Cancelar</v-btn>
                <v-btn :color="$color" flat="flat" @click.native="desconectar">Desconectar</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
    export default {
        name: 'panel-desconectar-modal',
        props: ['value'],
        methods: {
            closeDialog() {
                this.value = false;
            },
            desconectar() {
                this.closeDialog();

                window.location = this.$route + '/panel/desconectar';
            }
        }
    }
</script>

ProgressDesconectarModal.vueを使用すると、showDesconectarはデータ変数です

<panel-desconectar-modal :value="showDesconectar"></panel-desconectar-modal>
vue.jsvuejs2vuetify.js
5
Rafael de Azeredo

これは、_v-model_に小道具valueがあるために発生します。

_v-model_が変更されたときにprop（value）が変更されるため、これを行わないでください（dataの値は_v-model_で変更するだけですが、この場合は、追加のdata変数も必要ありません）。

Vuejs v2.3.0なので、親にemit値 することをお勧めします。これにより、親がそれを変更し、子コンポーネントに渡されます。

_v-dialog_コンポーネント内

_v-model_を削除して:value="value" @input="$emit('input')"に置き換えます

そしてあなたの機能：

_closeDialog() {
    this.$emit('input');
}
_

_panel-desconectar-modal_コンポーネントでは、_v-model="showDesconectar"_を使用します。

これは動作します 理由 ：

_<input v-model="something"> is syntactic sugar for:

<input   
    v-bind:value="something"
    v-on:input="something = $event.target.value">
_

これが working example penanswer to similar question で提供したものです。

3
Traxo

relevant Vue doc にはデフォルト値の例がないため、これらの回答は他の場所にあります。コンポーネントを作成するソリューションが必要でしたデフォルト値ですが、フォーカスを失うと、入力は常に以前の状態に戻ります。または、「propを直接変更しないようにする」エラーが発生しました。変更可能なプロパティを作成し、その値をcreatedイベントに設定します私のためにそれを解決しました：

data()
{
    return {
        text: null
    };
},

props: {
    properties: Object,
    value: String
},

created()
{
    this.text = this.value;
}
0
Rubem Pechansky

子コンポーネントの小道具を変更しないでください。オブジェクトの変更のみが可能で、プリミティブは変更できません。したがって、データオプションまたは計算プロパティを使用できます。

data() {
  return {
    childValue: this.value; // initialize props value
  }
}

これで、childValueを変更できます。

closeDialog() {
   this.childValue = false;
},

childValueプロップの代わりに、子コンポーネント内のすべての場所でvalueを使用してください。

0
Bhojendra Rauniyar

これは本当にあなた自身に尋ねる瞬間です "本当に小道具が必要ですか？データでこれを行うことはできますか？Vueコンポーネント？ "

あなたがページとコンポーネントの作成者であり、コンポーネントがページに1回しか表示されない場合、propsを使用する十分な理由はありません。コンポーネントがすべて繰り返されるため、propsが必要な場合配列の行で、propを配列のインデックスにして、コンポーネントがストアのソース配列を直接変更できるようにします。 Vueコンポーネントには状態、特に共有する必要のある状態を含めることはできません。また、相互に緊密にバインドすることを楽しむことはできません親子関係は、DOMツリーに配置される可能性から発生します（子供は親のマークアップ内で発生します）これは、ナイトクラブでの偶然の会合のようなものです。親。ソースデータの階層は、マークアップとは関係なく、ストアの構造で表現する必要があります。Vueコンポーネントは、可能な場合、ストア、そしてお互いにあまり話さない：-）

0
bbsimonbb