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

Question

我设置了一个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;
     }
  }
})

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

Answer 2

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

 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>