在 v-for 循环中显示 v-show - 仅显示单击的选项答案

【问题标题】：v-show within a v-for loop - show only clicked option在 v-for 循环中显示 v-show - 仅显示单击的选项
【发布时间】：2019-08-20 07:26:17
【问题描述】：

我设置了一个 v-for 循环，循环内有一个显示按钮，当我点击它时，它会打开所有隐藏的 div，我希望它只打开被点击的相关的那个。也许有另一种方法可以做到这一点，或者我一直在阅读的更好的方法 v-show 可能适合在循环内使用。

<div id="app" class="container">

        <form>
          <div v-for="item in filterOptions" :class="{ activeclass: isActive }">
            <dl>
              <dt>
                <!--- click to show --->
                <button @click="toggle(item)" @click.self.prevent>{{item.name}}</button>
              </dt>

              <!--- show this --->
              <dd v-show="isActive" :id="item.name">
                 <button v-for="option in item.values" v-on:click="option.selected = !option.selected" type="button" class="btn btn-primary" :class="{'active' : option.selected}">
                   {{option.name}}
                </button>
              </dd>
            </dl>
          </div>
        </form>

        <div v-for="item in products">
            <div>
              <h5>
                {{item.name}}
              </h5>
              <h6>{{item.region}}</h6>
              <a>View</a>
            </div>
        </div>

  </div>

var main = new Vue({
  el: '#app',
  data: {
    products: [
      {
        name: "davy",
        region: "Highland",
        category: "Single Cask"
      },
      {
        name: "bill",
        region: "Islay",
        category: "New releases"
      },
      {
        name: "shena",
        region: "Highland",
        category: "Remarkable Regional Malt"
      }
    ],
    filterOptions: [
      {
        name: 'Region',
        isActive: false,
        values: [
          {
            name: 'Highland',
            selected : false
          },
          {
            name: 'Speyside',
            selected : false
          },
          {
            name: 'Islay',
            selected : false
          }
        ]
      },
      {
        name: 'Price',
        isActive: false,
        values: [
          {
            name: '£1-50',
            selected : false
          },
          {
            name: '£51-100',
            selected : false
          },
        ]
      },
      {
        name: 'Category',
        isActive: false,
        values: [
          {
            name: 'Single Cask',
            selected : false
          },
          {
            name: 'Remarkable Regional Malt',
            selected : false
          },
          {
            name: 'New releases',
            selected : false
          }
        ]
      }
    ],

    isHidden: true,
    isActive: false

  },

  methods: {
    toggle: function () {
       this.isActive = !this.isActive;
     }
  }
})

【问题讨论】：

您可以使用样式绑定来切换您单击的元素的 css display 属性。它会在您使用的任何样式显示（即 inline-block、flex、grid）和none 之间切换以隐藏它。更多指导可以在这里找到forum.vuejs.org/t/vuejs-access-v-for-variable-in-v-bind-style/…

标签： vue.js v-for

【解决方案1】：

希望对你有帮助

window.onload = function() {
new Vue({
  el: '#app',
 data: {
    products: [
      {
        name: "davy",
        region: "Highland",
        category: "Single Cask"
      },
      {
        name: "bill",
        region: "Islay",
        category: "New releases"
      },
      {
        name: "shena",
        region: "Highland",
        category: "Remarkable Regional Malt"
      }
    ],
    filterOptions: [
      {
        name: 'Region',
        isActive: false,
        values: [
          {
            name: 'Highland',
            selected : false
          },
          {
            name: 'Speyside',
            selected : false
          },
          {
            name: 'Islay',
            selected : false
          }
        ]
      },
      {
        name: 'Price',
        isActive: false,
        values: [
          {
            name: '£1-50',
            selected : false
          },
          {
            name: '£51-100',
            selected : false
          },
        ]
      },
      {
        name: 'Category',
        isActive: false,
        values: [
          {
            name: 'Single Cask',
            selected : false
          },
          {
            name: 'Remarkable Regional Malt',
            selected : false
          },
          {
            name: 'New releases',
            selected : false
          }
        ]
      }
    ],

    isHidden: true,
    isActive: false,
      selectedName: ''

  },

  methods: {
    toggle: function (item) {
      this.selectedName = item.name
     }
  }
})
}

.success {
  display: block !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='app'>

<div id="app" class="container">

        <form>
          <div v-for="item in filterOptions" :class="{ activeclass: isActive }">
            <dl>
              <dt>
                <!--- click to show --->
                <button  v-on:click.prevent="toggle(item)">{{item.name}}</button>
              </dt>

              <!--- show this --->
              <dd :id="item.name" v-if="item.name == selectedName" v-bind:class="{'success': (item.name == selectedName)}">
                 <button v-for="option in item.values" v-on:click="option.selected = !option.selected" type="button" class="btn btn-primary" :class="{'active' : option.selected}">
                   {{option.name}}
                </button>
              </dd>
            </dl>
          </div>
        </form>

        <div v-for="item in products">
            <div>
              <h5>
                {{item.name}}
              </h5>
              <h6>{{item.region}}</h6>
              <a>View</a>
            </div>
        </div>

  </div>
</div>

【讨论】：

【解决方案2】：

在数据中定义activeitem，在toggle方法中设置this.activeitem = item.name。

 toggle: function (item) {
         this.isActive  = !this.isActive;
         this.activeitem = item.name
     }

在 HTML 中添加v-show="item.name == activeitem && isActive"

<dd  v-show="item.name == activeitem && isActive" :id="item.name">
                 <button v-for="option in item.values" v-on:click="option.selected = !option.selected" type="button" class="btn btn-primary" :class="{'active' : option.selected}">
                   {{option.name}} 
                </button>
              </dd>

var main = new Vue({
  el: '#app',
  data: {
  activeitem:null,
    products: [
      {
        name: "davy",
        region: "Highland",
        category: "Single Cask"
      },
      {
        name: "bill",
        region: "Islay",
        category: "New releases"
      },
      {
        name: "shena",
        region: "Highland",
        category: "Remarkable Regional Malt"
      }
    ],
    filterOptions: [
      {
        name: 'Region',
        isActive: false,
        values: [
          {
            name: 'Highland',
            selected : false
          },
          {
            name: 'Speyside',
            selected : false
          },
          {
            name: 'Islay',
            selected : false
          }
        ]
      },
      {
        name: 'Price',
        isActive: false,
        values: [
          {
            name: '£1-50',
            selected : false
          },
          {
            name: '£51-100',
            selected : false
          },
        ]
      },
      {
        name: 'Category',
        isActive: false,
        values: [
          {
            name: 'Single Cask',
            selected : false
          },
          {
            name: 'Remarkable Regional Malt',
            selected : false
          },
          {
            name: 'New releases',
            selected : false
          }
        ]
      }
    ],

    isHidden: true,
    isActive: false

  },

  methods: {
    toggle: function (item) {
         this.isActive  = !this.isActive;
         this.activeitem = item.name
     }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" class="container">

        <form>
          <div v-for="item in filterOptions" :class="{ activeclass: isActive }">
            <dl>
              <dt>
                <!--- click to show --->
                <button @click="toggle(item)" @click.self.prevent>{{item.name}}</button>
              </dt>

              <!--- show this --->
              <dd  v-show="item.name == activeitem && isActive" :id="item.name">
                 <button v-for="option in item.values" v-on:click="option.selected = !option.selected" type="button" class="btn btn-primary" :class="{'active' : option.selected}">
                   {{option.name}} 
                </button>
              </dd>
            </dl>
          </div>
        </form>

        <div v-for="item in products">
            <div>
              <h5>
                {{item.name}}
              </h5>
              <h6>{{item.region}}</h6>
              <a>View</a>
            </div>
        </div>

  </div>

【讨论】：

在你的toggle函数中你应该在设置this.activeitem = item.name之前检查this.isActive === true。