Question

我正在使用v-for遍历computed属性，该计算出的属性取决于data属性，该属性以null开头。我将其加载到beforeMount中。

这是伪代码：

<th v-for="item in computed_list">
{{ item.name }}
</th>

<script>
export default {
  name: 'test',
  data () {
    return {
      whole_list: null
    }
  },
  beforeMount () {
    this.load()
  },

  computed: {
    computed_list: function() {
      if (!this.series) return []
      return this.whole_list.slice(1,3)
    }
  },

  methods: {
    async load () {
      let res = await some_api_call()
      this.whole_list = res['data']
    }
  }


}
</script>

但是由于某种原因，它无法呈现列表并报告TypeError: Cannot read property 'name' of null。

我是Vue的新手，对Vue的生命周期不太熟悉。基本思想是呈现数据列表，但是在创建Vue实例后以某种方式加载这些数据。不知道这是否是正确的方法。

Answer 1

将数据项初始化为null会中断VueJS状态监视功能，因此它将不知道对其进行的更改。而是将其初始化为空对象或数组。

https://012.vuejs.org/guide/best-practices.html

原因是Vue通过递归遍历数据对象并将现有属性使用Object.defineProperty转换为反应性getter和setter来观察数据更改。如果创建实例时不存在属性，则Vue将无法对其进行跟踪。

尽管您不必在数据中设置每个嵌套属性。可以将字段初始化为空对象，然后再将其设置为具有嵌套结构的新对象，因为Vue将能够遍历此新对象的嵌套属性并观察它们。

Vue在加载后使用v-for渲染计算的属性

1 个答案: