Как написать v-for на django? - PullRequest
Новая
       61

Как написать v-for на django?

0 голосов
/ 05 июня 2019

Я делаю страницу с помощью django, используя Bootstrap Vue и Vuex в качестве хранилища, и в части 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 - это вычисляемое свойство, которое возвращает массив, который я хочу перебрать.Я знаю, что это свойство работает, потому что я могу безопасно использовать его вне v-for, используя [[myFun]], и оно показывает весь массив.

Информация об экземпляре Vue находится в хранилище Vuex, поэтомудоступ к информации для вычисляемых свойств, такой как 

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

Я хотел бы получить некоторую помощь, чтобы узнать, как создать v-for, который работает с Django, поскольку я не знаю, в чем проблема.

ПравитьЧто-то, что работает, но для меня бесполезно: 

<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 - это вычисляемое свойство, которое возвращает логическое значение, которое является истинным, иэто показывает эту линию.Но, кажется, нет способа показать элемент, который я получил от v-for

Большое редактирование: Мы нашли проблему.Одной из проблем было то, что Bootstrap Vue не была в его последней версии, поэтому у меня были проблемы с 

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

А также, у нас был другой экземпляр Vue, работающий на базовом html, то есть он взаимодействовал с моим экземпляром,и не узнал некоторые методы и ценности.Мы сделали так, чтобы мой экземпляр был перемещен в компонент, чтобы мы могли одновременно запустить базовый экземпляр и этот компонент.Теперь я могу без проблем запустить v-if, v-for, v-что угодно по тегам

Ответы [ 2 ]

0 голосов
/ 06 июня 2019

использование 

<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;

  },
}
0 голосов
/ 05 июня 2019

Я думаю, что вы путаетесь между двумя понятиями:

Django делает что-то на стороне сервера и Vue на стороне клиента.

Так что если вы хотите визуализировать свою страницу с помощью Vue и использоватьv-для отображения содержимого списка вы должны запросить содержимое этого списка через API (не всегда, но в основном), который вернет вам json (nabm).Затем после получения контента Json вы сможете отображать контент с помощью Vue.

Итак, это документация о том, как вызывать API с помощью Vue: https://vuejs.org/v2/cookbook/using-axios-to-consume-apis.html

и оНа стороне django вам нужно будет создать представление (которое будет вызываться с помощью URL), которое будет запрашивать у базы данных требуемое содержимое, затем вы преобразуете его в json и возвращаете его.

надеюсь, это поможет

...