I entered console.log('created test') in created life cycle hook as follows, but nothing logs in the console window.
Code :
<template>
<div>
<h1>메인 페이지</h1>
<p>메인 페이지입니다</p>
</div>
</template>
<script>
export default {
created(){
console.log('created test');
}
}
</script>
<style>
</style>
Screenshot :
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.
I am trying to use a child compontent in another compontent and it does not work. I have been trying to solve this problem looking for typos etc. for hours, but can't find anything.
Menu.vue
<template>
<div class='navbar-and-alert'>
<alert/>
<nav class='navbar'>
</nav>
</div>
</template>
<script>
import Alert from './Alert.vue'
export default {
name: 'Navbar',
compontents: {
Alert
},
data (){
return {
}
},
}
</script>
Alert.vue
<template>
<section class='alert-section'>
<p class='alert-section__content'>
...
</p>
<a href=''><img src='/static/assets/img/close.svg' class='alert-section__close-icon'></a>
</section>
</template>
<script>
export default {
name: 'Alert',
}
</script>
I get this alert in console:
Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
The alert component works when used inside App.vue
components has a typo:
compontents: {
Alert
},
Should be:
components: {
Alert
},
I'm very new to Vue and am trying to get a simple scoped breakpoint within my component.
<template>
<div class="date-picker">
<p>{{ date }}</p>
</div>
</template>
<script>
import moment from 'moment'
export default {
data () {
debugger;
return {
date: moment().format('YYYY-MM-DD')
}
}
}
</script>
<style lang="scss" scoped>
</style>
I was hoping the debugger statement could put a breakpoint where I could access moment in the Chrome developer console but that doesn't appear to work. Is this possible?
you cannot put a debugger in the data property.
try something like this:
<template>
<div class="date-picker">
<p>{{ date }}</p>
<button #click="debuggerButton">Debugger</button>
</div>
</template>
<script>
import moment from 'moment'
export default {
data () {
return {
date: moment().format('YYYY-MM-DD')
}
},
methods: {
debuggerButton(){
debugger
}
}
}
</script>
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>
I am coming from an angular mindset and now I am trying to learn vue.js. I am using webpack and I have the following three .vue classes.
CounterDisplay.vue, IncrementButton.vue, andApp.vue. I want to increment thecountvariable but all it does isconsole.loghow many times I pressed the button. I am trying to figure out how child to parent and parent to child work in vue. Then I need to figure out the correct pattern to use vue in a very large application. In angular you have amoduleand in there you put your components and services etc. How doesvue` do this?
CounterDisplay.vue
<template>
<div id="#counterDisplay">
{{count}}
</div>
</template>
<script>
export default {
data () {
return {
count: 0
}
}
}
</script>
<style scoped>
</style>
IncrementButton.vue
<template>
<button #click.prevent="active">+1</button>
</template>
<script>
export default {
methods: {
active () {
console.log('+1 Pressed')
}
}
}
</script>
<style scoped></style>
App.vue
<template>
<div id="app">
<h3>Increment:</h3>
<increment></increment>
<h3>Counter:</h3>
<counter></counter>
</div>
</template>
<script>
import Counter from './components/CounterDisplay.vue'
import Increment from './components/IncrementButton.vue'
export default {
components: {
Counter,
Increment
}
}
</script>
<style>
</style>
This is the output:
As you said:
. I am trying to figure out how child to parent and parent to child work
This is how you do it:
Set up a counter data property in App.vue
Emit an event using vm.$emit() in IncrementButton.vue component on every button click
Set up an event listener on this component increment and execute the method whenever this event is emitted
In the event call back method increase the counter by 1
Send the counter property as a prop to **CounterDisplay.vue
App.vue*
<template>
<div id="app">
<h3>Increment:</h3>
<increment #btn-clicked="increaseCounter"></increment>
<h3>Counter:</h3>
<counter :counter="counter"></counter>
</div>
</template>
<script>
import Counter from './components/CounterDisplay.vue'
import Increment from './components/IncrementButton.vue'
export default {
data(){
counter:0
},
components: {
Counter,
Increment
},
methods:{
increaseCounter(){
this.counter ++;
}
}
}
</script>
<style>
</style>
IncrementButton.vue
<template>
<button #click.prevent="active">+1</button>
</template>
<script>
import {EventBus} from './path/to/main.js'
export default {
methods: {
active () {
console.log('+1 Pressed')
//emitting an event
this.$emit('btn-clicked');
}
}
}
</script>
<style scoped></style>
CounterDisplay.vue
<template>
<div id="#counterDisplay">
{{counter}}
</div>
</template>
<script>
export default {
props:['counter'],
data () {
return {
}
},
}
</script>
<style scoped>
</style>
--------------------
Since the two components are non parent-child components the simple scenario would be using an EventBus
Declare an EventBus which is nothing more than an empty Vue instance in your main.js file
export const EventBus = new Vue();
The only focus of this empty vue instance is to listen and respond to events from components
IncrementButton.vue
<template>
<button #click.prevent="active">+1</button>
</template>
<script>
import {EventBus} from './path/to/main.js'
export default {
methods: {
active () {
console.log('+1 Pressed')
//emitting an event
//Syntax is EventBus.$emit('event-name', eventData);
EventBus.$emit('btn-clicked', 1);
}
}
}
</script>
<style scoped></style>
Now setup an listener for btn-clicked event in created hook of 8*CounterDisplay.vue**
<template>
<div id="#counterDisplay">
{{count}}
</div>
</template>
<script>
import {EventBus} from './path/to/main.js'
export default {
data () {
return {
count: 0
}
},
created(){
EventBus.$on('btn-clicked', (eventData) => {
this.count = this.count + eventData;
});
}
}
</script>
<style scoped>
</style>
Note: As you want to know the correct pattern for a large app, I would recommend using vuex