Vue停止列表/扩展

Question

如果我单击展开的元素，我想阻止列表折叠。因此，如果我单击任何折叠的标题，它应该展开，但是如果我单击相同的标题，它应该不折叠，但保持活动/展开状态（单击其他折叠的标题将起作用，而前一个则将折叠）。我尝试摆弄Footer，v-model和:value，但没有任何运气。这是一个codepen，其中stopPropagation()属性正确，但是当active时元素仍然折叠。

active

new Vue({
  el: '#app',
  data () {
return {
  disableNavbar: true,
  items: [
    {
      action: 'local_activity',
      title: 'Attractions',
      items: [
        { title: 'List Item' }
      ]
    },
    {
      action: 'restaurant',
      title: 'Dining',
      active: true,
      items: [
        { title: 'Breakfast & brunch' },
        { title: 'New American' },
        { title: 'Sushi' }
      ]
    },
    {
      action: 'school',
      title: 'Education',
      items: [
        { title: 'List Item' }
      ]
    },
    {
      action: 'directions_run',
      title: 'Family',
      items: [
        { title: 'List Item' }
      ]
    },
    {
      action: 'healing',
      title: 'Health',
      items: [
        { title: 'List Item' }
      ]
    },
    {
      action: 'content_cut',
      title: 'Office',
      items: [
        { title: 'List Item' }
      ]
    },
    {
      action: 'local_offer',
      title: 'Promotions',
      items: [
        { title: 'List Item' }
      ]
    }
  ]
}
  },
  methods: {
    test(i,e) {
      console.log('clicked'+i+' '+JSON.stringify(e));
      if(this.items[i].hasOwnProperty('active')){
        console.log(this.items[i].active.toString());
      }
      this.items.forEach((obj,ind)=>{
        if(ind!==i){
          obj.active=false;
        }
      })
      console.log(JSON.stringify(this.items));
      if(this.items[i].hasOwnProperty('active') && this.items[i].active){
        event.stopPropagation();
        e.stopPropagation();
      }
      this.items[i].active=true;
    }
  }
})

Answer 1

简单的解决方案：@click.native.stop="yourAction"。