I have a single file component with some data:
data () {
return {
myArray: [obj1,obj2,...obj10000]
}
}
Is it a good idea to have 10000 objects in the data array? If not, how can I import the large array in the single file component?
You can create it in a separate file and import to component.
const animals = [ //animals.js
{name:"tiger", weight:120},
{name:"elephant", weight:1000}
]
export default animals
In component
import animals from './path/to/animals.js'
export default {
data() {
return {
animals: animals
}
},
I found that use a separate json file is a good idea.
Simply create a seperate file in your folder structure under /src /components or wherever.
You shall have two files
data.js / data.json
ComponentName.vue
data.js file, could also be a data.json file.
export const data = [{},{},{}]
export default data;
To import use in any vue component ----
<template></template>
<script>
import data from './components/data'
*// in case folder structure is different use " ../ or ./ "*
</script>
Related
i would like to create a global mixin that is in a seperate file. all the tutorial i have seen online always place the mixin into the same file, or don't explain how to import another file.
mixins don't really make sense if they are all in the same file, so there has to be some way to load them from a different file, right?
here is my test mixin_test.js:
export default mixin_test = {
methods: {
test: function( msg )
{
console.log( msg );
}
}
}
in the app.js i have the following:
...
import mixin_test from "./mixin_test.js";
...
and in my component:
export default {
name:"something",
mixins: [mixin_test],
mounted(){
this.test( "hello world" );
}
}
if i open the page in a web browser i get the error message:
Uncaught ReferenceError: assignment to undeclared variable mixin_test
does anyone have any idea what the issue is?
default export isn't the same as named export and doesn't need to be specified with a name. default export is an expression. export default mixin_test = ... is the same as console.log(mixin_test = ...), this results in assigning to non-existent mixin_test variable.
It should be either:
export default {...}
Or:
const mixin_test = {...}
export default mixin_test;
I'm trying to import multiple components from a folder conditionally. The first example works, but I need to get it working conditionally like in the last example that doesn't work. Otherwise I'd have to always go and change which components should import manually, after adding one to the project folder.
I've also tried wrapping the imports into a function, but I can't get the import * as components syntax to work. Importing one component works fine, but not with * return () => import * as components '#/components/index'
This works
import * as components from '#/components/index'
export default {
components: {
...loadedComponents
}
}
index.js and electronIndex.js
export {
default as one
}
from './One.vue'
export {
default as two
}
from './Two.vue'
This of course doesn't work, but demonstrates what I need
I also tried importing conditionally via functions like stated above, but can't get that to work either.
const IPC = window.ipcRenderer
if (IPC) {
import * as components from '#/components/electronIndex'
} else {
import * as components from '#/components/index'
}
export default {
components: {
...loadedComponents
}
}
I use Vue 3 and I have a dynamic component. It takes a prop called componentName so I can send any component to it. It works, kind of.
Part of the template
<component :is="componentName" />
The problem is that I still need to import all the possible components. If I send About as a componentName I need to import About.vue.
Part of the script
I import all the possible components that can be added into componentName. With 30 possible components, it will be a long list.
import About "#/components/About.vue";
import Projects from "#/components/Projects.vue";
Question
It there a way to dynamically import the component used?
I already faced the same situation in my template when I tried to make a demo of my icons which are more than 1k icon components so I used something like this :
import {defineAsyncComponent,defineComponent} from "vue";
const requireContext = require.context(
"#/components", //path to components folder which are resolved automatically
true,
/\.vue$/i,
"sync"
);
let componentNames= requireContext
.keys()
.map((file) => file.replace(/(^.\/)|(\.vue$)/g, ""));
let components= {};
componentNames.forEach((component) => { //component represents the component name
components[component] = defineAsyncComponent(() => //import each component dynamically
import("#/components/components/" + component + ".vue")
);
});
export default defineComponent({
name: "App",
data() {
return {
componentNames,// you need this if you want to loop through the component names in template
};
},
components,//ES6 shorthand of components:components or components:{...components }
});
learn more about require.context
"vue": "2.5.2",
"vue-loader": "15.4.2",
"webpack": "4.26.1",
// A.vue
export let a = 1
export default {
name: 'a',
data()(),
}
// B.vue
import A, { a } from './A.vue'
import A successfully;
But: "export 'a' was not found in './A.vue'
It must be because a let variable only works in the scope where is declared, try with a const as in:
export const a = 1
In ES6, export default is to export a single value (or function). If you need to export several things from your module, use named exports. Check the MDN doc
export A {
name: 'a',
data()(),
}
export let a=2
///in B.vue
import {A, a} from './A.vue'
I'm not sure that's the best approach though, I guess a Vue component should only export the component itself. And if you need another value, create a different module in a .js file somewhere. And if you need to share state between your components, use VueX instead.
I know this question has been asked several times, unfortunately i can't figure it out. My question is how to import all vue single file components from a directory in one shot. Le'me clear that..
Say i have directory named as Add/Items where i stored all vue components, ItemA, ItemB and so on. I want to import these components to a Add.vue file which is sitting just outside the Add directory.
I have tried these methods (in Add.vue file script section) ..
Method #1:
import ItemA from './Add/Items/ItemA'
import ItemB from './Add/Items/ItemB'
export default {
components: {
'item-a': ItemA,
'item-b': ItemB
}
}
and it works, with <item-a/> as well as with <component is="item-a"/>
but the following method does not work.
Method #2
Here i have created a file named index.js at Add/Items directory where the following snippet is written
import itemA from './ItemA'
import ItemB from './ItemB'
export default {
ItemA,
ItemB
}
and in the Add.vue file
import items from './Add/Items'
export default {
components: {
items
}
}
And it is working neither with <item-a/> nor with <component is="item-a"/>.
Is there something i m missing ?? and by the way, <component :is="item-a"/> is my preference.
Thanks in advance.
In last example(Add.vue) in your question you will get this(that is not what you want):
components: {
items: {
ItemA,
ItemB
}
}
You just need to use spread(...) operator or assign items to components directly:
export default {
components: {
...items
}
}
OR this:
export default {
components: items
}