Vue предупреждение и диалог появляется только один раз

Question

Имея vue ui, создавая новый базовый проект с Babel и Lint, я установил deps vuetify, vuetify-loader и vue-bootstrap. Все, что я хочу, это простая кнопка «Открыть диалог», которая открывает диалог, определенный в отдельном компоненте (файле). Диалоговое окно отображается без проблем / предупреждений, но когда я закрываю его (нажимая в другом месте или на одной из кнопок, я получаю предупреждение о том, что «Избегайте непосредственного изменения опоры, так как значение будет перезаписываться всякий раз, когда родительский компонент будет перерисовываться»). «Повторное нажатие кнопки больше не действует. Хотя в консоли отображается« JAAA ». Код:

HelloWorld.vue

<template>
  <div class="hello">

    <v-btn @click="openDialog" class="btn btn-info">Open dialog</v-btn>
                <Dialog :showDialog="showDialog"></Dialog>
  </div>
</template>

<script>
  import Dialog from "./Dialog";
  export default {
    name: 'HelloWorld',
    components: {
      Dialog
    },
    props: {
      msg: String
    },
    data() {
      return {
              showDialog: false
          }
      },
      methods: {
        openDialog() {
          this.showDialog = true
          window.console.log('JAAA')
        }
      }
  }
</script>

Dialog.vue

<template>
  <div>
    <v-dialog v-model="showDialog" width="500">
      <v-card>
        <v-card-title class="headline grey lighten-2" primary-title>
          Remark
        </v-card-title>
        <v-card-text>
          Remark: <input type="text">
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <div class="flex-grow-1"></div>
          <v-btn color="primary" text @click="hideDialog">
            Done
          </v-btn>
          <v-btn color="primary" text @click="hideDialog">
            Cancel
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
    export default {
        name: "Dialog",
        props: ['showDialog'],
        methods: {
          hideDialog() {
            this.showDialog = false;
          }
        }
    }
</script>

Answer 1

Вы не должны изменять значения реквизита непосредственно в компоненте, так как это изменение не будет отражено в вашем родительском элементе.

Вместо этого вы можете конвертировать dialog компонент, чтобы использовать v-model вместо этого в сочетании свычисляемое свойство вашего ребенка для передачи изменений вашему родителю, чтобы он знал, что значение было обновлено.

HelloWorld.vue

<template>
  <div class="hello">
    <v-btn @click="openDialog" class="btn btn-info">Open dialog</v-btn>
    <Dialog v-model="showDialog"></Dialog>
  </div>
</template>

<script>
import Dialog from "./Dialog";
export default {
  name: 'HelloWorld',
  components: {
    Dialog
  },
  props: {
    msg: String
  },
  data() {
    return {
      showDialog: false
    }
  },
  methods: {
    openDialog() {
      this.showDialog = true
      window.console.log('JAAA')
    }
  }
}
</script>

Dialog.vue

<template>
  <div>
    <v-dialog v-model="displayDialog" width="500">
      <v-card>
        <v-card-title class="headline grey lighten-2" primary-title>
          Remark
        </v-card-title>
        <v-card-text>
          Remark: <input type="text">
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <div class="flex-grow-1"></div>
          <v-btn color="primary" text @click="hideDialog">
            Done
          </v-btn>
          <v-btn color="primary" text @click="hideDialog">
            Cancel
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
export default {
  name: "Dialog",
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    displayDialog: {
      get() {
        // returns the value of your prop
        return this.value 
      },
      set(newValue) {
        // v-model listens to the input event, so emitting `input` with a value 
        // will update the model with that value
        this.$emit('input', newValue)
      }
    };
  },
  Methods: {
    hideDialog() {
      this.displayDialog = false;
    }
  }
}
</script>

Answer 2

Изменение значения в дочернем элементе не отразится на родительском, данные реквизита передаются во время ловушки, созданной дочерним компонентом, и при закрытии вы пытаетесь изменить его на дочернем уровне, и состояние не передается родительскому элементу. Со следующего раза он просто вызывает обновленный хук в диалоговом окне

. Внесите эти изменения в компонент Dialog.vue

<template>
  <div>
    <v-dialog v-model="displayDialog" width="500">
      <v-card>
        <v-card-title class="headline grey lighten-2" primary-title>
          Remark
        </v-card-title>
        <v-card-text>
          Remark: <input type="text">
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <div class="flex-grow-1"></div>
          <v-btn color="primary" text @click="hideDialog">
            Done
          </v-btn>
          <v-btn color="primary" text @click="hideDialog">
            Cancel
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
    export default {
        name: "Dialog",
        props: {
          showDialog: {
            type: Boolean,
          }
        },
        data() {
          return {
            displayDialog: false,
          };
        },
        methods: {
          hideDialog() {
            this.displayDialog = false;
          }
        },
       watch: {
          showDialog(val) {
             this.displayDialog  = val;
          }
       }
    }
</script>