Javascript Vue组件-如何避免变异道具（Laravel组件）

我的Laravel Vue组件收到以下警告：

[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: "benutzers"

found in

---> <BootstrapVueBTable1> at resources/js/components/b-table1.vue
       <Root>

[Vue warn]：避免直接变异道具，因为每当
父组件将重新渲染。相反，使用基于
道具的价值。道具变异：“贝努泽”
发现于
--->位于resources/js/components/b-table1.vue

我尝试过重命名的一些变体，但我没有经验

<template>
  <div> <b-table striped hover :items="benutzers" > </b-table> 
  </div>
</template>

<script>
  export default {
    mounted() {
      this.loadData();
    },
    methods: {
      loadData:function() {
        axios.get('/api/benutzers').then(res => {
          if(res.status == 200) {
            this.benutzers = res.data;
          }
        }).catch(err => {
           console.log(err)
        });
      }
    },
    props: ['benutzers'],
  }
</script>

导出默认值{
安装的（）{
这是loadData（）；
},
方法：{
loadData:function（）{
get（'/api/benutzers'）。然后（res=>{
如果（res.status==200）{
this.benutzers=res.data；
}
}).catch（错误=>{
console.log（错误）
});
}
},
道具：['benutzers']，
}

好的，它告诉您应该避免使用作为道具传递的

benutzers

，因为调用组件时它的值可能会被覆盖。此外，您正在自己在方法

loadData

中覆盖该值

避免此值出现问题的最佳方法是将其存储在组件的存储区内或使用

尝试使用

数据

：

导出默认值{
安装的（）{
这是loadData（）；
},
数据：{
贝努泽斯：[]，
},
方法：{
loadData:function（）{
get（'/api/benutzers'）。然后（res=>{
如果（res.status==200）{
this.benutzers=res.data；
//我不确定是这个。贝努兹还是仅仅是贝努兹，但这应该能解决你的问题
}
}).catch（错误=>{
console.log（错误）
});
}
},
}

---

查看Vue的文档以了解情况。

根据您需要的行为，可能有更好的方法来实现这一点，但您可以通过在

数据中创建一个新字段来观察
道具的变异，从而避免道具的变异。这将允许父组件和子组件更改子组件中的值

props: ['parentBenutzers'],
data() {
  return {
    benutzers: this.parentBenutzers,
  }
},
watch: {
  parentBenutzers: function(val) {
    this.benutzers = val;
  }
},
mounted(){
    this.loadData();
},
methods:{
    loadData:function(){
        axios.get('/api/benutzers').then(res=>{
          if(res.status==200){
             this.benutzers=res.data;
          }
        }).catch(err=>{
           console.log(err)
        });
    }
},

哦，只是第二个答案。。。谢谢，我也用父母和孩子的事情来测试这个，请稍等，好的，那也行。即使我还不明白其中的区别

两个答案都有效。。。下面是正确的代码。以前试过这么多东西，还有数据方面的东西。但是当我尝试这样做时，我在模板部分出现了错误。。。有时你在迷宫里太深了，隔着墙看不见。。。无论如何，非常感谢你的帮助回答拉里萨和杰瑞德的问题

<template>
    <div> <b-table striped hover :items="benutzers" > </b-table> 
    </div>
</template>
<script>
    export default {
  mounted(){
    this.loadData();
  },

  data() {
      return{
    benutzers: [],
  }
  },
  methods: {
    loadData: function() {
      axios.get('/api/benutzers').then(res=>{
        if(res.status==200){
          this.benutzers = res.data; 
          //i'm not sure if it's this.benutzers or just benutzers, but this should solve your problem
        }
      }).catch( err => {
        console.log(err)
      });
    }
  },
}
</script>


导出默认值{
安装的（）{
这是loadData（）；
},
数据（）{
返回{
贝努泽斯：[]，
}
},
方法：{
loadData:function（）{
get（'/api/benutzers'）。然后（res=>{
如果（res.status==200）{
this.benutzers=res.data；
//我不确定是这个。贝努兹还是仅仅是贝努兹，但这应该能解决你的问题
}
}).catch（错误=>{
console.log（错误）
});
}
},
}
在某些情况下，如果您使用

<div v-for="benutzer in  parentbenutzers">



所以你需要把你的v-for换成这个

<div v-for="benutzer in  benutzers">

      props: ['parentBenutzers'],
data() {
  return {
    benutzers: this.parentBenutzers,
  }
},
mounted(){
    this.loadData();
},
methods:{
    loadData:function(){
        axios.get('/api/benutzers').then(res=>{
          if(res.status==200){
             this.benutzers=res.data;
          }
        }).catch(err=>{
           console.log(err)
        });
    }
},


道具：['parentBenutzers']，
数据（）{
返回{
贝努泽斯：这是贝努泽斯的父母，
}
},
安装的（）{
这是loadData（）；
},
方法：{
loadData:function（）{
get（'/api/benutzers'）。然后（res=>{
如果（res.status==200）{
这个.benutzers=res.data；
}
}).catch（错误=>{
console.log（错误）
});
}
},
必须在数据部分添加return子句：-）