CODEWITHSUNDEEP
javascriptvue.jsvue-component
martins16321
martins16321

Reputation: 911

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

I'm using Vue 3 with <script setup> and I'm getting an error when I'm trying to use a component.

In Vue 2, it worked like this:

<template>
    <Tree />
</template>

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

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

I would like to do this using Vue 3 and <script setup> but I'm getting this error:

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>

Upvotes: 1

Views: 1171

Answers (1)

tony19
tony19

Reputation: 138566

The problem seems to occur with trying to re-assign an import. Instead of reassigning it, rename the Tree import, and export your own Tree constant:

<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

Upvotes: 1

Related Questions