Почему v-dialog сбрасывает переключатель видимости другого элемента?

Question

Занимался этим в течение нескольких дней, надеюсь, есть несколько волшебников Vuetify.

Вот ситуация: Я сделал набор v-expansion-panels, и если один из них будет расширен , он также показывает кнопку со стрелкой (display: none переключается нажатием на v-expansion-header). После этого нажатия кнопки моя цель состоит в том, чтобы показать диалоговое окно.

Проблема: Когда диалоговое окно запрашивается нажатием кнопки, переключатель отображения кнопки переворачивается. Он исчезает, как только вы нажимаете на кнопку, чтобы вызвать диалоговое окно, и появляется снова после свертывания v-expansion-panel.

Как и должно быть: Кнопка со стрелкой всегда должна быть видна до тех пор, пока v-expansion-panel развернут, независимо от того, нажимается ли он для просмотра диалогового окна или нет.

Здесь - это кодовое поле, копирующее и иллюстрирующее проблему.

Любые мысли будут высоко ценится!

Answer 1

Публикация решения, в котором помог коллега. Это также работает с любым размером массива (что является более реальным сценарием в динамических c веб-приложениях). Он реализует хук жизненного цикла created(), который добавляет свойство expanded: false к каждому элементу в массиве, который мы можем использовать для отслеживания состояния раскрытия и переключения видимости кнопки. Здесь - кодовая ручка.

Однако в общем случае в этом сценарии рекомендуется фактически сделать независимый компонент <v-expansion-panels />, а в родительском компоненте фактически l oop компонентов , Это уже решило бы проблемы состояния самостоятельно, поскольку каждый компонент поддерживает свое собственное состояние в своей области.

Answer 2

Это связано с использованием style непосредственно на элементе.

Используйте v-show вместо переключения стилей вручную:

<v-btn v-on="on" class="ml-1" width="36px" v-show="expanded[i]">

Обновите данные, чтобы они содержали массив для панелей

data () {
 return {
  dialog: false,
  expanded: [false, false, false]
 }
}

И обновите свой метод toggleMoveUp, чтобы обновить expanded вместо использования HTML идентификаторов.

toggleMoveup(i) {
 this.$set(this.expanded, i, !this.expanded[i])

 this.show=true;
}

Примечания:

• Вам необходимо использовать Vue.set при обновлении массива
• Вам не следует полагаться на HTML идентификаторов, если вы используете свои компоненты более чем в одном месте одновременно Вы столкнетесь с несколькими идентификаторами.

Почему ваш подход не сработал? Я предполагаю, что vuetify обновляет свойство стиля элемента, но не заботится о сохранении уже существующих значений, поэтому ваш display:none удаляется.