Как открыть и закрыть модальное поле в дочернем компоненте, используя опору vuejs?

Question

В настоящее время у меня есть следующий дочерний компонент

  <Edit
     @fetchInfo="fetchInfo"
     :agencyData="agency"
     :dialogEdit.sync="dialogEdit"
   ></Edit>

, который в основном содержит модальный

, изначально он ложный, чтобы не показывать модальный:

data(){
 return {
    dialogEdit: false
 }
}

по методу, который я делаю:

open(){
  this.dialogEdit = true;
}

В моем <Edit></Edit> компоненте у меня есть:

<el-dialog title="Editar" :visible.sync="dialogEdit" width="60%">
</el-dialog>

и получено с опорой:

 props: ["dialogEdit"],

Но затем при закрытии модального из дочернего компонента я получаю сообщение об ошибке

[Vue warn]: избегайте прямого изменения свойства, так как значение будет перезаписываться всякий раз, когда родительский компонент будет перерисовываться. Вместо этого используйте данные или вычисляемое свойство, основанное на значении реквизита. Опора изменена: "dialogEdit"

Answer 1

Прежде всего, по-видимому, вы используете Element UI.

Но, как показывает ошибка, вы изменяете dialogEdit напрямую. При закрытии элемента пользовательского интерфейса при нажатии X, dialogEdit становится false. Вы можете решить это, используя свойство computed, как предложено, например, в this answer .

Поскольку вы используете Element UI, у вас также есть другая возможность решить эту проблему. Диалог имеет событие before-close, которое вызывается до закрытия модального окна. Там вы можете передать новое логическое значение для dialogEdit родителю. Поэтому сохраните :dialogEdit.sync="dialogEdit" в дочернем теге и добавьте before-close в диалоговое окно и функцию для обработки, где вы создаете новое значение false:

<el-dialog title="Editar" :before-close="handleClose" ....>

JS:

methods: {
  handleClose() {
    this.$emit('update:dialogEdit', false);
  }
},

Если в вашем модале есть кнопка для закрытия модального режима, вы можете добавить туда ту же функцию:

<el-button type="primary" @click="handleClose">Close</el-button>

SANDBOX

Answer 2

довольно сложно понять твой вопрос. Вы должны уточнить подробнее.

это все в одном файле? если в этом случае вам не нужно создавать props, так как уже есть dialogEdit в разделе data(). Значение props никогда не переопределяется, поэтому, если это так, просто удалите реквизиты.

, если это не решило вашу проблему, обновите ваш вопрос с более подробным объяснением, потому что я просто вижу один файл.