Vue. js asyn c компонент не обновляет шаблон - PullRequest
Новая
       18

Vue. js asyn c компонент не обновляет шаблон

0 голосов
/ 04 мая 2020

У меня есть компонент Vue, в котором я выполняю несколько асин c вызовов, которые затем должны заполнить мой шаблон. Тем не менее, кажется, что ничего не обновляется, хотя я вижу в консоли, что мои данные возвращаются. Я довольно новичок в Vue, поэтому я, должно быть, что-то упустил. Вот упрощенная версия моего кода: 

<template>
  <div id="my_component">
        <div v-bind:class="{ hidden: !isLoading }">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin:auto;background:#fff;display:block;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
        <circle cx="50" cy="50" fill="none" stroke="#1ba4de" stroke-width="4" r="15" stroke-dasharray="70.68583470577033 25.561944901923447">
          <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="0.9803921568627451s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform>
        </circle>
      </svg>
    </div>

    <div v-bind:class="{ hidden: isLoading }">
      <h1>{{ result.title }}</h1>
    </div>
  </div>
</template>


<script>
export default {
  name: 'MyComponent',
  data () {
    return {
      isLoading: true,
      result: null
    }
  },
  async created () {
    this.result = await myLongRunningAsyncFunction();
    this.isLoading = true;
    console.log(this.result) // Logs result of myLongRunningAsyncFunction()
  }
  methods: {
    myLongRunningAsyncFunction: async function() {
     // Make a bunch of API calls and get some data
    }
  }
}
</script>

1 Ответ

0 голосов
/ 04 мая 2020

Вместо переключения класса вы можете использовать v-if, чтобы скрыть / показать элементы. Я не уверен, как выглядит ваш hide класс, но, думаю, что-то вроде display: none ведьма менее эффективна. 

<div v-if="!isLoading">
    <h1>{{ result.title }}</h1>
</div>

Вам также нужно установить isLoading в false

async created () {
    this.result = await myLongRunningAsyncFunction();
    this.isLoading = false;
    console.log(this.result) // Logs result of myLongRunningAsyncFunction()
}

Также в вашем первом div это будет выглядеть намного лучше: 

 <div v-bind:class="{ hidden: !isLoading }">

по этому: 

 <div v-if="isLoading">
...