javascript - 未捕获的类型错误：无法设置只有一个 getter 的 # 属性树

Question

我正在使用 Vue 3，<script setup>但在尝试使用组件时出现错误。

在 Vue 2 中，它是这样工作的：

<template>
    <Tree />
</template>

<script>
    import { Tree, Fold, Draggable } from 'he-tree-vue'

    export default {
        components: {
            Tree: Tree.mixPlugins([ Fold, Draggable ])
        },
     }
</script>

我想使用 Vue 3 执行此操作，<script setup>但出现此错误：

未捕获的类型错误：无法设置只有一个 getter 的 # 属性树

<template>
    <Tree />
</template>

<script setup>
    import { Tree, Fold, Draggable } from 'he-tree-vue'

    Tree = Tree.mixPlugins([ Fold, Draggable ]) // This is causing an error
</script>

标签： javascriptvue.jsvue-component

Answer 1

尝试重新分配导入时似乎会出现问题。不要重新分配它，而是重命名Tree导入，然后导出您自己的Tree常量：

<template>
  <Tree :value="treeData">
    <template v-slot="{ node, path, tree }">
      <span>
        <b @click="tree.toggleFold(node, path)">
          {{node.$folded ? '+' : '-'}}
        </b>
        {{node.text}}
      </span>
    </template>
  </Tree>
</template>

<script setup>
import { Tree as HeTree, Fold, Draggable } from 'he-tree-vue'
const Tree = HeTree.mixPlugins([ Fold, Draggable ])

const treeData = [{text: 'node 1'}, {text: 'node 2', children: [{text: 'node 2-1'}]}]
</script>

演示