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

Posted 2023-02-23

【中文标题】带有 Vuejs 类组件的双向计算属性

【英文标题】：Two-way Computed Property with Vuejs class components

【发布时间】：2019-11-12 20:27:02

【问题描述】：

在使用 class-style components 时，是否可以在 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);
  

但这显然行不通，因为 getter/setter 总是具有相同的数据类型。 myvalue 的类型是 bool，但是将它传递给这两个函数并不能正常工作，因为当绑定到 select 时像这样

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

setter 似乎没有得到值。

我还尝试手动将值绑定到select（就像您对文本输入所做的那样），但在select 选项上使用:selected 不起作用（始终选择第一个选项）。

【问题讨论】：

如果myvalue 是布尔值，那么您可能需要通过执行:value="false" 和:value="true" 来确保选项值也是布尔值而不是字符串。

@DecadeMoon 我会调查的。我在测试是否选择了选项时检查了这一点，但在设置值时没有检查。感谢您的提示。

【参考方案1】：

过了一会儿我就开始工作了。毕竟只使用类 setter 和 getter 是解决方案：

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

为基本功能工作。