Added tree properties causing TypeError: Converting circular structure to JSON

[al2613]

trafficstars

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 https://github.com/phphe/vue-draggable-nested-tree/issues/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]

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.