Vue.js：从方法中改变组件道具的正确方法

Question

我有一个Vue.js组件下面的代码：

var list = Vue.component('list', { 
    props: ['items', 'headertext', 'placeholder'], 
    template: ` 
    <div class="col s6"> 
     <div class="search"> 
     <searchbox v-bind:placeholder=placeholder></searchbox> 

     <ul class="collection with-header search-results"> 
      <li class="collection-header"><p>{{ headertext }}</p></li> 
      <collection-item 
      v-for="item in items" 
      v-bind:texto="item.nome" 
      v-bind:link="item.link" 
      v-bind:key="item.id" 
      > 
      </collection-item> 
     </ul> 
     </div> 
    </div>`, 

    methods: { 
    atualizaBibliografiasUsandoHipotese: function (value) { 
     var query = gql`query { 
     allHipotese(nome: "${value}") { 
      id 
      nome 
      bibliografiasDestaque { 
      id 
      nome 
      link 
      descricao 
      } 
     } 
     }`; 
     client.query({ query }).then(function(results) { 
     this.items = results['data']['allHipotese'][0]['bibliografiasDestaque']; 
     }.bind(this)); 
    }, 
    } 

}); 

和组件之外，在另一个javascript文件，我称之为atualizaBibliografiasUsandoHipotese方法来查询后端（GraphQL），并更新组件。这工作得很好，但是我得到一个警告消息，Vue公司说

[Vue公司提醒]：避免直接变异的一个道具，因为值将是 覆盖每当父组件重新呈现。相反，根据道具的价值使用 数据或计算属性。支柱 突变：“物品”

我做了几次尝试来解决这个警告，但他们都没有工作。任何人都可以帮我解决这个警告？由于

Answer 1

如前所述，你不应该发生变异的道具，而是你可以这样做：

var list = Vue.component('list', { 
    props: ['items', 'headertext', 'placeholder'], 
    template: ` 
     <div class="col s6"> 
     <div class="search"> 
      <searchbox v-bind:placeholder=placeholder></searchbox> 
      <ul class="collection with-header search-results"> 
      <li class="collection-header"><p>{{ headertext }}</p></li> 
      <collection-item 
       v-for="item in myItems" 
       v-bind:texto="item.nome" 
       v-bind:link="item.link" 
       v-bind:key="item.id" 
      > 
      </collection-item> 
      </ul> 
     </div> 
     </div>`, 

    data:()=> { return { 
      myItems: this.items 
     } 
    }, 

    methods: { 
     atualizaBibliografiasUsandoHipotese: function (value) { 
      // Your Code 
      this.myItems = results['data']['allHipotese'][0]['bibliografiasDestaque']; 
     }.bind(this)); 
    }, 
}); 

注意v-for现在在myItems遍历item秒。

Answer 2

这是你在找什么：

https://vuejs.org/v2/guide/components.html#One-Way-Data-Flow

甚至说：

这意味着你不应该试图变异孩子 组件内的道具。如果你这样做，Vue会在控制台中发出警告。