javascript - Vue 组件 - 如何避免改变 prop(Laravel 组件)

Question

我的 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>

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

<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>

Answer 1

在某些情况下，如果您使用

，您仍然会覆盖您的 props

<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)
        });
    }
},