Vue停止列表/扩展

Question

如果我单击展开的元素，我想阻止列表折叠。因此，如果我单击任何折叠的标题，它应该展开，但如果我单击同一个标题，它不应该折叠但保持活动/展开（单击其他一些折叠的标题将起作用，前一个将折叠）。我试过摆弄v-model、:value 和stopPropagation()，但没有任何运气。这是一个codepen，其中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;
    }
  }
})

<v-layout row>
  <v-flex xs12 sm6 offset-sm3>
    <v-card>
  
      <v-list readonly>
        <v-list-group
          v-for="(item, i) in items"
          :key="item.title"
          :value="item.active"
          :prepend-icon="item.action"
          no-action
          @click.prevent="test(i,$event)"
        >
          <template v-slot:activator>
            <v-list-tile>
              <v-list-tile-content>
                <v-list-tile-title>{{ item.title }}</v-list-tile-title>
              </v-list-tile-content>
            </v-list-tile>
          </template>
  
          <v-list-tile
            v-for="subItem in item.items"
            :key="subItem.title"
            @click=""
          >
            <v-list-tile-content>
              <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
            </v-list-tile-content>
  
            <v-list-tile-action>
              <v-icon>{{ subItem.action }}</v-icon>
            </v-list-tile-action>
          </v-list-tile>
        </v-list-group>
      </v-list>
    </v-card>
  </v-flex>
</v-layout>

Answer 1

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