Компонент Vue - как избежать мутации опоры (компонент Laravel) - PullRequest
Новая
       16

Компонент Vue - как избежать мутации опоры (компонент Laravel)

2 голосов
/ 06 мая 2019

Я получаю следующее предупреждение с моим компонентом Vue для Laravel: 

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

Ответы [ 3 ]

1 голос
/ 06 мая 2019

Ну, это говорит вам, что вы должны избегать использования benutzers, передаваемого в качестве реквизита, потому что его значение может быть перезаписано при вызове вашего компонента. Кроме того, вы сами перезаписываете значение в вашем методе loadData.

Лучший способ избежать проблем с этим значением - хранить его в хранилище вашего компонента ИЛИ с помощью вычисляемого свойства .

Попробуйте использовать 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, чтобы понять, как использовать data в циклах .

0 голосов
/ 06 мая 2019

о, только второй ответ ... спасибо, я тоже проверил это с родителем-ребенком, один момент, пожалуйста, хорошо, это тоже работает. Даже если я не понимаю разницу (пока)

оба ответа работают ... правильный код указан ниже. Раньше столько всего пробовал, тоже дело с данными. Но когда я попробовал это, у меня была ошибка в части шаблона ... иногда Ты находишься так глубоко в лабиринте, что не можешь видеть сквозь стену ... в любом случае, большое спасибо за твою помощь, отвечает Ларисе и Джаред 

<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>
0 голосов
/ 06 мая 2019

Возможно, есть лучшие способы сделать это в зависимости от того, какое поведение вам нужно, но вы можете избежать мутации в подпорке, создав новое поле в 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)
        });
    }
},
...