How to write a v-for on django?

0
votes

I am making a page with django, using Bootstrap Vue and Vuex as a store, and in a part of an html I need to use a v-for to iterate over data on my Vue instance, but none of the ways I tried the v-for gives me a result.

I am working inside a <div id="myVue">, and I added delimiters to be [[]] on the Vue instance, so I can access to the data like [[myData]].

Some ways I have tried to do the v-for are

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

And none of these work. myFun is a computed property that returns the array that I want to iterate over. I know that this property works because I can safely use it outside the v-for by using [[myFun]] and it shows the entire array.

The information of the Vue instance is located on a Vuex store, so the computed properties access to the info like

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

I would like some help to know how to build a v-for that works with Django as I dont know what the problem is.

Edit: Something that does work, but its not useful to me is:

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

As this does show 3 new lines, but theres no way I can show the number of the line the code is accesing.

It seems I can call my computed properties inside the v-for="myProperty", since I have tried

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

Where booleanTest is a computed property that returns a boolean that is true, and this shows that line. But there doesn't seem to be a way to show the elemente I get from a v-for

Big edit: We found the problem. One problem was that Bootstrap Vue was not on its latest Version, thats why I had problemes with 

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

And also, we had another Vue Instance running on the base html, meaning that it interfiered with my instance, and didn't recognize some methods and values. We made it so my instance was moved to a component, so we could have the base instance and this component running on the same time. Now I can run the v-if, v-for, v-whatever on the tags with no problem

2
djangovue.jsvuexv-for
Django templates are rendered on the backend; Vue is on the front end. What exactly are you trying to do? – AKX
Well you typically do not render this in the template then. Then you need to make an AJAX call that fetches the data, or you JSON dump the data in a javascript script in the template. – Willem Van Onsem
I'm sorry, I didn't quite understand what Django was for in the project. Some tags don't seem to work with the v-for, and I found b-list-group to work. For now I just want to get the for correct. – Beefers

2 Answers

0
votes

I think you are confused between two concepts:

Django does things on the server side and Vue on the Client side.

So If you want to render your page with Vue and use the v-for to display your list content you have to ask the content of this list through an API (not always but mainly) that will return you a json (nabm). Then after getting the Json content you'll be able to display the content with Vue.

So this is the documentation on how to call an API with Vue : https://vuejs.org/v2/cookbook/using-axios-to-consume-apis.html

and on the django side you'll have to create a view (that will be called with a url) that will ask the database the content you want, then you convert it in json and return it.

hope it helps

0
votes

use,

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

Make changes on, 

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;

  },
}