Vue 在数据中使用计算属性答案

【问题标题】：Vue use computed property in dataVue 在数据中使用计算属性
【发布时间】：2021-02-23 16:43:00
【问题描述】：

我的 Vue 数据中有以下 const properties。

 <script>
import { mapGetters, mapActions } from 'vuex'
export default {
data() {
    const properties = ['Property 1', 'Property 2']
    return {
        properties,
        form: propertyNames.map(name => ({ property_type: [] })),
    }

  },

然而，我正在计算计算属性中的属性，如下所示

computed: {
 
     properties() {
            const properties = this.property_form.property_name;
            const filtered = properties.filter(p => p != null)

            return filtered;
        }
},

所以我想在数据中使用计算属性如下：

 <script>
import { mapGetters, mapActions } from 'vuex'
export default {
data() {
    const properties = this.properties
    return {
        properties,
        form: propertyNames.map(name => ({ property_type: [] })),
    }

  },

但是当我这样做时，我得到了错误Property or method "properties" is not defined on the instance。

【问题讨论】：

标签： javascript html vue.js

【解决方案1】：

data() 在计算道具被解析之前被调用，所以你不能从那里引用计算道具。

我假设这个问题与您的other question 有关，其中form 需要在v-model 中使用。由于form 依赖于计算属性，因此您应该在计算属性上使用watcher，从而相应地更新form：

export default {
  data() {
    return {
      form: []
    }
  },
  computed: {
    properties() {/*...*/},
  },
  watch: {
    properties(properties) {
      this.form = properties.map(_ => ({ property_type: [] }))
    }
  }
}

【讨论】：

【解决方案2】：

const properties = ['Property 1', 'Property 2'] 是什么？

很确定您不能将其嵌套在data 中。将其移动到上层范围，或者直接定义它

data() {
  return {
    properties: ['Property 1', 'Property 2']
  }
}

此外，您在这里想要实现的目标还不是很清楚。很多东西都混在一起了。你真的不应该在 data 中制作地图，因为它在这里用于原始数据（正如它所称的那样）。

这是computed properties 上的官方文档，也许可以再读一遍，或者通过更好地解释这里发生的事情来更新您的问题。

【讨论】：