我开始了https://laracasts.com/series/learning-vue-step-by-step系列。我在Vue、Laravel和AJAX的课程上停了下来,出现了这个错误:

Vue .js:2574 [Vue警告]:避免直接改变道具,因为每当父组件重新呈现时,该值将被覆盖。相反,应该使用基于道具值的数据或计算属性。道具被突变:"list"(在组件中找到)

我在main.js中有这段代码

Vue.component('task', {
    template: '#task-template',
    props: ['list'],
    created() {
        this.list = JSON.parse(this.list);
    }
});
new Vue({
    el: '.container'
})

我知道,当我覆盖列表道具时,问题是在created(),但我是Vue的新手,所以我完全不知道如何修复它。有人知道如何(请解释为什么)解决这个问题吗?


当前回答

我想给出这个答案,这有助于避免使用大量的代码,观察者和计算属性。在某些情况下,这可能是一个很好的解决方案:

道具是用来提供单向交流的。

当你有一个带有道具的模态显示/隐藏按钮时,对我来说最好的解决方案是发出一个事件:

<button @click="$emit('close')">Close Modal</button>

然后添加监听器到模态元素:

<modal :show="show" @close="show = false"></modal>

(在这种情况下,道具显示可能是不必要的,因为你可以直接在基本模式上使用简单的v-if="show")

其他回答

我个人总是建议,如果你需要改变道具,首先将它们传递给计算属性,然后从那里返回,然后就可以很容易地改变道具,即使在那你也可以跟踪道具的突变,如果它们是从另一个组件中突变的,或者我们也可以观察。

根据VueJs 2.0,您不应该改变组件内部的道具。它们只会被父母变异。因此,您应该在数据中定义不同名称的变量,并通过观察实际的道具来更新它们。 如果列表道具被父元素更改,您可以解析它并将其分配给mutableList。这里有一个完整的解决方案。

Vue.component('task', {
    template: ´<ul>
                  <li v-for="item in mutableList">
                      {{item.name}}
                  </li>
              </ul>´,
    props: ['list'],
    data: function () {
        return {
            mutableList = JSON.parse(this.list);
        }
    },
    watch:{
        list: function(){
            this.mutableList = JSON.parse(this.list);
        }
    }
});

它使用mutableelist来呈现模板,这样就可以在组件中保证列表道具的安全。

您应该始终避免在vue或任何其他框架中改变道具。您可以采用的方法是将其复制到另一个变量中。

为例。 //而不是替换this的值。List使用不同的变量

这一点。new_data_variable = JSON.parse(this.list)

一个潜在的解决方案是使用全局变量。

import { Vue } from "nuxt-property-decorator";

export const globalStore = new Vue({
  data: {
    list: [],
  },
}

export function setupGlobalsStore() {
  Vue.prototype.$globals = globalStore;
}

然后你可以用:

$globals.list

任何你需要变异或呈现它的地方。

Vue.js的道具不能被改变,因为这被认为是Vue中的反模式。

您需要采取的方法是在组件上创建一个引用list的原始prop属性的data属性

props: ['list'],
data: () {
  return {
    parsedList: JSON.parse(this.list)
  }
}

现在传递给组件的列表结构通过组件的data属性被引用和改变:-)

如果您希望做的不仅仅是解析列表属性,那么请使用Vue组件的computed属性。 这允许你对你的道具做出更深入的变化。

props: ['list'],
computed: {
  filteredJSONList: () => {
    let parsedList = JSON.parse(this.list)
    let filteredList = parsedList.filter(listItem => listItem.active)
    console.log(filteredList)
    return filteredList
  }
}

上面的示例将解析您的列表道具,并将其过滤为仅活跃的list-tems,将其记录为schnitts和giggles并返回它。

注意:数据和计算属性在模板中引用相同

<pre>{{parsedList}}</pre>

<pre>{{filteredJSONList}}</pre>

很容易认为计算属性(作为一个方法)需要被调用…它不