Static vue filtered Array is empty when I need it

Question

I have a template that needs some non-reactive data in it from my Vuex store. However at the moment, I have to manually switch views to get the data to load. I am assuming I should not use mounted or created. If I use watch, then it basically becomes reactive again, and I only want to get this once.

 data: function () {
    return {
      localreadmode: false,
      myArray: null,
    }
  },

  computed: {
    ...mapState({
      myNodes: (state) => state.myNodes,
      configPositions: (state) => state.configPositions,
      configEmoji: (state) => state.configEmoji,
    }),

    nodes_filtered: function () {
      return this.myNodes.filter((nodes) => {
        return nodes.deleted == false
      })
    },
  },

  // this is to stop sync chasing bug
  myArray: null,
  created() {
    this.$options.myArray = this.nodes_filtered
   console.log(this.nodes_filtered)
// is empty unless I switch views
  },

Why can't you make data in vuex store reactive? It's the exact way all data in such store should be. — Anatoly
– Anatoly, Commented Dec 7, 2020 at 17:39
@anatoly the app is more complicate but I have realtime sync in action and so when you are editing your own text you dont want this on as you cant edit your text - you end up in a race with sync — adamprocter
– adamprocter, Commented Dec 7, 2020 at 17:41

tony19 · Accepted Answer · 2022-07-16 01:44:42Z

1

You could still use a watcher that runs only once via the vm.$watch API. It returns a method that can be called to stop watching the value, so your handler could invoke it when nodes_filtered[] is not empty.

export default {
  mounted() {
    const unwatch = this.$watch(this.nodes_filtered, value => {
      // ignore falsy values
      if (!value) return

      // stop watching when nodes_filtered[] is not empty
      if (value.length) unwatch()

      // process value here
    })
  }
}

demo

edited Jul 16, 2022 at 1:44

answered Dec 8, 2020 at 20:00

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

adamprocter Over a year ago

thanks I did a hack with some timers, but this is not good obviously as would be caught out by hardware / internet speed I suspect... but I will try this instead seems much better

adamprocter Over a year ago

I had to add this.$forceUpdate() into the unwatch but this has reduced some of the complications with timers - thanks

Collectives™ on Stack Overflow

Static vue filtered Array is empty when I need it

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related