Блог

Главная - Вопросы по программированию - Запустить функцию внутри двух циклов v-for в vue js

Запустить функцию внутри двух циклов v-for в vue js

#vue.js #axios

#vue.js #axios

Вопрос:

У меня есть два цикла v-for следующим образом:

 <div v-for="id in ids">
        <div v-for="data in getData(id)">
              <p>{{data.name}}</p>
        </div>
</div>

Первый v-for выполняет итерацию по массиву идентификаторов , хранящихся внутри data() .
На втором v-for он выполняет итерацию по результату, возвращаемому функцией getData() .

Вызов axios возвращает массив результатов, включая имя для идентификаторов, однако <p> тег не отображает имена.

 <script>
    data(){
       id: ['1', '2', '3']
    },
    methods:{
       getData(id){
          //axios call
          return response.data;
       }
    }
</script>

Комментарии:

1. это нехорошо. используя методы в v-for

2. есть ли у вас другой подход, который даст желаемый результат? пожалуйста, предложите

3. Можем ли мы увидеть ответ. объект данных. Я также хотел бы предположить, что это довольно неэффективный способ проведения того, что я считаю операцией по получению информации о нескольких моделях. Вам лучше создать конечную точку, которая получает информацию о нескольких моделях одновременно.

4. Следуя вашему совету, что это плохой способ реализации этого подхода, я смог создать рабочий метод, который выполнялся после вызова axios. Метод сохранил все необходимые мне данные. Спасибо.

Ответ №1:

Я думаю, что это проблема:

когда v-for вызывает ваш метод, он не ожидает разрешения вызова axios, и поскольку для его итерации нет немедленно доступного массива, он ничего не может показать (показывать нечего), с другой стороны, когда вызов axios разрешает, для v-for нет возможностидля получения уведомлений и, следовательно, обновления шаблона. итак, ситуация выглядит примерно так:

  1. v-for запускает ваш метод
  2. метод не возвращает массив немедленно, и v-for не может ждать
  3. здесь нечего показывать, и он движется дальше

итак, вот что вы можете сделать:

  1. привязать v-for к массиву в объекте данных
  2. используйте результат axios для обновления указанного массива

и это должно работать нормально, ваш код может быть таким, например:

 // template
<div v-for="data in axiosResult">
   <p>{{data.name}}</p>
</div>

//script
<script>
data(){
   id: ['1', '2', '3'],
   axiosResult: [],
},
methods:{
   getData(){
      //axios call
      this.id.forEach((id) => {
         //axios function for each id
         axiosCall(id).then((result) => {
          this.axiosResult.push(result);
         });
      });
   }
}
</script>

Комментарии:

1. Я решил создать другой метод, который в точности делает то же самое. Я по-прежнему буду отмечать это как правильный ответ, чтобы другие могли ссылаться на него и за ваши усилия. Спасибо.

Метки: