Two-way Computed Property with Vuejs class components

Question

Is it possible to use two-way computed properties with vuejs when using class-style components? In my case, given an app with a simple vuex store, is there a way to bind the store values to a select with v-model?

In the vuex documentation there is an example for two-way binding:

// ...
computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}

But I did not get this to work with class components. I tried something like

private get myvalue(): boolean {
  return store.state.myvalue;
}

/* Same type of function I would use when using @input one-way binding*/
private set myvalue(e: Event /* Wrong type for the setter... */) {
  const target: HTMLSelectElement = e.target as HTMLSelectElement;
  const value = target.value;

  if (Boolean(value)) {
    store.commit("myvalue", target.value);
  }
}

But this obviously does not work because getters/setters always have the same data type. The type of myvalue is bool, but passing it to both functions does not work as well, because when binding to a select like so

<select v-model="myvalue">
  <option value="false">No</option>
  <option value="true">Yes</option>
</select>

The setter does not seem to get a value.

I also tried to bind the value to the select manually (like you would do with text-inputs) but using :selected on the select options didn't work (the first option always was selected).

If myvalue is a bool then maybe you need to make sure the option values are also bools instead of strings by doing :value="false" and :value="true". — Decade Moon
– Decade Moon, Commented Jul 2, 2019 at 12:52
@DecadeMoon I'll look into that. I checked for that when testing if an option was selected but not when setting the value. Thanks for that hint. — Janis Jansen
– Janis Jansen, Commented Jul 2, 2019 at 12:53

Janis Jansen · Accepted Answer · 2019-07-03 10:42:29Z

1

I got it working after a little while. Just using class setters and getters was the solution afterall:

<select v-model="myvalue">
  <option :value="false">No</option>
  <option :value="true">Yes</option>
</select>

and

private get myvalue(): boolean {
  return store.state.myvalue;
}

private set myvalue(value: boolean) {
  store.commit("myvalue", value);
}

work for the basic functionality.

answered Jul 3, 2019 at 10:42

Janis Jansen

1,0551 gold badge18 silver badges40 bronze badges

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

Collectives™ on Stack Overflow

Two-way Computed Property with Vuejs class components

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related