Question

我有一个名称为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" />一起使用时，会收到此警告提示Computed property "computedProperty" was assigned to but it has no setter.是正确的，computedProperty没有设置方法，但是在将modelName设置为foo实际上应该使用foo属性的设置方法。这不可能吗？

Answer 1

与其尝试使用对其他事物的引用来使它像您一样工作，请尝试重构您的逻辑。也许您在这种情况下不需要v模型（应该与data（）中定义的变量一起使用，或者直接与getter /设置计算属性一起使用），而是想使用绑定到@input的方法。

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

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

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

1 个答案: