Значение опоры у ребенка не меняется - PullRequest
Новая
       45

Значение опоры у ребенка не меняется

0 голосов
/ 06 апреля 2020

Я создал компонент Error, который отображается в диалоговом окне, когда я получаю сообщение об ошибке с моего сервера. Я передаю сообщение об ошибке, которое я получаю в родительском компоненте, компоненту ошибки через реквизит. Когда я впервые показываю компонент ошибки, установив для v-model = "errorDialog" значение true, я вижу правильную ошибку. Когда я пытаюсь снова показать диалог с моим компонентом ошибки, я получаю то же сообщение об ошибке, что и при первом его отображении ({{errMsg}}). Хотя значение errMsg отличается: err = "errMsg". Любая помощь?

ошибка компонента. 

<template>
     <v-card>
  <v-card-title class="headline red lighten-2" >
  Oh No 
  </v-card-title>
   <v-card-text>

         <b> {{errMsg}} </b>
   </v-card-text>

     <v-card-actions>
          <v-spacer></v-spacer>

            <v-btn color="#9da4cf" text @click="cancel">Ok</v-btn>

        </v-card-actions>

  </v-card>
</template>


<script>
export default {

    data(){

        return {

            errMsg:this.err
        }
    },

    props:{

        err:{
        type: String,
      required: true,

        }
    },

    methods:{

 cancel(){


       this.$emit('cancel-ErrorDialog');



      }

    }

}
</script>

от родительского компонента 

 <v-dialog v-model="errorDialog" max-width="600px">
      <ErrorDialog :err="errMsg" v-on:cancel-ErrorDialog="cancelErrorDialog" />
    </v-dialog>

1 Ответ

0 голосов
/ 06 апреля 2020

Значение копируется в локальный объект данных при первом создании компонента, но никогда не обновляется. Похоже, что вы можете полностью пропустить этот data объект и напрямую использовать реквизит: 

<template>
     <v-card>
  <v-card-title class="headline red lighten-2" >
  Oh No 
  </v-card-title>
   <v-card-text>

         <b> {{err}} </b>
   </v-card-text>

     <v-card-actions>
          <v-spacer></v-spacer>

            <v-btn color="#9da4cf" text @click="cancel">Ok</v-btn>

        </v-card-actions>

  </v-card>
</template>


<script>
export default {

    props:{
      err:{
        type: String,
        required: true,
      }
    },

    methods:{
      cancel(){
        this.$emit('cancel-ErrorDialog');
      }
    }

}
</script>
...