Vue Y U NO UPDATE?!

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
>         }
>     }

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:&nbsp;{{ethaccount}}</li>
> 
> 									<li>Prop owner:&nbsp;{{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.

Hi. There is nothing calling the updated method of the header component. If you want it updated early in the components life cycle you can call from inside created or mounted

Read more about the lifecycle of components here: https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks

One more thing name: App shouldn’t be inside components but it is its own property of a component.

you are introducing new variables in the update…

you want to do
this.ethaccount = “blah blah”
this.propOwner = “wah wah”;

not
var ethaccount = “blah blah”
var propOwner = “wah wah”;

1 Like

I keep getting this

image

As @keithn noticed you must in your script-block refer to the data properties with this so something like this (no pun intended):

methods: {
	update() {
		this.ethaccount = "0xAAAAAA123456789123456789123456789";
		console.log("ETH Account: " + this.ethaccount);

		this.propOwner = "0xPPPPPPPPPPP987654321987654321";
		console.log("Prop Account: " + this.propOwner);
	}

},
mounted() {
	this.update()
}

As you already must have notices, I know there-s no updateD method in Vue. I created the update method and call it at updated

Thanks. Thought that after declaring the variables at data() and using them in the template with {{}} I could start referring to them simply and wouldnt be any need for “this”. Using “this” as you suggested works.

Thanks for your suggestion but @keithn was enough, no need to reiterate it. Still, its better than your initial reply of “U R DOIN IT WRONG RTFM”.

Sorry that it sounded that way. It is hard sometimes with only a small bit of code and a question to know the level of knowledge of the person asking questions.

Sure no problem. I was also blocked from posting comments since I’m a recent user and could not state my problem clearer.

1 Like