时间戳

首页 > 解决方案 > Vue-Form-Generator 模式对计算属性没有反应

javascript - Vue-Form-Generator 模式对计算属性没有反应

问题描述

我的数据this.coinPairingOptions中有计算属性，需要根据 this 中的其他一些字段来呈现其单选按钮schema。我减少了文件中的代码量以节省空间。 

data: function () {
  return {
    schema: {
     {model: "symbolPair", type: "radios", label: "Pair with", values: 
      this.coinPairingOptions, required: true}
},
computed: {
    coinPairingOptions() {
    console.log("computing coinPairingOptions")
    let coin = this.model.symbol.toUpperCase();
    let options = [];

    if (this.model.exchange === 'Coinbase') {
      options = this.getCoinbasePairs
    } else if (this.model.exchange === 'Binance') {
      options = this.getBinancePairs
    } else {
    }
    console.log(options.get(coin));
    return options.get(coin);
  },
}

在开发工具中，我可以看到计算属性更改为正确的值，但数据中没有更改。显然，这是适当的行为，但有什么办法解决这个问题？我尝试放入{{this.coinPairingOptions}}html 并且它出错，因为它是一个最初没有值的计算属性。

任何帮助，将不胜感激！

标签： javascriptvue.js

解决方案

你不能使用computed propertyin data，因为在做data之前评估computed properties。

您可以使用 awatcher来达到预期的结果。查看文档，您可以添加参数immediate以使用表达式的当前值立即触发回调。

Computed properties已经可以template通过 using访问{{}}。您无需将 athis放在计算的前面。

推荐阅读