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

好吧，它告诉您应该避免使用benutzers作为道具传递，因为调用组件时它的值可能会被覆盖。另外，您自己在方法loadData中覆盖了值。

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

尝试改用data：

export default {
  mounted(){
    this.loadData();
  },

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

查看Vue的文档以了解how to use data in loops。

Answer 2

在某些情况下，如果使用

，您仍然会覆盖道具

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

Answer 3

根据您所需的行为，可能会有更好的方法，但是可以通过在data中创建一个监视prop的新字段来避免对道具进行更改。这样一来，父级和子级组件都可以更改子级中的值。

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

Answer 4

哦，仅是第二个答案...谢谢，我也用亲子事物测试了一下，请稍等片刻，确定也可以。即使我还不了解其中的区别

两个答案都起作用...正确的代码如下。之前尝试过很多事情，还有数据事情。但是，当我尝试这样做时，我在模板部分遇到了错误……有时您在迷宫中是如此之深，看不到墙面……无论如何，非常感谢您的帮助，Laryssa和贾里德

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

Vue组件-如何避免更改道具（Laravel组件）

4 个答案: