Javascript 如何在Vue.js插槽中使用条件渲染？

如何使用

v-if

的结果在Vue中渲染两个不同的组件？如果这很重要，我也会尝试在使用

v-for

渲染

TreeView

时执行此操作。这是我到目前为止试过的

TreeView.vue：

<template>
    <span>
        <ul v-show="isOpen" v-if="isFolder">
            <p
                v-for="(child, index) in item.children"
                v-bind:item="child"
                v-bind:key="index"
                <span v-if="!child.isFolder">
                    <slot v-bind:individualBookmark="child"></slot>
                </span>
                <span v-else> 
                    <div v-bind:class="{bold: isFolder}" v-on:click="toggle" v-on:dblclick="makeFolder" v-on:contextmenu="rightClick">
                        {{ child.name }}
                        <span v-if="isFolder">[{{ isOpen ? '-' : '+' }}]</span>
                    </div>
                </span>
            </p>
        </ul>
    </span>
</template>

<script>
export default {
  name: "TreeView",
  props: {
    item: Object
  },
  components: {
  },
  data: function() {
    return {
      isOpen: false
    }
  },
  computed: {
    isFolder: function() {
      return this.item.children.length > 0;
      //return this.item.children && this.item.children.length;
    }
  },
  methods: {
    toggle: function() {
      if (this.isFolder) {
        this.isOpen = !this.isOpen;
      }
    },
    makeFolder: function() {
      if (!this.isFolder) {
        this.$emit("make-folder", this.item);
        this.isOpen = true;
      }
    },
    rightClick: function() {
      alert("Right click action")
    }
  }
}
</script>

当我运行此操作时，由于某种原因，TreeView.vue中的

v-if=“！child.isFolder”

总是计算为true，因此它呈现书签组件。即使在

v-if

应计算为false的情况下，就像给定

treeData

的“child folder 1”子对象一样，它仍然计算为true。我觉得问题在于我如何在

TreeView.vue

中使用

，但我不确定。为什么

v-if

的计算结果总是为真而从不为假

---

问题可能还与我如何编写

isFolder

属性有关。

在

树视图

组件中添加一个名为

computedChildren

的计算属性，该组件通过添加

isFolder

属性映射项目属性：

  computed: {
    isFolder: function() {
      return this.item.children.length > 0;
      //return this.item.children && this.item.children.length;
    },
   computedChildren(){
      return this.item.children.map(child=>{
           child.isFolder=child.children?child.children.length>0:false //this add the property isFolder

          return child
        })
    }
  },

然后按如下方式循环：

<p
 v-for="(child, index) in computedChildren"
...

---

“您在Treeview组件中映射了项目属性并添加了该属性”您能解释一下如何做到这一点吗？我不完全理解如何在代码中实现它谢谢，这最终会将子文件夹呈现为一个文件夹。你知道如何在子文件夹中呈现书签吗？子文件夹未显示其包含的书签。不客气，请检查我编辑的答案，我使用template元素渲染插槽内容的地方似乎不起作用，下面是我所说内容的一部分。子文件夹看起来已展开，但未显示其包含的书签。此外，由于某种原因，当我单击子文件夹上的[-]按钮时，它会收回整个树，而它只应收回子文件夹中的书签。您能否提供一些codepen codesandbox示例以便调试它？这是我的全部代码。再次感谢您的帮助。

<p
 v-for="(child, index) in computedChildren"
...

   <TreeView 
                v-bind:item="treeData"
                v-on:make-folder="makeFolder"
                v-on:add-item="addItem">
     <template v-slot:default="slotProps">
        <Bookmark v-bind="slotProps.individualBookmark"></Bookmark>
    </template>
      </TreeView>