javascript - 在 vuejs 2 中将道具转换为数据属性

Question

我有一个简单的组件，由

<House :_people="[{'name': 'Kevin'}, {'name':'Bert'}, {'name': 'Timmy'}]"></House>

组件看起来像

<template>
<div class="house">
    <ul>
        <li v-for="person in people">
            {{ person.name }}
        </li>
    </ul>
    <a href="#add" @click="addMark">Add Mark</a>
</div>
</template>

<script>
export default {
    props: ['_people'],
    data: function(){
        return {
            people: this._people
        }
    },
    methods: {
        addMark: function(){
            this.people.push({
                name: 'Mark'
            });
        }
    },
}

问题是我必须将 json 有效负载传递给初始组件，但这会将有效负载设置为道具，而不是数据属性。当我尝试操纵道具时，它永远不会更新。所以我将 _people 属性映射到 people 属性。

这是一个好主意吗？我在这里错过了什么明显的东西吗？

Answer 1

传递一个对象作为道具：

people = {
  list: [{'name': 'Kevin'}, {'name':'Bert'}, {'name': 'Timmy'}]
}

<House :_people="people"></House>

接着

props: ['_people'],
methods: {
  addMark() {
    this._people.list.push({
      name: 'Mark'
    })
  }
}

Answer 2

您可以使用计算属性：

export default {
    props: ['_people'],
    data() {
       return {
            added: false
       }
    },
    computed: {
        people() {
            var _arr = this._people.slice();

            return this.added ? _arr : _arr.push({ name: 'Mark' });
        }
    },
    methods: {
        addMark: function(){
            this.added = true
        }
    },
}