我开始了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的新手,所以我完全不知道如何修复它。有人知道如何(请解释为什么)解决这个问题吗?


当前回答

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>

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

其他回答

因为Vue道具是数据流的一种方式,这可以防止子组件意外地改变父组件的状态。

从Vue官方文档中,我们将找到两种方法来解决这个问题

if child component want use props as local data, it is best to define a local data property. props: ['list'], data: function() { return { localList: JSON.parse(this.list); } } The prop is passed in as a raw value that needs to be transformed. In this case, it’s best to define a computed property using the prop’s value: props: ['list'], computed: { localList: function() { return JSON.parse(this.list); }, //eg: if you want to filter this list validList: function() { return this.list.filter(product => product.isValid === true) } //...whatever to transform the list }

如果你想改变道具-使用对象。

<component :model="global.price"></component>

组件:

props: ['model'],
methods: {
  changeValue: function() {
    this.model.value = "new value";
  }
}

答案很简单,您应该通过将值分配给一些局部组件变量(可以是数据属性,用getter、setter或观察者计算)来打破直接的prop突变。

这里有一个使用监视器的简单解决方案。

<template>
  <input
    v-model="input"
    @input="updateInput" 
    @change="updateInput"
  />

</template>

<script>
  export default {
  props: {
    value: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      input: '',
    };
  },
  watch: {
    value: {
      handler(after) {
        this.input = after;
      },
      immediate: true,
    },
  },
  methods: {
    updateInput() {
      this.$emit('input', this.input);
    },
  },
};
</script>

我用它来创建任何数据输入组件,它工作得很好。从父元素发送的任何新数据(v-model(ed))都将被值监视器监视并分配给输入变量,一旦接收到输入,我们就可以捕捉该操作并向父元素发出输入,表明数据是从表单元素输入的。

您需要像这样添加computed方法

component.vue

props: ['list'],
computed: {
    listJson: function(){
        return JSON.parse(this.list);
    }
}

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

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

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

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

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

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

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