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警告]：避免直接改变道具，因为该值将是父组件重新渲染时会覆盖。相反，使用基于prop值的数据或计算属性。支持存在变异：＆＃34;项目＆＃34;

我多次尝试修复此警告，但没有一个能够正常工作。任何人都可以帮助我如何修复此警告？感谢

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现在正在item中循环myItems。

Answer 2

这就是你要找的东西：

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

它甚至说：

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

Vue.js：从方法

2 个答案: