Передача данных в реквизит после асинхронного вызова в Vue - PullRequest
Новая
       44

Передача данных в реквизит после асинхронного вызова в Vue

0 голосов
/ 04 апреля 2019

Я создал проект «голые кости», чтобы показать проблему.Единственное, что я добавил, был пакет axios.Проблема в том, что когда я пытаюсь установить свойство дочернего компонента после асинхронного вызова, я не могу прочитать это свойство в компоненте.Если вы посмотрите на код, то увидите, что я несколько раз консольный журнал, чтобы показать, когда я могу получить данные и когда я не могу.Пожалуйста, помогите мне выяснить, что мне здесь не хватает.

Родитель 

<template>
  <div id="app">
    <HelloWorld :test_prop="testData" :test_prop2="testData2" :test_prop3="testData3" test_prop4="I work also"/>
    <div>{{testData5}}</div>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import axios from 'axios';
export default {
  name: 'app',
  components: {
    HelloWorld
  },
  data() {
    return {
      testData: '',
      testData2: 'I work just fine',
      testData3: '',
      testData5: ''
    }
  },
  created: function(){
    var self = this;
    this.testDate3 = 'I dont work';
    axios.get('https://jsonplaceholder.typicode.com/posts/42').then(function(response){
      //I need this one to work
      self.testData = 'I dont work either';

      self.testData5 = 'I work also';
    });
  }
}
</script>

Ребенок 

<template>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: ['test_prop', 'test_prop2', 'test_prop3', 'test_prop4'],
  data() {
    return {
      comp_data: this.test_prop,
      comp_data2: this.test_prop2,
      comp_data3: this.test_prop3,
      comp_data4: this.test_prop4
    }
  },
  created: function(){
    console.log(this.test_prop);
    console.log(this.test_prop2);
    console.log(this.test_prop3);
    console.log(this.test_prop4);
  }
}
</script>

Ответы [ 2 ]

1 голос
/ 04 апреля 2019

Ваш console.log внутри созданного хука покажет вам начальное состояние этих переменных в родительском компоненте. Это связано с тем, что созданный Parent хук и Child хук будут работать одновременно.

Итак, когда вы выполняете свое обещание, дочерний компонент уже создан. Чтобы понять это поведение, поместите ваши реквизиты в шаблон, используя {{ this.test_prop }}.

Чтобы решить эту проблему, в зависимости от того, что вы хотите, вы можете либо определить какое-либо значение по умолчанию для вашего реквизита ( см. ), либо отобразить ваш дочерний компонент с помощью v-if условие . Вот и все, надеюсь, это поможет!

0 голосов
/ 04 апреля 2019

На Vue создан хук только начальных значений свойств, передаваемых из основного компонента. Поэтому последующие обновления (как ваш пример «после вызова ajax») в главном компоненте не будут влиять на переменные данных дочернего компонента из-за того, что уже созданный дочерний элемент имеет место.
Если вы хотите обновить данные позже одним из способов, вы можете сделать это следующим образом: 

 watch: {
    test_prop: function(newOne){
      this.comp_data = newOne;
    }
 }

Добавление watcher к изменениям свойств обновит последнее значение свойства основного компонента.

А также отредактируйте опечатку this.testDate3. Я думаю, это должно быть this.testData3

...