将单个元素设置为在映射时隐藏在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
                  },
    
  • 评论