javascript VueJS等待所有API查询返回

vjrehmav 于 2023-08-02 发布在 Java

关注(0)|答案(3)|浏览(113)

早上好
我有一个用Django Rest Framework编写的API。前端是用VueJS编写的。我有一个窗体视图，它是“添加新项”或“修改”。基本上，表单是相同的代码，但检查路径是否包含ID（因此是一个修改）。
要修改条目，需要对下拉/选择菜单中的所有不同选项进行一系列API调用。这些是模型上的一对一外键（即演员具有类别）和作为模型上的多对多键的一对（即，有一个或多个动机）。
我现在最大的问题是，这些选项中的每一个（总共有14个）都有一个API调用。在我看来，选项正在返回，然后在没有完成所有API调用的情况下呈现。在过去，我只是使用一个布尔值表示“loading”来执行v-if语句。
有了这么多，我有一个布尔值列表，并嵌入到v-if中：

<b-container v-if="load_list.every((x) => x)">

data () {
    return {
           load_list: [true, true, true, true, true, true, true, true, true],

字符串
然后我尝试计算一个值：

<b-container v-if="listLoaded">

computed: {
    listLoaded: function() {
      return this.load_list.every((x) => x)
    }

型
所有的值都在API调用的返回值上进行了调整，列表变成了全假，但是容器没有改变。
从Vue创建的API调用示例，它调用一个函数，该函数使用axios调用DRF端点（数据返回良好）：

created: function() {
      API.getActor(this.id)
        .then(a => {
          this.getActor(a)
        })
        .catch(error=> console.log(error))
        .finally(() => {
          this.load_list[0] = false
        })

型
我怎样才能确保我的所有API在视图渲染之前返回？我相信有更好的方法来做到这一点（除了它不起作用...），但我没有掌握它在我的研究。
谢谢你的帮助。
BCBB

JavaScript

来源：https://stackoverflow.com/questions/76780041/vuejs-wait-for-all-api-queries-to-come-back

3条答案

按热度按时间

vm0i2vca1#

const vm = new Vue({
  el: "#root",
  data() {
    return {
      list1: [false, true],
      list2: {
        0: false,
        1: true
      }
    }
  },
  computed: {
    load1() {
      return this.list1.every(it => it);
    },
    load2() {
      return Object.values(this.list2).every(it => it);
    }
  },
  methods: {
    handler1() {
      Vue.set(this.list1, 0, true);
    },
    handler2() {
      this.list2[0] = true;
    }
  }
});

个字符
由于JavaScript的限制，Vue无法检测数组和对象的某些类型的更改。这些在React性章节中讨论。
请参阅

赞(0）回复(0）举报 2023-08-02

jyztefdp2#

如何使用usd componentkey

<b-container v-if="load_list.every((x) => x)" :key="componentKey">

 function() {
      API.getActor(this.id)
        .then(a => {
          this.getActor(a)
          this.componentKey++
        })
        .catch(error=> console.log(error))
        .finally(() => {
          this.load_list[0] = false

        })

字符串

赞(0）回复(0）举报 2023-08-02

cngwdvgl3#

您应该使用watcher而不是使用computed属性，它将完全适合您的场景：
Watcher官方文档
在这种情况下，您可以查看load_list数据属性。当load_list中发生任何更改时，该监视器将运行。在监视器中，通过比较您的值组合，您可以设置您的listLoaded（您应该需要在data()中声明）

场景的观察者代码示例

watch:{
   //whenever load_list changes, this function will run

   load_list:{
    handler(newList, oldList) {
      let isLoaded= newList.every((x) => x)

      if(isLoaded){
        //code here 
      },
    }
   }
 },

字符串
我希望这对你有帮助。

赞(0）回复(0）举报 2023-08-02

我来回答

javascript VueJS等待所有API查询返回

3条答案

场景的观察者代码示例

相关问题

热门标签

最新问答