Depends on where you want to modify that variable. For example if you want to do it from outside the component:
var v_eventosDiv = new Vue(...);
v_eventosDiv.variablex = 1;
If you want to modify it from within, for example when the component is mounted:
var v_eventosDiv = new Vue({
el: "#eventosDiv",
data: {
variablex:0,
eventos: []
},
mounted() {
this.variablex = 1;
}
});
The this
object is available in the computed
, methods
, lifecycle (as mounted), and watchers properties. Surely in other places too, which is very practical.
For example you can have a method that increases the variable one by one and another method that sets its value according to a parameter and this
is still there, against all odds:
var v_eventosDiv = new Vue({
el: "#eventosDiv",
data: {
variablex:0,
eventos: []
},
methods: {
aumentaX() {
this.variablex = this.variablex+1;
},
setearX(nuevoX) {
this.variablex = nuevoX;
}
}
});
From inside a template it is assumed that you always refer to the component, so you do not use this
but the property alone. For example:
<div id="eventosDiv">
<button @click="variablex = 2">Fijar variable x</button>
</div>
The same with the methods, you call them directly:
<div id="eventosDiv">
<button @click="aumentax()">Aumentar variable x</button>
</div>