I have an issue with the nuxt.js project. I used async the component but when it rending, async wasn't working. This is my code.
I have view document in https://nuxtjs.org/api/ but I don't know what is exactly my issue
Test.vue (component)
<template>
<div>
{{ project }}
</div>
</template>
<script>
export default {
data() {
return {
project : 'aaaa'
}
},
asyncData() {
return {
project : 'bbbb'
}
}
}
</script>
This is index.vue (page)
<template>
<test></test>
</template>
<script>
import Test from '~/components/Test.vue'
export default {
components : {
Test
}
}
</script>
My expected result is
bbbb
But when running on http://localhost:3000 this is actual result
aaaa
I try to search google many times but don't have expected solution for me. Someone help me, please.
Thanks for helping.
The components/ folder must contains only "pure" Vue.js components
So you can't use asyncData inside.
Read this FAQ: https://nuxtjs.org/faq/async-data-components#async-data-in-components-
components/Test.vue (component)
<template>
<div>
{{ project }}
</div>
</template>
<script>
export default {
props: ['project'] // to receive data from page/index.vue
}
</script>
pages/index.vue (page)
<template>
<test :project="project"></test>
</template>
<script>
import Test from '~/components/Test.vue'
export default {
components : {
Test
},
asyncData() {
return {
project : 'bbbb'
}
}
}
</script>
You cannot use asyncData in component.
You can choose to use the fetch method instead.
<template>
<div>
<p v-if="$fetchState.pending">Loading....</p>
<p v-else-if="$fetchState.error">Error while fetching mountains</p>
<ul v-else>
<li v-for="(mountain, index) in mountains" :key="index">
{{ mountain.title }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
mountains: []
}
},
async fetch() {
this.mountains = await fetch(
'https://api.nuxtjs.dev/mountains'
).then(res => res.json())
}
}
</script>
Related
I cannot search for child component DOM element, my settings are as follows:
pages/Login.vue
<template>
<section class="login">
<div v-show="step === 4" class="login__container">
<Test />
</div>
</section>
</template>
<script>
export default {
data () {
return {
step: 1
}
},
async mounted () {
this.step = 4
await this.$nextTick()
document.querySelector('.test') // NULL
},
}
</script>
components/Test.vue
<template>
<div class="test">
foo
</div>
</template>
setTimeout of course is not solution. I also try the same on other page, but without success. What am I doing wrong? I guess the problem must be somewhere in the template or project configuration
#edit
i tried to do the same effect on jsfiddle vue template and fresh nuxt project but no problem there
You could try to use ref instead of querySelector to manipulate the component DOM :
<template>
<section class="login">
<div v-show="step === 4" class="login__container">
<Test ref="test"/>
</div>
</section>
</template>
<script>
export default {
data () {
return {
step: 1
}
},
mounted () {
this.step = 4
let test=this.$refs.test
},
}
</script>
Another way to access child component is emitting event when its ready and created in DOM,
In the child element:
<template>
<div ref="test">foo</div>
</template>
<script>
export default {
mounted() {
this.$emit('childMounted', this.$refs.test)
}
}
...
In your parent:
<template>
<section class="login">
<div v-show="step === 4" class="login__container">
<Test #childMounted="childMounted"/>
</div>
</section>
</template>
<script>
export default {
data () {
return {
step: 1
}
},
methods: {
childMounted(childRef) {
// Try here
// childRef: your child component reference
}
}
}
</script>
This kind of code should work properly
parent.vue
<template>
<div>
<test ref="parentTest" #hook:mounted="selectChildElement"></test>
</div>
</template>
<script>
export default {
methods: {
selectChildElement() {
console.log(this.$refs.parentTest.$refs.test)
},
},
}
</script>
Test.vue component
<template>
<div ref="test">foo</div>
</template>
This is because of the way the parent and children components are mounted, as explained here: https://stackoverflow.com/a/44319825/8816585
As Brahim said, it is also better to use $refs in an SPA context, more info available here.
The #hook:mounted trick was taken from this answer and initially found in this dev.to post.
As I thought, the problem is with nuxt, namely auto-importing components.
I am using automatic component import in the nuxt configuration.
nuxt.config.js
components: [
{
path: '~/components',
pathPrefix: false,
},
],
This approach apparently breaks something, and only after manually importing the component did it work properly
import Test from '#/components/Test.vue'
export default {
name: 'LoginPage',
components: {
Test
},
So the nuxt configuration caused the problem. Thank you for all your help.
Vuepress defines some global properties than can be used in templates, like $page or $site.
https://github.com/vuejs/vuepress/blob/master/packages/docs/docs/guide/global-computed.md
I can use these within the <template> node, but trying to use them within <script> throws an error.
<template>
<div class="page">
<div class="content">
<div>{{ $page.frontmatter.description }} Works fine</div>
<div>{{ $frontmatter.description }} Does not work despite what's in docs</div>
<div>{{ description }} Doesn't work</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
description: this.$page.frontmatter.description, //not defined
description2: $page.frontmatter.description, //nor this
};
},
};
</script>
Your problem is not about using Vuepress Global Computed Properties inside <script> tag, it's actually about using Vuejs Computed Properties inside data().
If you simply create a Vue component like the code snippet below, you will find the variable testMessage is not defined either.
<template>
<div>{{ testMessage }}</div>
</template>
<script>
export default {
data() {
return {
testMessage: this.test
}
},
computed: {
test: function() {
return 'This is a test';
}
}
}
</script>
I don't know the exact reason for this, but I believe it's about the lifecycle of Vue instance. So I suggest you simply access the Global Computed Properties inside computed properties or methods:
<template>
<div>{{ description }}</div>
</template>
<script>
export default {
computed: {
description : function() {
return this.$page.frontmatter.description;
}
}
}
</script>
I don't understand why it's not working and this driving me crazy
<template>
<p>{{ greeting }}</p>
</template>
<script>
export default {
name: 'App',
data: function(){
return {
greeting: 'this is message'
}
}
}
</script>
Why {{ greeting }} not working ? It should be run the text. But I got this error
Errors compiling template:
Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
Can anyone help me with this ?
You should have a <div> with an id app inside your <template> tag
<template>
<div id="app">{{greeting}}</div>
</template>
<script>
export default {
name: "App",
data: function() {
return {
greeting: "this is message"
};
}
};
</script>
Parent component (Dashboard):
<template>
<div id="dashboard">
<Header />
<b-container>
<div>
<b-row>
<b-col>
<Overview />
</b-col>
</b-row>
</div>
</b-container>
</div>
</template>
<script>
import Header from '#/components/common/Header';
import Overview from '#/components/dashboard/Overview';
import { mapGetters } from 'vuex';
export default {
name: 'dashboard',
components: {
Header,
Overview
},
mounted() {
const sessionId = this.$cookie.get('connect.sid');
this.$store.dispatch('user/getUser', sessionId).then((userData) => {
this.$store.dispatch('project/getProject', userData.data.user);
});
},
computed: {
...mapGetters('user', {
user: 'getUser'
})
}
}
</script>
Child component (Overview):
<template>
<div class="overview">
<div class="overview__title">
<h1>
Welcome {{user.cn[0]}} // Works
</h1>
</div>
<div class="overview__project">
<p v-for="project in runningprojects" :key="project._id">
{{project.name}} // Does not work at refresh
</p>
</div>
</div>
</template>
<script>
import {mapGetters} from 'vuex';
export default {
name: 'dashboard-overview',
data() {
return {
runningprojects: []
}
},
computed: {
...mapGetters('user', {
user: 'getUser'
}),
...mapGetters('project', {
projects: 'getProjects',
allProjects: 'getAllProjects'
})
},
mounted() {
console.log("mounted this.projects", this.projects);
// add something from this.projects to this.runningprojects
},
methods: {
calcReq() {
...
},
...
}
</script>
In my Dashboard component (parent) I fetch the user data with a vuex action dispatch('user/getUser) and after that I fetch the projects of this user dispatch('project/getProject).
In my Overview component (child) I want to show the project information of this user. I call my mapGetters and I have a component variable runningprojects inside data(). In my mounted() lifecycle I want to push data from my getters to this data array.
The following problem is given:
When I refresh my application, the console.log from my child component mounted() is called before the dispatch jobs are finished in the parent component (dashboard).
It only works if change something in my local files and vue-cli does a live reload.
Because of the page lifecycle of the vue app. when component renders mounted is called after created and it wont wait for the ajax or any async calls.
One solution would be to not render the child component until the async return
<template>
<div id="dashboard">
<Header />
<b-container>
<div>
<b-row>
<b-col>
<Overview v-if="finished"/>
</b-col>
</b-row>
</div>
</b-container>
</div>
</template>
<script>
import Header from '#/components/common/Header';
import Overview from '#/components/dashboard/Overview';
import { mapGetters } from 'vuex';
export default {
name: 'dashboard',
data() {
return {
finished: false,
}
},
components: {
Header,
Overview
},
mounted() {
const sessionId = this.$cookie.get('connect.sid');
this.$store.dispatch('user/getUser', sessionId).then((userData) => {
this.$store.dispatch('project/getProject', userData.data.user);
this.finished = true;
});
},
computed: {
...mapGetters('user', {
user: 'getUser'
})
}
}
</script>
Just add a v-if in the child component and when dispatch has return then set the value to true which will render the child component and the then the mounted will have the values you want
Other solution would be.
Use updated function instead of mounted and which will be called when ever there is a change in the state.
I config a global check user if LoggedIn or not to rendering components in NuxtJS but I cant do it. Please help me.
I write computed to wrapper components (layouts/default.vue)
~/layouts/default.vue
<template>
<router-view></router-view>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed: {
computed: {
...mapGetters({
LoggedIn: 'authUser'
})
}
}
}
</script>
But I cant use it on children components / pages.
~/pages/index.vue
<template>
<div class="index-page">
<div class="" v-if="LoggedIn">
asdasd
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log(this.LoggedIn)
// Result: Undefined
}
}
</script>