Why aren't the props being passed to the component in InventorySectionGroupItemComponent
https://codesandbox.io/s/cgvbc
?
There's a warning:
[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <InventorySectionGroupItemComponent>
<InventorySectionGroupComponent> at /src/components/InventorySectionGroupC.vue
<InventorySectionComponent> at /src/components/InventorySectionC.vue
<ChromePage> at /src/components/ChromePage.vue
<App> at /src/App.vue
<Root>
vue hates long component names (correct me if I'm wrong)(Updated sandbox).
The component name has nothing to do with the error. The problem is InventorySectionGroupC.vue incorrectly registers VueGridLayout:
import VueGridLayout from 'vue-grid-layout';
export default {
name: "InventorySectionGroupComponent",
components: {
VueGridLayout, // incorrect registration
},
}
vue-grid-layout's installation guide shows how to register the components:
import VueGridLayout from 'vue-grid-layout'
export default {
components: {
GridLayout: VueGridLayout.GridLayout,
GridItem: VueGridLayout.GridItem,
}
}
As a side note, grid-layout and grid-item are actually used in InventorySectionC.vue
(not InventorySectionGroupC.vue), so their component registration should be moved into that component.
demo
Related
while trying to write a component test by using vue test utils, testing interaction between child components and stuff, I am stuck due to usage of Vuelidate from child components. Below is an example simplified:
// parent component code
<template>
<div>
<childA />
</div>
</template>
//childA code
<template>
<input v-model="value" />
</template>
<script>
...
validations: {
value: {
required
}
}
...
</script>
// parent component test
...
const wrapper = mount(MyParentComponent, {
...,
components: {
childA,
},
validations: {
value: required
},
...
})
I have tried to find a solution out there that I could mount (note here that I WANT to mount also the child components, so shallow-mount is not what I look for) the child component, with it's respective Vuelidate validation rules, but I still haven't found any solution.
Instead, my test gives me errors like:
Cannot read property `value` of undefined
which makes sense, since the test cannot access the child component's $v instance.
Has anyone achieved it so far?
For answering your question and after i've did some test i believe you missed the data part inside your mount
mount: render child components
shallowMount: doesn't render child components
MyParentComponent need to have in the options the structure of you're child component so this is why he is returning the error
And i saw that you're passing the import of your component directly but don't forget that your test folder is outside of your src folder
import ChildA from "#/components/ChildA";
will not work instead i propose to use absolute path directly to import your child component or use a configuration to resolve them
const wrapper = mount(MyParentComponent, {
data() {
return {
value: null
}
},
components: {
ChildA: () => import('../../src/components/ChildA'),
},
validations: {
value: required
},
})
This Is My Global state and shared component I set and defined getters here
export default {
getters: {
loading(state) {
return state.loading;
},
statusMessage(state) {
return state.statusMessage;
},
},
}
The store export shared modules here
import Vue from 'vue'
import Vuex from 'vuex'
import shared from './shared/index.js'
Vue.use(Vuex)
export const store = new Vuex.Store({
modules:{
shared: shared,
}
});
The registration template component here i want to access loading and error message but actually the problem of mine is when the page rendering I found this errors in console
in render: "TypeError: Cannot read property 'getters' of undefined"
found in
---> <Registrations> at src/views/Registrations.vue
<VApp>
<App> at src/App.vue
<Root>
computed: {
loading (){
return this.$store.getters.loading
},
error(){
return this.$store.getters.statusMessage
}
}
getters are defined above as I Shown and export as well but I not able to find the reason what's the reason and problem there!!! help me If You can
try this.$store.shared.getters.loading - because you are using a module getter
I'm trying to use this countdown-timer / on-github inside one of my single-file-components.
Even though I'm importing it like mentioned in the example, I'm getting this error:
21:27:20.553 [Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <CircularCountDownTimer>
<Visualization> at src/views/Visualization.vue
<App> at src/App.vue
<Root> vue.runtime.esm.js:619
VueJS 17
run es6.promise.js:75
notify es6.promise.js:92
flush _microtask.js:18
Looking up the warning I've found the following pages:
vue-router-problem1
vue-router-problem2
What I've gathered/attempted from that:
Change vue-cli config to use runtime compiler (No change)
22:02:49.722 [Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <CircularCountDownTimer>
<Visualization> at src/views/Visualization.vue
<App> at src/App.vue
<Root> vue.esm.js:628
VueJS 18
run es6.promise.js:75
notify es6.promise.js:92
flush _microtask.js:18
Import in Main.js with Vue.use(Plugin) (Same error)
Import it in the router component (Same error)
EDIT:
I've also looked at this question nested-components in vuejs
And changed the component registration like so:
beforeCreate() {
this.$options.components.CircularCountDownTimer = require('vue-circular-count-down-timer')
},
None of the above made this plugin work for me and I don't really understand why.
Here is my code:
main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import CircularCountDownTimer from "vue-circular-count-down-timer";
Vue.use(CircularCountDownTimer)
Vue.config.productionTip = false;
export const eventBus = new Vue();
new Vue({
router,
render: h => h(App)
}).$mount("#app");
component (Visualization.vue):
<template>
<div id="content">
<circular-count-down-timer
v-for="counter in counters" :key="counter.id"
:initial-value="counter.seconds"
:show-minute="false"
:show-hour="false"
:show-negatives="false"
:second-label="counter.name"
:steps="1"
/>
</div>
</template>
<script>
import CircularCountDownTimer from "vue-circular-count-down-timer";
export default {
name: "Visualization",
components: {
CircularCountDownTimer
},
data() {
return {
counters: []
}
},
mounted() {
if (localStorage.getItem("delays")) {
try {
this.counters = JSON.parse(localStorage.getItem("delays"));
} catch (e) {
console.debug(e);
localStorage.removeItem("delays");
}
}
}
};
</script>
Also this is the data when reading from localStorage:
[{"id":1,"seconds":"60","name":"asdf"}]
Dependencies in package.json:
"dependencies": {
"#babel/preset-env": "^7.5.4",
"core-js": "^2.6.5",
"vue": "^2.6.10",
"vue-awesome-countdown": "^1.0.16",
"vue-circular-count-down-timer": "^1.0.4",
"vue-grid-layout": "^2.3.4",
"vue-router": "^3.0.3"
}
vue-circular-count-down-timer is a plugin, so this bit of the code seems to be correct:
import CircularCountDownTimer from "vue-circular-count-down-timer";
Vue.use(CircularCountDownTimer)
If you take a look at the source code for the plugin you'll see that all it does is register a component globally called circular-count-down-timer:
https://github.com/noorzaie/vue-circular-count-down-timer/blob/master/src/components/index.js
The problem occurs when you do this:
import CircularCountDownTimer from "vue-circular-count-down-timer";
export default {
name: "Visualization",
components: {
CircularCountDownTimer
},
You're just importing the plugin again and then trying to use it as a component. But it isn't a component, it's a plugin. Vue doesn't know this, it just sees an object without a template or render function.
Get rid of the local component import and it should just use the globally registered component instead.
I create a custom vue.js component.
Component scratch : /scratch/index.js :
import drawArea from './drawArea.vue';
import scratchList from './scratchList.vue';
export default {
drawArea,
scratchList,
}
In main.vue
<template>
<drawArea></drawArea>
</template>
<script >
import {drawArea, scratchList} from '../components/Scratcher';
export default {
components: {
'drawArea': drawArea,
},
}
</script>
But I get an error:
Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
How can I correctly register my component?
Thank you.
I would like to create Side Panel as a reusable component in Framework7 with VueJS. Here is my code..
Card.vue
<f7-card>
<f7-card-header>Card header content</f7-card-header>
<f7-card-content><img src="https://wiki.videolan.org/images/Ubuntu-logo.png"></img></f7-card-content>
<f7-card-footer>Card footer content</f7-card-footer>
</f7-card>
Now i registered as a component like below,
import Vue from 'vue'
export default [
{
path: '/card/',
component: require('./Card')
},
]
In later vues i imported as,
import Card from './Card.vue'
and i try to access in another vues like,
Now i'm getting an error like
[Vue warn]: Unknown custom element: - did you register the
component correctly? For recursive components, make sure to provide
the "name" option.
Can anyone help me where have i mistaken?
Thanks,
It's not really clear from your code exactly what you are doing, but the error you are getting happens when you try to use a component as a child of another component without registering it in the parent's components setting like this:
<script>
import Card from './Card.vue'
export default {
data () {
return {
somedata: 'some value'
}
},
components: {Card: Card}, // <- you're missing this
// etc...
}
</script>
You can also register components globally. More here: https://v2.vuejs.org/v2/guide/components.html#Local-Registration
Are you showing us all of Card.vue? For a valid single-file vue component, I would expect to see <template>, <script> and <style> elements. The render function will be generated from whatever you put in the <template> element.
Make sure that the component that you want to reuse is wrapped inside a template tag
As follows
<template>
<div>
<component data/>
<div/>
<template/>
Then register it inside the parent
Like so
export default {
name: "Card",
components: {
Card
},
};