Uncaught TypeError: Cannot set property Tree of # which has only a getter

Question

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

在 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> 执行此操作，但出现此错误：

Uncaught TypeError: Cannot set property Tree of # which has only a 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>

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>

demo

Uncaught TypeError: Cannot set property Tree of # which has only a getter

Uncaught TypeError: Cannot set property Tree of # which has only a getter

javascript

vue.js

vue-component