Question

我是编程新手，我将成为前端开发人员。作为练习的一部分，我试图做一个简单的Web应用程序。

但是要点。

在尝试过滤/切片JSON对象时，我陷入了困境-只有从控制台得到的是：“切片/过滤器不是函数”。我知道这些函数是用于数组的，但是我不知道如何将JSON对象转换为JSON数组。我在Internet上看了很多工作人员，并尝试实现它，但是没有成功...

有代码：

<template>
    <div class="class">
        <section v-if="errored">
            <p>We're sorry, we're not able to retrieve this information at the moment, please try back later</p>
        </section>

        <section v-else>
            <div v-if="loading">Loading...</div>

            <div class="row" v-else>
                <div>
                    <div v-for="vehicle in filteredVehicles">
                        <img v-for="car in vehicle.cars" v-bind:src="car.url" v-bind:alt="car.name">
                    </div>
                </div>
            </div>

        </section>
    </div>

<script>
    import axios from 'axios';

    export default {
        data() {
            return {
                vehicles: [],
                loading: true,
                errored: false
            }
        },
        mounted() {
            axios
                .get('https://urlurlurl/vehicles.json')
                .then(response => (this.vehicles= response.data))
                .catch(error => {
                    console.log(error)
                    this.errored = true
                })
                .finally(() => this.loading = false)
        },
        computed: {
            filteredVehicles: function () {
                return this.vehicles.filter(function (v) {
                    return v.name === ('aaa' || 'bbb')
                })
            }
        }
    }
</script>

数据结构示例：

{
  "1": {
    "firstname": "",
    "lastname": "",
    "age": {
      "1": {
        "name": "",
        "url": ""
      },
      "3": {
        "name": "",
        "url": ""
      }
    }
  },
  "2": {
    "firstname": "",
    "lastname": "",
    "age": {
      "6": {
        "name": "",
        "url": ""
      },
      "7": {
        "name": "",
        "url": ""
      }
    }
  }
  // etc.
}

预先感谢您的帮助。

Answer 1

您的数据似乎是键/值对的对象。不幸的是，大多数浏览器不支持Object.values，它会为您提供 just 对象值的数组：

return Object.values(this.vehicles)    // Array of vehicle objects
  .filter(function (v) {
    return v.name === ('aaa' || 'bbb')
  })

...但是有一个受广泛支持的Object.keys方法，因此您可以通过两步过程来获取值：

return Object.keys(this.vehicles)     // Array of keys in the JSON obj
  .map(key => this.vehicles[key])     // Array of vehicle objects
  .filter(function (v) {
    return v.name === ('aaa' || 'bbb')
  })

或者，如果您想使用类似lodash之类的方法，则可以为处理对象提供更方便的功能。

Answer 2

将其放入您的app.js文件

Vue.filter('snippet',function (val) {
    return val.slice(0,100);
})

，当您要使用它时，只需将这样的代码片段最简短地放在您的html中。

<p class="card-text mb-auto">{{product.description | snippet}}</p>

VueJS Axios JSON切片/过滤器不起作用

2 个答案: