Vue с bootstrap-vue: предотвращать более одного развернутого элемента списка в любое время в списке (v-for)

Я использую vue с bootstrap-vue и функцией b-collapse, и в этом случае он используется в v-for (списки).

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

Итак, мой вопрос:

Как я могу закрыть развернутые, когда я нажимаю новый элемент списка для раскрытия?

Примечание: я генерирую v-b-toggle = "" с такими уникальными значениями, как это:

<i v-b-toggle="'collapse' + key + index"

Вот мой код:

<div v-for="(item, key, index) in nluData">
   <div v-for="(item, key, index) in nluData">
       <div class="alert alert-warning">
           <i v-b-toggle="'collapse' + key + index">&nbsp;</i>
       </div>

   <b-collapse :id="'collapse' + key + index">
       <b-card style="background-color:#f0f8ff; margin-right:-30px;">
           ....
       </b-card>
   </b-collapse>
</div>

ОБНОВЛЕНИЕ ПОСЛЕ ПРЕДЛОЖЕНИЯ @ sklingler93:

Изменено на следующее:

<i @click="expanded=key">&nbsp;</i>
<b-collapse :id="'collapse' + key + index" visible="key == expanded">

Свойство данных Vue:

 export default {
data() {
      return {
          expanded: 0
          }
      }

Я пробовал разные типы для расширенных (string, boolean, int). В итоге все развернулось, и следующее предупреждение: как:

Недопустимое свойство: проверка типа для свойства "visible" завершилась неудачно. Ожидается логическое значение, получено String.


javascript vue.js vuejs2 bootstrap-vue
person Terje Nygård    schedule 28.02.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

b-collapse имеет видимое свойство, которое вы можете установить. Поэтому, если вы объявляете переменную в своем data, чтобы отслеживать, какой b-collapse раскрывается, вы можете использовать это:

<div v-for="(item, key, index) in nluData">
   <div v-for="(item, key, index) in nluData">
       <div class="alert alert-warning">
           <i @click="expanded=key">&nbsp;</i>
       </div>

   <b-collapse :visible="key === expanded">
       <b-card style="background-color:#f0f8ff; margin-right:-30px;">
           ....
       </b-card>
   </b-collapse>
   </div>
</div>

person sliptype    schedule 28.02.2018