Here is the code snippet for a Vue.js component:
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));
},
}
});
When I call the
atualizaBibliografiasUsandoHipotese[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "items"
I have tried several solutions to resolve this warning without success. Can someone assist me in fixing this issue? Thank you