如何使用 javascript 过滤功能列出从 laravel 到 vue 的多个对象？答案

【问题标题】：How to list multiple objects from laravel to vue using javascript filter function?如何使用 javascript 过滤功能列出从 laravel 到 vue 的多个对象？
【发布时间】：2020-10-13 04:22:41
【问题描述】：

我将多个objects 从laravel 传递到vue，并希望使用数据库中给出的值填充我的vue 对象。

来自 laravel 的数据：

Vue 对象：

  storeName: {},
  storeUrl: {},
  appName: {},
  price: {},
  share: {},

数据来自哪里：

  mounted() {
  axios.get('/dashboard/affiliates')
    .then(res => {
      let data = res.data;

      this.storeName = data.affiliates.shop_name;
      console.log(data.affiliates);
    })

据我了解，最好的方法之一是使用 javascript 的过滤器功能填充我的 vue 对象，但完全不了解它，也不知道该怎么做。

我如何使用数据填充 vue 对象，以便稍后我可以将它们列出到 v-for 中的视图中？

【问题讨论】：

你能解释一下你的愿望吗？
我怎样才能用数据填充 vue 对象，以便稍后我可以在 v-for 中将它们列出到视图中？

标签： javascript laravel vue.js object laravel-5

【解决方案1】：

首先使用计算函数链接视图，当您更改 storeName 时，应用会检测更改并再次绘制
其次，制作一个 shop_name 数组，使用 .filter 进行过滤，并使用 .map 来调整您的数据

我的建议是你将所有数据存储在 vue 数据端，在你的计算方法过滤数据和可选的解析数据上，你也可以使用模板访问数据，这样你就可以在模板上解析数据。

类似的东西

export default {
    name: 'loquesea',
    data: {
        affiliates: []
    },
    mounted() {
          axios.get('/dashboard/affiliates')
        .then(res => {
            let data = res.data;
            this.affiliates = data.affiliates;
        })
    },
    computed: {
        getStoresName() {
            return this.affiliates.filter(() => {
                // what you want
                return true;
            }).map((affiliate) => {
                return affiliate.shop_name;
            })
        }
    }
}

在你的 template.html 上

<ul id="example-1">
  <li v-for="storeName in getStoresName">
    {{ storeName  }}
  </li>
</ul>

【讨论】：