Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added tree properties causing TypeError: Converting circular structure to JSON #64

Open
al2613 opened this issue Mar 19, 2019 · 1 comment

Comments

@al2613
Copy link

al2613 commented Mar 19, 2019

I am trying to use JSON.stringify() on the tree data for an app I'm building. The issue is the new generated properties that Drag adds causing converting error. I noticed that there is the pure method that can be used from this post #9 just so that we get raw data. However, the generated properties still seem to be there and the console didn't spit out any error messages. Am I missing something? I'm not sure if perhaps it's because I'm using a computed property (renderList) that grabs data from my store as opposed to local component data?

Template:

<Tree :data="renderList" draggable="draggable" @change="treeChange">
      <div slot-scope="{ data }" class="white --text">
        <template v-if="!data.isDragPlaceHolder">
          <span>{{ data.text }}</span>
          <i class="fas fa-save fa-lg" @click="deleteElement(data._id)"></i>
        </template>
      </div>
    </Tree>
methods: {
    ...mapActions([setClickedElementList]),
    deleteElement(id) {
      //console.log(element);
      this.$store.dispatch(deleteFromComponentHtmlList, id);
    },
    treeChange(node, nodeVm, store) {
      this.renderList = store.pure(store.rootData, true).children
    }
  },
  computed: {
    ...mapState(['componentMap', 'activeComponent']),
    renderList: {
      get() {
        return this.componentMap[this.activeComponent].htmlList;
      },
      set(newArr) {
        console.log('SET', newArr);
        this.setClickedElementList(newArr);
      }
    }
  },

Thanks!

@phphe
Copy link
Owner

phphe commented Mar 20, 2019

If you add new circular structure property to node, the pure method will not be able to handle it. you can override pure method or code custom method refre source of pure: https://github.com/phphe/vue-draggable-nested-tree/blob/master/src/components/Tree.vue#L71
The another way: if the added property name started with '_', it will be ignore.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants