установка одного элемента на скрытый в vue js при отображении - PullRequest
Новая
       22

установка одного элемента на скрытый в vue js при отображении

1 голос
/ 08 апреля 2020

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

вместо тех, которые связаны с указанным заголовком c.

кто-нибудь знает правильный способ сделать это? я должен использовать какой-то индекс или идентификатор из e.target? или я должен дать каждому элементу списка «скрытое» свойство и каким-то образом изменить его?

вот мой список, который я наметил 

<div v-for="item in list">
   <h4 v-on:click="viewItemsinCat()">{{item.category}}</h4>
   <ul>
      <li v-if="!isHidden" v-for="item in item.food">
         {{item}}
      </li>
   </ul>
</div>

, тогда мои данные будут такими: 

data: {
  list: [{
    category: 'Baked goods',
    food: ['bread', 'cookie', 'butter', 'powder']
  }, {
    category: 'meats',
    food: ['chicken', 'turkey', 'beef']
  }, {
    category: 'fruits',
    food: ['bannana', 'apple', 'pineapple']
  }, {
    category: 'canned goods',
    food: ['tomatoes', 'green beans', 'corn']
  }, {
    category: 'veggies',
    food: ['broccoli', 'celery', 'lettuce']
  }, {
    category: 'pantry',
    food: ['broom', 'mop', 'dried beans']
  }, ],
  isHidden: true,
}

тогда у меня есть свой способ изменить isHidden 

viewItemsinCat: function(){
   this.isHidden = false
},

1 Ответ

1 голос
/ 08 апреля 2020

Добавление свойства selected, которое будет содержать выбранный элемент, когда пользователь нажимает: 

data() {
  return {
    selected: null,
    list: [...]
  }
}

<div v-for="item in list">
  <h4 v-on:click="selected=item.category">{{item.category}}</h4>
  <ul v-if="selected==item.category">
    <li v-for="food in item.food">
      {{ food }}
    </li>
  </ul>
</div>

Вот демоверсия

...