Как получить данные в шаблоне vue, вызвав функцию

Как получить данные в шаблоне vue, вызвав функцию

28.01.2020 07:27:16 Просмотров 23 Источник

У меня есть несколько магазинов. В этих магазинах продаются самые разные товары. На странице должен быть отображен список магазинов, а также список категорий товаров, которые продает магазин.

Приставка.данные журнала поступают, но я не могу отобразить список категорий товаров магазина pare

   <template>               
        <div class="store">
            <div v-for="store in stores" :key="store.id" :set="products = getProducts(store.id)">
<h2>{{store.name}}</h2>
//Other Store info
<ul>
<li v-for="product in products">
{{product.category.name}}
//This data is not Show
</li>
</ul>

             </div>
        </div>

</template>

<script>
    export default {
        data() {
            return {
                stores: []

            }
        },
        mounted() {
            var app = this;
            axios.get('/axios/allstore/')
                .then(function (response) {
                    app.stores = response.data;
                    console.log(response.data);
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        methods: {
            getProducts(storeID) {
                var pp = this;
                axios.get('/axios/storeproducts/' + storeID, {
                        params: {
                            storeID: storeID,
                        }
                    })
                    .then(function (response) {
                        console.log(response.data);
                        return response.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        },
    }

</script>

Спасибо, Аванс.

У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/59953083/how-to-get-data-in-vue-template-by-call-a-function#comment106025612_59953083
Что не так с вашим кодом?
https://stackoverflow.com/questions/59953083/how-to-get-data-in-vue-template-by-call-a-function#comment106025729_59953083
кроме того, мы должны угадать, как выглядят ваши объекты в массиве? ;) Пожалуйста, опубликуйте примерные данные.
https://stackoverflow.com/questions/59953083/how-to-get-data-in-vue-template-by-call-a-function#comment106025740_59953083
Я нет. Список магазинов показать хорошо, но: установить vareable данные не показывают. У меня есть данные консоли покажите, пожалуйста, следующее: рис.
https://stackoverflow.com/questions/59953083/how-to-get-data-in-vue-template-by-call-a-function#comment106025775_59953083
да, но что содержит массив, точнее, как выглядит объект? Какими свойствами они обладают?
https://stackoverflow.com/questions/59953083/how-to-get-data-in-vue-template-by-call-a-function#comment106025831_59953083
Я использую эту технику codepen.io/mmghv/pen/…
https://stackoverflow.com/questions/59953083/how-to-get-data-in-vue-template-by-call-a-function#comment106025877_59953083
значения продуктов в наборе для цикла < div>
https://stackoverflow.com/questions/59953083/how-to-get-data-in-vue-template-by-call-a-function#comment106025931_59953083
У вас есть идеи, как решить эту проблему?

Ответы - Как получить данные в шаблоне vue, вызвав функцию / How to get data in vue template by call a function

Является ответом!
AJT82

28.01.2020 08:09:42

Я бы выбрал совершенно другой подход, так как прежде всего, используя :set, ваши http-запросы будут запускаться всякий раз, когда происходит обнаружение изменений. Вместо этого соберите все данные, когда компонент отображается:

created() {
  this.getStores();
},
methods: {
  getProducts(id) {
    return axios.get("...")
      .then(response => response.data)
  },
  getStores() {
    // first get stores, you can also use async await instead, if you like
    axios.get("...").then(response => {
      this.stores = response.data;
      // gather all requests for each store to get products
      const reqs = this.stores.map(store => this.getProducts(store.id));
      axios.all(reqs).then(products => {
        // merge data
        this.stores = this.stores.map((store, i) => {
          return { ...store, products: products[i] };
        });
      });
    });
  }
}

Теперь для каждого магазина существует products

Что касается шаблона, убедитесь, что <div v-for="store in stores" :key="store.id"> <h2>{{store.name}}</h2> <ul> <!-- choose a key, here just using index --> <li v-for="(product, index) in store.products" :key="index"> {{product.category.name}} </li> </ul> </div> фактически существует в объекте продукта.

Закрыть X