Диалог поддерживает измененные значения - PullRequest
Новая
       7

Диалог поддерживает измененные значения

1 голос
/ 29 февраля 2020

У меня есть компонент, который отображает имя пользователя и адрес электронной почты. Я открываю новый диалог, который позволяет пользователю редактировать имя и адрес электронной почты. Пользовательские данные для диалога редактирования передаются в качестве опоры для диалога. Текстовые поля редактирования в диалоге уже имеют текущее имя пользователя / адрес электронной почты, предварительно заполненные для редактирования. Когда пользователь редактирует имя, но нажимает кнопку «Отмена» в диалоговом окне, а затем снова открывает диалоговое окно, изменение все еще там. Кажется, он не принимает значение, переданное как опора? Как я могу это исправить? 

  <template>

 <div>

    <v-dialog v-model="EditDialog" persistent max-width="400px" >

          <Dialog :user="user"  height="400px"   />
        </v-dialog>

  <other stuff on page>
</div>
</template>

Диалог 

 <v-text-field
    label="Name"
   v-model="user.name"

  filled
    placeholder="Name"
  ></v-text-field>

Ответы [ 2 ]

0 голосов
/ 29 февраля 2020

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

- из Vue документы

По сути, вместо обновления значения переменной только при явном присвоении, как это обычно бывает, v-model автоматически обновляется в экземпляре root при изменении данных. Чтобы понять, что это означает практически, если вы посмотрите user.name на вкладке Vue в инструментах разработчика, вы увидите, что ей присваивается строка, когда пользователь вводит ее в текстовое поле. К тому времени, когда пользователь нажимает cancel, введенные данные уже сохранены и не возвращаются.

Итак, как можно отменить нежелательные изменения?

Просто создайте кэш данных перед выполнением любых изменения и использовать его для возврата данных при вызове cancel.

Например, после извлечения данных из базы данных: 

.then(() => (this.dataCache = Object.assign({}, this.user)));

создав dataCache: {} как пустой объект в хуке data.

Тогда что-то вроде: 

$on('cancelUserChanges', () => {
    this.user = Object.assign({}, this.dataCache;
});

Обратите внимание, что при использовании этого исправления с массивами вы можете столкнуться с проблемами, поскольку

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

- из ответа @GarrettJohnson на назначение объекта не копируется правильно

Чтобы обойти эту проблему путем глубокого клонирования объекта, как указано в этом ответе Вы можете использовать что-то вроде loda sh s * 1 040 * функция cloneDeep или JSON.parse( JSON.stringify( obj ) ) (которая, однако, будет работать только с примитивными типами, которые поддерживаются JSON).

0 голосов
/ 29 февраля 2020
  1. Скопируйте реквизиты, которые будут редактироваться в диалоговом окне, в секцию data непосредственно перед открытием диалога.
  2. Используйте скопированные реквизиты для редактирования (привяжите их к компоненты редактора).
  3. Копировать отредактированные реквизиты обратно в исходные после подтверждения диалога.
...