Change value of {{ vari }} on Vue
im just starting on vue js and ive been struggling for hours to do very simple things like change the value of {{vari}} using JS on the mounted function. Can somebody provide me an answer? I want the paragraph to display a different message from teste when it enters the mounted() function
<template>
<div class="teste">
<p>{{vari}}</p>
</div>
export default {
name: 'Schedual',
data: function() {
return {
vari: "teste",
}
},
mounted () {
//change value of {{vari}}
}
}
EDIT: thanks. why doesnt it work when i try to change it inside a function ?
mounted () {
atualiza();
function atualiza(){
this.vari = String("bla");
}
}
vue.js
asked Nov 23 '18 at 19:52
John DoeJohn Doe
144
add a comment |
im just starting on vue js and ive been struggling for hours to do very simple things like change the value of {{vari}} using JS on the mounted function. Can somebody provide me an answer? I want the paragraph to display a different message from teste when it enters the mounted() function
<template>
<div class="teste">
<p>{{vari}}</p>
</div>
export default {
name: 'Schedual',
data: function() {
return {
vari: "teste",
}
},
mounted () {
//change value of {{vari}}
}
}
EDIT: thanks. why doesnt it work when i try to change it inside a function ?
mounted () {
atualiza();
function atualiza(){
this.vari = String("bla");
}
}
vue.js
asked Nov 23 '18 at 19:52
John DoeJohn Doe
144
add a comment |
im just starting on vue js and ive been struggling for hours to do very simple things like change the value of {{vari}} using JS on the mounted function. Can somebody provide me an answer? I want the paragraph to display a different message from teste when it enters the mounted() function
<template>
<div class="teste">
<p>{{vari}}</p>
</div>
export default {
name: 'Schedual',
data: function() {
return {
vari: "teste",
}
},
mounted () {
//change value of {{vari}}
}
}
EDIT: thanks. why doesnt it work when i try to change it inside a function ?
mounted () {
atualiza();
function atualiza(){
this.vari = String("bla");
}
}
vue.js
asked Nov 23 '18 at 19:52
John DoeJohn Doe
144
im just starting on vue js and ive been struggling for hours to do very simple things like change the value of {{vari}} using JS on the mounted function. Can somebody provide me an answer? I want the paragraph to display a different message from teste when it enters the mounted() function
<template>
<div class="teste">
<p>{{vari}}</p>
</div>
export default {
name: 'Schedual',
data: function() {
return {
vari: "teste",
}
},
mounted () {
//change value of {{vari}}
}
}
EDIT: thanks. why doesnt it work when i try to change it inside a function ?
mounted () {
atualiza();
function atualiza(){
this.vari = String("bla");
}
}
vue.js
vue.js
asked Nov 23 '18 at 19:52
John DoeJohn Doe
144
asked Nov 23 '18 at 19:52
John DoeJohn Doe
144
edited Nov 23 '18 at 20:12
John Doe
asked Nov 23 '18 at 19:52
John DoeJohn Doe
144
asked Nov 23 '18 at 19:52
John DoeJohn Doe
144
asked Nov 23 '18 at 19:52
John DoeJohn Doe
144
144
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
<template>
<div class="teste">
<p>{{ vari }}</p>
</div>
</template>
export default {
name: 'Schedual',
data: function () {
return {
vari: 'teste'
}
},
mounted () {
this.vari = 'other value'
}
}
This:
mounted () {
function actualiza () {
this.vari = 'bla'
}
actualiza()
}
will not work, because actualiza() function will create own scope, own "this" object. You have two options. First, save "this" object to variable and use saved "this":
mounted () {
let self = this
function actualiza () {
self.vari = 'bla'
}
actualiza()
}
Second option, more common, is to use arrow function, instead of ordinary function, as these arrow functions doesn't have own "this" object:
mounted () {
const actualiza = () => {
this.vari = 'bla'
}
actualiza()
}
This will work also, but... Try to not create functions in functions. Create all functions as methods of Vue component. It will improve your code readability and you will have no more problems with context:
<template>
<div class="teste">
<p>{{ vari }}</p>
</div>
</template>
export default {
name: 'Schedual',
data: function () {
return {
vari: 'teste'
}
},
methods: {
actualiza () {
this.vari = 'bla'
}
},
mounted () {
this.actualiza()
}
}
answered Nov 23 '18 at 20:01
Vladislav LadickyVladislav Ladicky
55915
anyone knows why if i change the value inside a function it doesnt work anymore ?
– John Doe
Nov 23 '18 at 20:11
@John Doe I updated my answer.
– Vladislav Ladicky
Nov 23 '18 at 22:39
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53452275%2fchange-value-of-vari-on-vue%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
<template>
<div class="teste">
<p>{{ vari }}</p>
</div>
</template>
export default {
name: 'Schedual',
data: function () {
return {
vari: 'teste'
}
},
mounted () {
this.vari = 'other value'
}
}
This:
mounted () {
function actualiza () {
this.vari = 'bla'
}
actualiza()
}
will not work, because actualiza() function will create own scope, own "this" object. You have two options. First, save "this" object to variable and use saved "this":
mounted () {
let self = this
function actualiza () {
self.vari = 'bla'
}
actualiza()
}
Second option, more common, is to use arrow function, instead of ordinary function, as these arrow functions doesn't have own "this" object:
mounted () {
const actualiza = () => {
this.vari = 'bla'
}
actualiza()
}
This will work also, but... Try to not create functions in functions. Create all functions as methods of Vue component. It will improve your code readability and you will have no more problems with context:
<template>
<div class="teste">
<p>{{ vari }}</p>
</div>
</template>
export default {
name: 'Schedual',
data: function () {
return {
vari: 'teste'
}
},
methods: {
actualiza () {
this.vari = 'bla'
}
},
mounted () {
this.actualiza()
}
}
answered Nov 23 '18 at 20:01
Vladislav LadickyVladislav Ladicky
55915
anyone knows why if i change the value inside a function it doesnt work anymore ?
– John Doe
Nov 23 '18 at 20:11
@John Doe I updated my answer.
– Vladislav Ladicky
Nov 23 '18 at 22:39
add a comment |
<template>
<div class="teste">
<p>{{ vari }}</p>
</div>
</template>
export default {
name: 'Schedual',
data: function () {
return {
vari: 'teste'
}
},
mounted () {
this.vari = 'other value'
}
}
This:
mounted () {
function actualiza () {
this.vari = 'bla'
}
actualiza()
}
will not work, because actualiza() function will create own scope, own "this" object. You have two options. First, save "this" object to variable and use saved "this":
mounted () {
let self = this
function actualiza () {
self.vari = 'bla'
}
actualiza()
}
Second option, more common, is to use arrow function, instead of ordinary function, as these arrow functions doesn't have own "this" object:
mounted () {
const actualiza = () => {
this.vari = 'bla'
}
actualiza()
}
This will work also, but... Try to not create functions in functions. Create all functions as methods of Vue component. It will improve your code readability and you will have no more problems with context:
<template>
<div class="teste">
<p>{{ vari }}</p>
</div>
</template>
export default {
name: 'Schedual',
data: function () {
return {
vari: 'teste'
}
},
methods: {
actualiza () {
this.vari = 'bla'
}
},
mounted () {
this.actualiza()
}
}
answered Nov 23 '18 at 20:01
Vladislav LadickyVladislav Ladicky
55915
anyone knows why if i change the value inside a function it doesnt work anymore ?
– John Doe
Nov 23 '18 at 20:11
@John Doe I updated my answer.
– Vladislav Ladicky
Nov 23 '18 at 22:39
add a comment |
<template>
<div class="teste">
<p>{{ vari }}</p>
</div>
</template>
export default {
name: 'Schedual',
data: function () {
return {
vari: 'teste'
}
},
mounted () {
this.vari = 'other value'
}
}
This:
mounted () {
function actualiza () {
this.vari = 'bla'
}
actualiza()
}
will not work, because actualiza() function will create own scope, own "this" object. You have two options. First, save "this" object to variable and use saved "this":
mounted () {
let self = this
function actualiza () {
self.vari = 'bla'
}
actualiza()
}
Second option, more common, is to use arrow function, instead of ordinary function, as these arrow functions doesn't have own "this" object:
mounted () {
const actualiza = () => {
this.vari = 'bla'
}
actualiza()
}
This will work also, but... Try to not create functions in functions. Create all functions as methods of Vue component. It will improve your code readability and you will have no more problems with context:
<template>
<div class="teste">
<p>{{ vari }}</p>
</div>
</template>
export default {
name: 'Schedual',
data: function () {
return {
vari: 'teste'
}
},
methods: {
actualiza () {
this.vari = 'bla'
}
},
mounted () {
this.actualiza()
}
}
answered Nov 23 '18 at 20:01
Vladislav LadickyVladislav Ladicky
55915
<template>
<div class="teste">
<p>{{ vari }}</p>
</div>
</template>
export default {
name: 'Schedual',
data: function () {
return {
vari: 'teste'
}
},
mounted () {
this.vari = 'other value'
}
}
This:
mounted () {
function actualiza () {
this.vari = 'bla'
}
actualiza()
}
will not work, because actualiza() function will create own scope, own "this" object. You have two options. First, save "this" object to variable and use saved "this":
mounted () {
let self = this
function actualiza () {
self.vari = 'bla'
}
actualiza()
}
Second option, more common, is to use arrow function, instead of ordinary function, as these arrow functions doesn't have own "this" object:
mounted () {
const actualiza = () => {
this.vari = 'bla'
}
actualiza()
}
This will work also, but... Try to not create functions in functions. Create all functions as methods of Vue component. It will improve your code readability and you will have no more problems with context:
<template>
<div class="teste">
<p>{{ vari }}</p>
</div>
</template>
export default {
name: 'Schedual',
data: function () {
return {
vari: 'teste'
}
},
methods: {
actualiza () {
this.vari = 'bla'
}
},
mounted () {
this.actualiza()
}
}
answered Nov 23 '18 at 20:01
Vladislav LadickyVladislav Ladicky
55915
edited Nov 23 '18 at 22:37
answered Nov 23 '18 at 20:01
Vladislav LadickyVladislav Ladicky
55915
answered Nov 23 '18 at 20:01
Vladislav LadickyVladislav Ladicky
55915
answered Nov 23 '18 at 20:01
Vladislav LadickyVladislav Ladicky
55915
55915
anyone knows why if i change the value inside a function it doesnt work anymore ?
– John Doe
Nov 23 '18 at 20:11
@John Doe I updated my answer.
– Vladislav Ladicky
Nov 23 '18 at 22:39
add a comment |
anyone knows why if i change the value inside a function it doesnt work anymore ?
– John Doe
Nov 23 '18 at 20:11
@John Doe I updated my answer.
– Vladislav Ladicky
Nov 23 '18 at 22:39
anyone knows why if i change the value inside a function it doesnt work anymore ?
– John Doe
Nov 23 '18 at 20:11
anyone knows why if i change the value inside a function it doesnt work anymore ?
– John Doe
Nov 23 '18 at 20:11
@John Doe I updated my answer.
– Vladislav Ladicky
Nov 23 '18 at 22:39
@John Doe I updated my answer.
– Vladislav Ladicky
Nov 23 '18 at 22:39
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53452275%2fchange-value-of-vari-on-vue%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
