Question

我正在使用Bootstrap Vue和Vuex作为商店使用django创建页面，并且在html的一部分中，我需要使用v-for来遍历Vue实例上的数据，但是我没有一种方式尝试了v-for给我结果。

我正在<div id="myVue">内部工作，并且在Vue实例上添加了定界符[[]]，因此我可以访问[[myData]]之类的数据。

我尝试进行v-for的某些方法是

<b-list-group v-for="itemName in myFun">
   [[itemName]]
   {{itemName}}
   itemName
</b-list-group>

这些都不起作用。 myFun是一个计算属性，它返回我要迭代的数组。我知道此属性有效，是因为我可以使用[[myFun]]在v-for之外安全地使用它，并且它可以显示整个数组。

Vue实例的信息位于Vuex存储中，因此计算出的属性可访问信息，例如

computed: {
  tests(){
     return this.$store.state.test;
  },
}

我想获得一些帮助，以了解如何构建适用于Django的v-for，因为我不知道问题是什么。

编辑：确实有效，但对我无用的是：

<b-list-group v-for="n in 3">
   SomeString
</b-list-group>

因为它确实显示了3条新行，但是我无法显示代码要访问的行号。

似乎我可以在v-for =“ myProperty”中调用自己的计算属性，因为我已经尝试过

<b-list-group v-if="[[booleanTest]]">
   SomeString
</b-list-group>

其中booleanTest是计算所得的属性，返回的布尔值为true，并显示该行。但是似乎没有办法显示我从v-for

获得的元素

大编辑：我们发现了问题。一个问题是Bootstrap Vue不在其最新版本上，这就是为什么我在

上遇到问题

v-for="n in 3"
[[n]]

而且，我们在基础html上运行了另一个Vue实例，这意味着它与我的实例相互干扰，并且无法识别某些方法和值。我们做到了，因此我的实例被移至一个组件，因此我们可以让基本实例和该组件同时运行。现在，我可以毫无问题地在标签上运行v-if，v-for，v-what

Answer 1

我认为您对两个概念感到困惑：

Django在服务器端完成工作，在Vue在客户端完成工作。

因此，如果您想使用Vue呈现页面并使用v-for显示列表内容，则必须通过API（并非总是但主要是）询问此列表的内容，该API会返回一个json（nabm））。然后，在获得Json内容之后，您将能够使用Vue显示内容。

这是有关如何使用Vue调用API的文档：https://vuejs.org/v2/cookbook/using-axios-to-consume-apis.html

在django端，您将必须创建一个视图（将使用url调用），该视图将询问数据库所需的内容，然后将其转换为json并返回。 / p>

希望有帮助

Answer 2

使用

<b-list-group v-for="(itemName, index) in myFun" :key="index">

进行更改

data() {
      return {
          myFun: [],
      }
    },

 created(){
        eventService.test.getTest() // Call your api here.
        .then(res => {
            if(res.status == 200){
                var count =0;
                var index;
                if(count<2){

                    for(index in res.data){ 
//assume myFun.test is props for your data.
                        if(res.data[index].test.count>0){
                            this.myFun.push(res.data[index])
                            count++;
                        }        
                    }
                }
                console.log(myFun[0])
            }
            else{
                // console.log(this.myFun)
            }
        })
        .catch(error => {
        })
    },

computed: {
  tests(){
     return this.$store.state.test;

  },
}

如何在Django上编写v-for？

2 个答案: