1

如何使用 a 的结果v-if在 Vue 中渲染两个不同的组件？如果重要的话，我也在尝试在渲染TreeViewusing时这样做v-for。这是我到目前为止所尝试的。

树视图.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>

App.vue（Bookmark标签是我构建的自定义组件，没有计算属性isFolder）：

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

<script>
import Bookmark from './components/Bookmark.vue'
import TreeView from './components/TreeView.vue'
import Vue from 'vue'

export default {
    name: 'App',
    components: {
        Bookmark,
        TreeView
    },

    data: function() {
        return {
            treeData : {
                    name: "My Tree",
                    children: [
                      { name: "hello" },
                      { name: "wat" },
                      {
                        name: "child folder 1",
                        children: [
                          {
                            name: "child folder",
                            children: [{ name: "hello" }, { name: "wat" }]
                          },
                          { name: "hello" },
                          { name: "wat" },
                          {
                            name: "child folder",
                            children: [{ name: "hello" }, { name: "wat" }]
                          }
                        ]
                      }
                    ]
            }
          }
    },
    methods: {
        makeFolder: function(item) {
            Vue.set(item, "children", []);
            this.addItem(item);
        },
        addItem: function(item) {
            item.children.push({
              name: "new stuff"
            });
        }
    }
}
</script>

当我运行它时，出于某种原因，v-if="!child.isFolder"TreeView.vue 中的总是评估为 true，因此它呈现 Bookmark 组件。即使在v-if给定 的“子文件夹 1”子对象时应该评估为 false的情况下treeData，它仍然评估为 true。我感觉问题与我的使用方式<slot></slot>有关，TreeView.vue但我不确定。为什么v-if总是评估为真而从不为假？

问题也可能与我编写isFolder属性的方式有关。

4

1 回答 1

2

添加一个computedChildren在组件内部调用的计算属性Treeview，该属性通过添加属性来映射 itemisFolder属性：

  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"
...

要更换插槽，您可以使用templateelement ：

   <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>
于 2020-07-26T16:39:35.797 回答