How to change the value of a prop (or data) of a component, from OUTSIDE the component?

Question

As the title says, I'm trying to change the value of a prop/data in a component, but the trigger is being fired from outside the component, from something that has nothing to do with Vuejs.

Currently I trying to use a Simple State Manager, based on the docs from here, like so:

var store = {
  debug: true,
  state: {
    progress: 23
  },
  setProgress (uff) {
    if (this.debug) console.log(uff)
    this.state.progress = uff
  }
}

The documentation leads me to believe that if the value of progress is mutated, the value of my Vue instance would also change if I link them accordingly. But this doesn't work in a component (my guess would be it's cause it's a function).

This is part of my component:

Vue.component('transcoding', {
  data () {
    return {
      progress: store.state.progress
    }
  },
  template: `
    <v-progress-circular
        :size="130"
        :width="25"
        :value="progress"
        color="teal"
      >
      {{progress}}
    </v-progress-circular>
  `
})

So, when I trigger a store.setProgress(value), nothing happens. The log messages do happen, but the state isn't updated in the component.

This is the script that's currently triggering the state change:

App.cable.subscriptions.create(
  { channel: "ProgressChannel", room: "2" },
  { received: function() {
    store.setProgress(arguments[0])
   }}
)

It's an ActionCable websocket in Ruby on Rails. The trigger works perfectly, but I just cannot make the connection between the state change and the component.

I tried loading this script in the mounted() event for the component, thinking I could reference the value like this:

Vue.component('transcoding', {
  data () {
    return {
      progress: 0
    }
  },
  template: `
    <v-progress-circular
        :size="130"
        :width="25"
        :value="progress"
        color="teal"
      >
      {{progress}}
    </v-progress-circular>
  `,
  methods: {
    setProgress: function(uff) {
      this.progress = uff
    }
  },
  mounted() {
    App.cable.subscriptions.create(
      { channel: "ProgressChannel", room: "2" },
      { received: function() {
        this.setProgress(arguments[0])
       }}
    )
  }
})

But this gives me an error saying that this.setProgress is not a function, which is obvious since I'm calling it within the create method of App.cable.subscriptions.

How can I make this work? I realize I'm mixing things with my question, but I wanted to illustrate what my goal is. I simply want to know how to make the component's progress data to update, either from the outside, or from the component itself if I can make it find the function.

its $store not store. All Vue's built-in properties are accessed/declared with '$' sign — Lahori, Feb 18 '18 at 07:35

score 0 · Answer 1 · answered Feb 18 '18 at 12:55

You are initializing your data item to the value from the store:

  data () {
    return {
      progress: store.state.progress
    }
  }

Changes to the store will not propagate to your data item. You could eliminate the data item and just use store.state.progress where you need it, or you could create an computed that returns its value if you want a local single-name handle for it.

How to change the value of a prop (or data) of a component, from OUTSIDE the component?

1 Answers1