Vue JS Панели расширения Vuetify внутри V-for L oop Открытие всех панелей - PullRequest
Новая
       32

Vue JS Панели расширения Vuetify внутри V-for L oop Открытие всех панелей

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

Я извлекаю данные из базы данных и перебираю данные в DOM с помощью v-for l oop. У меня есть vuetify компоненты панели расширения внутри l oop. Проблема в том, что если пользователь щелкает, чтобы открыть одну панель расширения, он открывает все остальные панели расширения в l oop. Я попытался использовать v-модель, но поскольку панели содержатся в родительском элементе l oop, модель просто назначается каждому экземпляру панели.

Вот упрощенный код для отображения основы c структура, с которой я имею дело -

https://codepen.io/jbodeen/pen/dyobPem?editable=true&editors=101

<div id="app">
<div v-for="data in testData">
  <v-expansion-panels
    v-model="panel"
  >
    <v-expansion-panel>
      <v-expansion-panel-header>{{ data.name }}</v-expansion-panel-header>
      <v-expansion-panel-content>
        <ul>
          <li v-for="step in data.steps">{{ step.name }}</li>
        </ul>
      </v-expansion-panel-content>
    </v-expansion-panel>


  </v-expansion-panels>
</div>

Ответы [ 3 ]

1 голос
/ 04 февраля 2020 
<div id="app">
    <div v-for="data in testData">
        <v-expansion-panels v-model="data in testData">
        <v-expansion-panel>
          <v-expansion-panel-header>{{ data.name }}</v-expansion-panel-header>
          <v-expansion-panel-content>
            <ul><li v-for="step in data.steps">{{ step.name }}</li></ul>
          </v-expansion-panel-content>
        </v-expansion-panel>
      </v-expansion-panels>
    </div>
</div>

кодовая ссылка

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

Если l oop на expansion-panel не включено div.

, а на oop на div он создает разные панели. по дизайну это выглядит как та же панель. но они разные. 

<div id="app">
    <div>
      <v-expansion-panels
        v-model="panel"
      >
        <v-expansion-panel v-for="(data, index) in testData">
          <v-expansion-panel-header>{{ data.name }}</v-expansion-panel-header>
          <v-expansion-panel-content>
            <ul>
              <li v-for="step in data.steps">{{ step.name }}</li>
            </ul>
          </v-expansion-panel-content>
        </v-expansion-panel>


      </v-expansion-panels>
    </div>
</div>
0 голосов
/ 05 февраля 2020

Я смог исправить пользовательский интерфейс, удалив директиву v-модели. К сожалению, это требует переопределений для достижения функциональности, которая зависит от директивы v-модели, но если вам просто нужно, чтобы панели открывались по одной в al oop, удаление v-модели работает.

...