如何指向一个外部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

这个问题有点不清楚'外部' 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格式是存储此类数据的首选格式。点击这里阅读