Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 140762

Vue computed property getting modified unintentional by other computed property

$
0
0

I want to build an items tree using a list of folders and a list of files (called workplaces in my case), I get both of these from the backend via computed properties. To display the tree i use a third computed property. In this one, the folder and workplaces lists are copied and with their help an items list is build.

However, the folder list is getting modified without my intention to do so.

computed: {
    workplaces: self => self.$store.getters.getWorkplaces,
    folders: self => self.$store.getters.getFolders,
    items: self => {
      let items = []
      let workplaces = [...self.workplaces] // copy workplaces array
      let folders = [...self.folders] // copy folders array
      ... // work with local workplaces and folders to build items

Since im using my local variable of workplaces I expect my computed property this.folders not to change and remain the same with or without items getting computed. However this is not the case.

In this part my computed property folders is getting modified while it should be only the local version of folders.

// here workplaces are inserted into folders, this works on the local folders array and should not affect the property folders
for (i = 0; i < folders.length; i++) {
        let item = folders[i]
        if (item.children.length) {
          for (j = 0; j < item.children.length; j++) {
            let child = item.children[j]
            let id

            // below is already a kind of workaround that should not be necessary
            if (typeof child === 'object'&& child !== null) {
              id = child.id
            } else {
              id = child
            }
            let workplace = workplaces.find(wp => wp.id === id)
            let index = workplaces.indexOf(workplace)
            if (workplace !== undefined) {
              item.children[j] = workplace
              workplaces.splice(index, 1)
            }
          }
        }
      }

this.folders now has objects als children instead of ids.

{ // a folder in this.folders should be like this
  "_id": "f_f0ed1572341878071",
  "_rev": "2-8d0e0f2f6f26408af2e826d51d262733",
  "type": "folder",
  "id": "f_f0ed1572341878071",
  "name": "O3",
  "parent": null,
  "children": [
    "w_76a51572342907783"
  ],
  "syncStatus": "userdb"
}

{ // but looks like this (children now has an object instead of an id)
  _id:"f_f0ed1572341878071"
  _rev:"2-8d0e0f2f6f26408af2e826d51d262733"
  children:Array[1]
    0:Object
  id:"f_f0ed1572341878071"
  name:"O3"
  parent:null
  syncStatus:"userdb"
  type:"folder"
}

Other variants of copying the folders array have been tested but produce the same problem. Operations on the local workplaces array do not alter the workplaces property. Other workarounds like the a watcher instead of computed were also tested.

To clarify, a folder in the local items array and local folder array should look like this, a folder in the computed property folders should not.

Thank you for your help!


Viewing all articles
Browse latest Browse all 140762

Latest Images

Trending Articles



Latest Images

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>