vue中如何用数组指向外部javascript文件？

Question

下面是这个示例，我在其中使用下拉菜单过滤数据。如您所见，我将 [items] 硬编码到 javascript 文件中。我希望指向一个外部 javascript 文件，并希望有人可以帮助我以最好的方式做到这一点：

data: {
selectedType: '',
selectedCountry: '',
selectedYear: '',
items: [{
    name: 'Nolan',
    type: 'mercedes, ford',
    year: '2020',
    country: 'england'
  },
  {
    name: 'Edgar',
    type: 'bmw',
    year: '2020',
    country: 'belgium'
  },
  {
    name: 'John',
    type: 'bmw, audi',
    year: '2019',
    country: 'england'
  },
  {
    name: 'Axel',
    type: 'mercedes',
    year: '2020',
    country: 'england'
  }
],

},

https://jsfiddle.net/yrbs2650/1/

提前致谢！

Answer 1

关于 'external' javascript 文件的问题有点不清楚，我假设你的意思是它仍然存在于源代码中，但在不同的文件中。

在 Vue 文件中使用 import 语句，在 js 文件中使用 export 语句

items.js

const items = [
  {
    name: 'Nolan',
    type: 'mercedes, ford',
    year: '2020',
    country: 'england'
  },
  {
    name: 'Edgar',
    type: 'bmw',
    year: '2020',
    country: 'belgium'
  },
  {
    name: 'John',
    type: 'bmw, audi',
    year: '2019',
    country: 'england'
  },
  {
    name: 'Axel',
    type: 'mercedes',
    year: '2020',
    country: 'england'
  }
];

export default items;

app.vue

import items from './items.js';

new Vue({
  el: '#app',
  data: {
    selectedType: '',
    selectedCountry: '',
    selectedYear: '',
    items: items,
  }
  ...

根据您放置 items.js 文件的位置，导入路径会发生变化，如果它与您的 app.vue 相邻，那么 ./items.js 就可以了。

JSON 格式是存储此类数据的首选格式。 Read about it here

vue中如何用数组指向外部javascript文件？

How to point to an external javascript file with an array in vue?

javascript

vue.js

eleventy