javascript - 动态/递归结构中的切换按钮

Question

我正在循环一个元素数组，并且我想使用给定的模板递归地显示该元素

然后在该模板内使用带有切换功能的按钮来显示/隐藏给定元素的Child的更深级别模板(Child也是一个元素)

<div v-for="(element in elements)">
    <MyTemplate :element="element"></MyTemplate>
</div>

这是我的模板:

<template>
    <div>element.Name</div>
    <button @click="toggleSomehow">
        // I'd want to display it under that button when he's "showing"
        <MyTemplate :element="element.Child"></MyTemplate>
    </button>
</template>

但我不太确定如何在不将其与某些属性或数组绑定(bind)的情况下执行该 SHOW/HIDE 按钮，但我宁愿避免它因为一切都必须是动态的

Answer 1

您应该将可切换数据添加到您的 MyComponent 组件，例如 visible请参阅下面的示例

Vue.component('my-template', {
  template: '#my-template',
  props: {
    element: {
      type: Object,
      required: true
    }
  },
  
  data() {
    return {
      visible: false
    }
  },

  methods: {
    toggleVisible() {
      this.visible = !this.visible
    }
  }
});

new Vue({
  el: '#app'
})

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

<script type="text/x-template" id="my-template">
  <div>
    <div>{{element.name}}</div>
    <button @click="toggleVisible" v-if="element.child">toggle</button>
    <my-template v-if="visible" :element="element.child" />
  </div>
</script>

<div id="app">
  <my-template :element="{name: 'test', child: {name: 'child test'}}" />
</div>