Vue 组件 - 如何避免改变一个 prop（Laravel 组件）

Posted 2023-02-23

【中文标题】Vue 组件 - 如何避免改变一个 prop（Laravel 组件）

【英文标题】：Vue component - how to avoid mutating a prop (Laravel component)

【发布时间】：2019-09-24 10:02:45

【问题描述】：

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

【参考方案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)
        );
    
,

【参考方案2】：

哦，只是第二个答案...谢谢，我也用亲子事物对此进行了测试，请稍等片刻，好的，也可以。即使我不明白其中的区别（还）

两个答案都有效...正确的代码如下。之前试过很多东西，还有数据的东西。但是当我尝试这样做时，我在模板部分出现了错误......有时你在迷宫中如此之深，你看不到墙......无论如何，非常感谢你的帮助回答 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>

【参考方案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)
        );
    
,

【参考方案4】：

好吧，这告诉你应该避免使用 benutzers 作为 prop 传递，因为它的值可能会在调用组件时被覆盖。此外，您正在自己的方法 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。

【讨论】：

必须在数据部分添加return子句:-)