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

问题描述：

我有一个Vue.js组件下面的代码：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公司提醒]：避免直接变异的一个道具，因为值将是覆盖每当父组件重新呈现。相反，根据道具的价值使用数据或计算属性。支柱突变：“物品”

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

由于无论如何您都在修改从父组件传递的道具，您应该修改作为道具传递给子组件的父级数据（因此，您不会改变继承的道具，作为道具传递的现有父数据）。从另一个角度思考它：继承的道具来自一个来自父母的“真相源”。所以更新父项很有意义。 – Terry

[Vue.js改变道具]可能的重复（https://stackoverflow.com/questions/40780730/vue-js-changing-props） –

答

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

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秒。

它的工作！最后，我的问题是'v-for'：当我在你的代码片段中演示的时候，我应该使用myItems中的'v-for =“项目时，我正在使用项目中的'v-for =”项目。谢啦！ –

@ Vini.g.fer我应该强调'v-for'应该循环'myItems' – Grigio

答

这是你在找什么：

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

甚至说：

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

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

相关推荐