Блог

На Vue.js 2.x, у меня есть компонент, который извлекает данные с сервера, как показано ниже.

 <template>
...
<a href="..." v-if="data.status !== 'blind'">Link</a>
...
</template>

<script>
export default {
...
data: {
  return() {
    data: {}
  }
};
...
async created() {
  const loadedData = await this.$axios.get(`server-url`);
  this.data = loadedData.data;
}
</script>
  

Итак, это прекрасно работает, если не отображать тег привязки, когда data.status он «слепой», но для его исчезновения требуется немного времени, даже при использовании await .

Есть ли какой-либо способ рендеринга v-if после загрузки данных axios?

Пожалуйста, обратите внимание, у вас ошибка в вашем if состоянии. Это должно быть:

 v-if="data.status !== 'blind'"
  

В любом случае, на мой взгляд, лучший способ обработки вызовов ajax — использовать флаг. Что-то вроде этого:

 <template>
...
<a href="..." v-if="!loading amp;amp; data.status !== 'blind'">Link</a>
...
</template>

<script>
export default {
...
data: {
  return() {
    loading: false,
    data: {}
  }
};
...
async created() {
  this.loading = true;
  const loadedData = await this.$axios.get(`server-url`);
  this.loading = false;
  this.data = loadedData.data;
}
</script>