Компонент настраиваемого диалогового окна Vuetify - PullRequest
Новая
       5

Компонент настраиваемого диалогового окна Vuetify

0 голосов
/ 05 мая 2020

Я пытаюсь создать настраиваемый компонент диалогового окна на основе v-dialog из vuetify framework. 

<template>
    <v-dialog
      v-model="localDialog"
      max-width="290"
    >
      <v-card
      :color="localColor"
      >
        <v-card-title style="color:white;;" ><v-icon class="pr-2" color="white">{{localIcon}}</v-icon> {{localTitle}}</v-card-title>
        <v-card-text style="color:white; padding-top:5px;">
          {{message}}
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="white"
            text
            @click="localDialog = false"
          >
            OK
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
</template>
<script>
export default {
    mounted(){
      this.initDialog();
    },
    props:[
      'type','message','dialog'
    ],
    data () {
      return {
        localDialog:this.dialog,
        localTitle:'Response',
        localColor:'red',
        localIcon:'mdi-alert-circle-outline'
      }
    },
    methods:{
      "initDialog": function () { console.log(this.dialog);
        switch (this.type) {
          case 'success':
            this.localIcon = "mdi-check-circle";
            this.localColor ="green";
            this.localTitle ="Operation Successful";
            break;
          case 'info':
            this.localIcon = "mdi-check-circle";
            this.localColor ="orange";
            this.localTitle ="Information";
             break;
          case 'error':
            this.localIcon = "mdi-alert-outline";
            this.localColor ="red";
            this.localTitle ="Error Occurred";
             break;
          default:
            this.localIcon = "mdi-alert-circle-outline";
            this.localColor ="blue";
            this.localTitle ="Information";
             break;
        }
      },
    } 
}
</script>

Я понимаю, как работают реквизиты, но у меня возникли некоторые трудности с переключением его статуса в родительском элементе. В идеале то, что я пытаюсь достичь, - это после вызова API, я хотел бы отображать диалог, а не обычное использование "onClick". Но после вызова api ничего не происходит.

В родительском 

<dialog-message-component 
              :type=resultDialogType
              :message=resultDialogMessage
              :dialog=resultDialog
            />
    </v-dialog>

API-вызов 

      Vue.axios.post("http://localhost:8080/api/events/store",
        {
          title: this.title,

        }
        ).then((response) => {
            var parsedobj = JSON.parse(JSON.stringify(response.data));
            console.log(parsedobj);
            this.overlay=false;
            this.resultDialogMessage=parsedobj.message;
            this.resultDialogType="info";
            this.resultDialog=true;
            }) ;

Что я делаю не так.

1 Ответ

2 голосов
/ 05 мая 2020

Я думаю, проблема в том, что данные используют значение переданных свойств в качестве своего НАЧАЛЬНОГО значения. Любые изменения, внесенные в свойства впоследствии, не передаются в данные, поэтому он следует концепции data () как локальной памяти компонента, которой можно управлять локально, и свойств как внешних свойств, которые технически не принадлежат компоненту и не должны ' t быть видоизмененным в дочернем компоненте.

Самое простое решение - создать наблюдателя для пропа и изменять локальные данные при изменении пропа. 

watch: {
   dialog(val){
     this.localDialog = val
   }
}

Отредактировано:

Для передачи измененного свойства родительскому элементу вы используете события:

Дочерний: 

<v-dialog @input="$emit('update:dialog', localDialog)">
...
</v-dialog>

Родитель: 

<dialog-message-component 
    :type=resultDialogType
    :message=resultDialogMessage
    :dialog.sync="resultDialog" // The equivalent of :dialog="resultDialog" @update:dialog='resultDialog = $event'
/>
...