VueJS - 计算属性没有设置器（但实际上有）答案

【问题标题】：VueJS - Computed property has no setter (but actually has)VueJS - 计算属性没有设置器（但实际上有）
【发布时间】：2020-03-27 03:48:57
【问题描述】：

我有一个名为 Wrapper 的组件，它包装了另一个第三方组件。它看起来像这样：

<template>
  <custom-element
    v-model="computedProperty"
  >
  </custom-element>
</template>

<script>
export default {
  props: {
    modelName: String
  },
  computed: {
    computedProperty() {
      return this[this.modelName]
    },
    foo: {
      get() {
        // getter logic
      },
      set(value) {
        // setter logic
      }
    }
  }
}
</script>

当将此元素与代码 <wrapper modelName="foo" /> 一起使用时，我收到此 vue 警告 Computed property "computedProperty" was assigned to but it has no setter. computedProperty 没有设置器是正确的，但是当使用将 modelName 设置为 foo 的组件时，它实际上应该采用foo 属性的设置器。这不可能吗？

【问题讨论】：

不要试图通过引用其他事物来让它像你一样工作，而是尝试重构你的逻辑。在这种情况下，您可能不需要v-model（它应该与data() 中定义的变量一起使用，或者直接与getter / 设置计算属性一起使用），而是想使用绑定到@input 的方法。我建议您不要为了自己的理智而目前尝试做的事情，以及其他人试图了解您以后代码中发生的事情的理智。
是的，问题是第三方组件有一些错误。使用 :value 和 @input 时，组件无法正常工作，但前提是提供了 v-model。
我建议查看他们的源代码，看看他们是否可能使用了自定义事件：vuejs.org/v2/guide/…，也许可以尝试使用这些事件。如果这不可能，下一个最佳选择可能是对 v-model 使用虚拟变量（只是在 data() 中定义的常规变量），然后使用观察者：it.vuejs.org/v2/guide/computed.html#Watchers 观察它的值并触发方式。
你是对的。对于第三方组件，我必须使用 :model 和 @change。
干杯！很高兴这有效！

标签： vue.js

【解决方案1】：

不要试图通过使用对其他事物的引用来让它像你一样工作，而是尝试重构你的逻辑。也许您在这个实例中不需要 v-model（它应该与 data() 中定义的变量一起使用，或者直接与 getter / 设置计算属性一起使用），而是想使用绑定到 @input 的方法。

对于使用自定义事件和值绑定到 v-model 的组件： https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model

用于查看数据并对模型更改做出反应： https://it.vuejs.org/v2/guide/computed.html#Watchers

【讨论】：