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

我有一个简单的组件，由

<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'
            });
        }
    },
}

{{person.name}


导出默认值{
道具：[“人”]，
数据：函数（）{
返回{
人民：这是
}
},
方法：{
addMark:function（）{
这个，人，推({
姓名：“马克”
});
}
},
}

问题是我必须将json有效负载传递给初始组件，但这会将有效负载设置为道具，而不是数据属性。如果我试图操纵道具，它永远不会更新。因此，我将_peopleprop映射到people属性

---

这是个好主意吗？我是否遗漏了一些显而易见的东西？

将一个对象作为道具传递：

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

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

---

将对象作为道具传递：

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

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

---

您可以使用计算属性：

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
        }
    },
}

---

您可以使用计算属性：

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
        }
    },
}