in vuejs 2

Question

Ich habe eine einfache Komponente, die durch

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

gemacht wird und die Komponente sieht aus wie

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

das Problem ist, dass ich müssen eine Json-Payload an die anfängliche Komponente übergeben, aber dies setzt die Payload als Prop und nicht als Datenattribut. Wenn ich versuche, die Requisite zu manipulieren, wird sie nie aktualisiert. Also habe ich dem Property "People" die Property "People" zugeordnet.

Ist das eine gute Idee? Fehle ich etwas, das hier offensichtlich ist?

Answer 1

passieren ein Objekt als Stütze:

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

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

und dann

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

Answer 2

können Sie berechnete Eigenschaft:

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