如何通过调用函数获取vue模板中的数据答案

【问题标题】：How to get data in vue template by call a function如何通过调用函数获取vue模板中的数据
【发布时间】：2020-05-14 02:58:51
【问题描述】：

我有多家商店。这些商店出售各种产品。页面上应显示商店列表，以及商店销售的产品类别列表。

Console.log data in coming but I can't display Store product Category pare list

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

谢谢，前进。

【问题讨论】：

你的代码有什么问题？
另外，我们是否应该猜测数组中的对象的外观？ ;) 请发布示例数据。
我没有。商店列表显示良好，但 :set 可变数据不显示。我有控制台数据显示，请参阅包含 img。
是的，但是数组包含什么，更具体地说，对象是什么样的？他们有什么属性？
在什么时候设置products 值？

标签： laravel vue.js vuejs2 vue-component

【解决方案1】：

我会采取完全不同的方法，因为首先，使用: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>

至于模板，确保category.name确实存在于产品对象中。

【讨论】：