[Vuejs]-How to write a v-for on django?

0👍

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://v2.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👍

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;

  },
}

Leave a comment