Question

在使用类样式组件时，是否可以在vuejs中使用双向计算属性？就我而言，给定具有简单vuex存储的应用程序，是否可以通过v-model将存储值绑定到 select ？

在vuex documentation中，有一个双向绑定的示例：

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

但是我没有让它与类组件一起工作。我尝试过类似的

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);
  }
}

但这显然不起作用，因为获取器/设置器始终具有相同的数据类型。 myvalue的类型为bool，但是将其传递给两个函数的效果不佳，因为像这样绑定到select时

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

setter似乎没有值。

我还尝试将值手动绑定到select（就像您使用文本输入一样），但是在:selected选项上使用select无效（第一个选项始终处于选中状态。）

Answer 1

过一会儿我就开始工作了。毕竟，仅使用类设置器和获取器是解决方案：

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

和

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

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

使用基本功能。

具有Vuejs类组件的双向计算属性

1 个答案: