时间戳

首页 > 解决方案 > Vue.js中数据变化时如何去除过渡效果？

javascript - Vue.js中数据变化时如何去除过渡效果？

问题描述

在 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-ifaxios数据加载后有什么方法可以渲染吗？

标签： javascriptvue.jsvuejs2async-await

解决方案

请注意，您的if状况有误。它应该是：

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

无论如何，在我看来，处理 ajax 调用的最佳方式是使用标志。像这样的东西：

<template>
...
<a href="..." v-if="!loading && 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>

推荐阅读