VueJS Axios JSON切片/过滤器不是一个函数[重复]

Question

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

但切中要害。

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

有代码：

<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

把它放在你的 app.js 文件中

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

当你想使用它时，只需像这样在你的 html 中添加 snippest。

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

Answer 2

看起来您的数据是键/值对的对象。不幸的是，大多数浏览器不支持Object.values，它会给你一个只是对象值的数组：

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 之类的东西，它会为您提供一些更方便的函数来处理对象操作。