Question

在此之前，我将数据作为“技术”的数组直接存储在“数据（）”中的组件中，并按类型和html输出进行过滤。原来，我不得不放入一个单独的文件，并向其中添加更多数据。现在，由于这种方法，过滤器不起作用。如何将其固定到此类数据？ “ data.json”文件的结构如下。我需要按类型和输出过滤数组。

[
  {
    "language": "Rus",
    "Technologies":[{
                        label: "Vue Js ",
                        price: 1.3,
                        type:"js"
                    },
                    {
                        label: "CMS WordPress",
                        price: 1.05,
                        type:"CMS"
                    }],
    "Another":[{},{}...],
  }
]

以前的结构是什么以及如何工作。

export default {
        name: 'testappp',
        data() {
            return {
                Technologies: [
                        {
                            label: "Vue Js ",
                            price: 1.3,
                            type:"js"
                        },
                        {
                            label: "CMS WordPress",
                            price: 1.05,
                            type:"CMS"
                        },
                        {
                            label: "Yii2",
                            price: 1.5,
                            type:"php"

                        },
                        {
                            label: "другой js-фреймворк",
                            price: 1.7,
                            type:"noname"
                        },
                        {
                            label: "React Js ",
                            price: 1.9,
                            type:"js"
                        },
                        {
                            label: "CMS Joomla",
                            price: 1.1,
                            type:"CMS"
                        },
                        {
                            label: "Laravel",
                            price: 1.6,
                            type:"php"
                        },
                        {
                            label: "другой php-фреймворк",
                            price: 1.8,
                            type:"noname"
                        },
                        {
                            label: "Angular",
                            price: 1.6,
                            type:"js"
                        },
                        {
                            label: "CMS OpenCart",
                            price: 1.3,
                            type:"CMS"
                        },
                        {
                            label: "Symfony",
                            price: 1.6,
                            type:"php"
                        },
                        {
                            label: "Другая CMS",
                            price: 1.9,
                            type:"noname"
                        }
                ]

 }        }

按外观过滤

computed: {            

            filteredItemsJS() {
                return this.Technologies.filter(item => {
                            return item.type.toLowerCase().indexOf("js") > -1
                        })
            },
            filteredItemsNoName() {
                return this.Technologies.filter(item => {
                            return item.type.toLowerCase().indexOf("noname") > -1
                        })
            },
            filteredItemsCMS() {
                return this.Technologies.filter(item => {
                            return item.type.toLowerCase().indexOf("cms") > -1
                        })
            },
            filteredItemsPHP() {
                return this.Technologies.filter(item => {
                            return item.type.toLowerCase().indexOf("php") > -1
                        })
            }
        }

Answer 1

由于您的代码中具有默认导出功能，因此我们显然已经有了一个模块系统，您可以按照以下步骤将本地文件导入组件：

import jsonData from './path/to/file';

然后可以在创建的函数（见下文，因为它是相同的函数）中JSON.parse到您的Technologies数组上。

如果您希望从远程服务器加载data.json，可以使用您选择的ajax库（axios等）在created函数中检索数据。

由于您显示的json响应直接映射到数据的硬编码数组，因此您可以简单地使用this.Technologies将响应分配给数据。

我建议将data.Technologies初始化为一个空数组，以防止任何现有的计算属性出现故障。由于这些是反应性的，因此一旦您加载了Technologies数组，针对过滤计算属性的任何绑定都将自动更新。

像这样...

default export {
  name: "",
  data(){
    return {
        Technologies: []
    }
  },
  computed: {....},
  created() {
    ajaxPromiseLib.get(URL_TO_JSON_ENDPOINT).then(data => this.Technologies = data);
  }
}

Vue.js JSON数据过滤器

1 个答案: