Tengo este ejemplo a continuación, donde estoy usando menús desplegables para filtrar datos. Como puede ver, tengo los [elementos] codificados en un archivo javascript. Espero señalar un archivo javascript externo, y espero que alguien pueda ayudarme con la mejor manera de hacerlo:
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/
¡Gracias por adelantado!
La pregunta es un poco confusa sobre el archivo javascript 'externo', supongo que quiso decir que aún vivirá en el código fuente pero en un archivo diferente.
Use una declaración de importación en su archivo Vue y una declaración de exportación en su archivo js
elementos.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;aplicación.vue
import items from './items.js'; new Vue({ el: '#app', data: { selectedType: '', selectedCountry: '', selectedYear: '', items: items, } ...Dependiendo de dónde coloque su archivo items.js, cambiará la ruta de importación, si es un vecino de su app.vue, entonces ./items.js hará el truco.
Se prefiere el formato JSON para almacenar datos como este. Lea sobre esto aquí