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>
Related
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 :
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
},
Working my way learning about Vue. I chose it as the better alternative after looking at React, Angular and Svelte.
I have a simple example that its not working probably because I'm not getting/understanding the reactive behaviour of Vue.
Plain simple App:
<template>
<div id="app">
<app-header></app-header>
<router-view />
<app-footer></app-footer>
</div>
</template>
<script>
import Header from './components/Header.vue'
import Home from './components/Home.vue'
import Footer from './components/Footer.vue'
export default {
components: {
name: 'App',
'app-header': Header,
'app-footer': Footer
}
}
</script>
Where Home.vue and Footer.vue have plain HTML content on the template.
On Header.vue I have:
<template>
<div>
<h1>The Header</h1>
<nav>
<ul>
<li>Curr Player: {{ ethaccount }}</li>
<li>Prop owner: {{ propOwner }}</li>
</ul>
</nav>
<hr />
</div>
</template>
<script>
export default {
data() {
return {
ethaccount: 'N/A',
propOwner: 'N/A'
}
},
methods: {
update() {
var ethaccount = '0xAAAAAA123456789123456789123456789'
console.log('ETH Account: ' + ethaccount)
var propOwner = '0xPPPPPPPPPPP987654321987654321'
console.log('Prop Account: ' + propOwner)
}
},
mounted() {
this.update()
}
}
</script>
But I'm unable to get the header updated and unable to find what I'm doing wrong. Help.
If you need to read a little bit more about the reactivity of the datas in vuejs check this link : https://v2.vuejs.org/v2/guide/reactivity.html
If you need to access/change your data try to do it like that :
this.$data.ethaccount = 'foo';
this.$data.propOwner = 'bar';
For me the problem is taht you re-declare your variable locally by doing :
var ethaccount = "0xAA...";
By doing such you never change the value of the data you're accessing through your template.
Hope it will solve your problem.
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 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