Javascript v模型与计算属性的动态绑定

我有一个组件，我想在其中迭代具有计算属性的元素

在正常情况下，您会这样做：

//计算属性
获取价格：{
得到（）{
返回值
},
设置（值）{
//使用一些vuex魔法设置值
},
},

然后在模板中引用它，如下所示：

这和预期的一样有效。然而，我想做以下几点

//计算属性
步骤（）{
返回[
{
允许:对,，
课文：“一些问题？”，
键入：“整数”，
模型：this.acquiredPrice，//对计算属性的引用
},
]
},

{{step.text}

因此，核心问题是，当我迭代这些步骤并使用step.model引用computed属性时，我松开了setter。也就是说，在字段中键入setter方法时，永远不会命中

也许有某种方法可以通过字符串名访问计算属性，这样就可以避免dict中的实际值

例如（这只是我想要的伪代码）

v-model=$computed['acquiredPrice']

可以在此处看到说明该问题的完整PoC：

<template>
  <div class="">
    <template v-for="step in steps">
      <v-row
          :key="step.text"
      >
        <v-col>
            <h4>{{step.text}}</h4>
            <!-- This does not work. Only in retrieving the value -->
            <v-text-field
                v-model="step.model"
            >
            </v-text-field>
        </v-col>
      </v-row>
    </template>
    <!-- This works just as expected -->
    <v-text-field
        v-model="acquiredPrice"
    >
    </v-text-field>
  </div>
</template>

<script>
  export default {
    name: 'redacted',
    props: {
    },
    data: () => ({
    }),
    computed: {
      acquiredPrice: {
        get () {
          return value
        },
        set (value) {
          // set the value with some vuex magic
          // THIS IS NEVER HIT WHEN IT IS REFERENCED FROM step.model ON LINE 13
        },
      },
      steps () {
        return [
          {
            allowed: true,
            text: 'Some question?',
            type: 'integer',
            model: this.acquiredPrice,
          },
        ]
      },
    },
    components: {
    },
    methods: {
    },
    mounted () {
    },
  }
</script>

{{step.text}
导出默认值{
名称：“修订版”，
道具：{
},
数据：（）=>({
}),
计算：{
获取价格：{
得到（）{
返回值
},
设置（值）{
//使用一些vuex魔法设置值
//当从第13行的step.model中引用时，它永远不会被命中
},
},
步骤（）{
返回[
{
允许:对,，
课文：“一些问题？”，
键入：“整数”，
型号：这是我的，
},
]
},
},
组成部分：{
},
方法：{
},
挂载（）{
},
}

根问题在此行中：

model:this.acquiredPrice，//对计算属性的引用

因为您没有将对

acquiredPrice

计算属性的引用赋值到

模型中，所以您正在调用它的getter并赋值给它返回的值

没有什么比得上
$computed
，因为它是不需要的-computed prop只是组件的另一个成员，因此您可以像
这个[“acquiredPrice”]
一样访问它，而且由于
这个
在模板中不可用，您可以使用该方法使用一个小技巧，然后从中返回
这个

整体解决方案：


newvue({
数据（）{
返回{
柜台：10
};
},
计算：{
获取价格：{
得到（）{
把这个寄回柜台；
},
设置（值）{
//只是占位符，因为我们这里没有Vuex
this.counter=值；
日志（“更新计数器”，值）
}
},
步骤（）{
返回[{
允许:对,，
课文：“一些问题？”，
键入：“整数”，
型号：“acquiredPrice”
}, ]
},
},
方法：{
self（）{
还这个
}
}
}).$mount（“#app”）

{{counter}}
{{step.text}
根问题在此行中：

model:this.acquiredPrice，//对计算属性的引用

因为您没有将对
acquiredPrice
计算属性的引用赋值到
模型中，所以您正在调用它的getter并赋值给它返回的值

没有什么比得上
$computed
，因为它是不需要的-computed prop只是组件的另一个成员，因此您可以像
这个[“acquiredPrice”]
一样访问它，而且由于
这个
在模板中不可用，您可以使用该方法使用一个小技巧，然后从中返回
这个

整体解决方案：


newvue({
数据（）{
返回{
柜台：10
};
},
计算：{
获取价格：{
得到（）{
把这个寄回柜台；
},
设置（值）{
//只是占位符，因为我们这里没有Vuex
this.counter=值；
日志（“更新计数器”，值）
}
},
步骤（）{
返回[{
允许:对,，
课文：“一些问题？”，
键入：“整数”，
型号：“acquiredPrice”
}, ]
},
},
方法：{
self（）{
还这个
}
}
}).$mount（“#app”）

{{counter}}
{{step.text}
也许你可以使用watcher模式代替
deep:true
。为什么不将v-bind绑定到
acquiredPrice
？也许你可以使用watcher模式代替
deep:true
。为什么不将v-bind绑定到
acquiredPrice
？这正是我需要的！非常感谢你简洁完美的回答。这正是我所需要的！非常感谢你简洁完美的回答。