将单个元素设置为在映射时隐藏在vue js中

由 发布于

对vue来说有点新，我已经从vue.js中的初始数据对象中映射了一些数据，当用户选择标题时，我试图隐藏并仅显示该映射迭代中的项目。我正在使用isHidden道具来隐藏和显示我的列表项，但是当选择任何标题时，它将显示所有

  • tags instead of those associated with that specific header.

    anyone know the proper way to do this? should I use some index or id from e.target? or should I give each list item a 'hidden' property and change it that way somehow?

    here's my list that I mapped out

    <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>

    then I have my data like so:

     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,  
            },

    then I have my method to alter isHidden

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