Depende de dónde quieras modificar esa variable. Por ejemplo si quisieras hacerlo desde fuera del componente:
var v_eventosDiv = new Vue(...);
v_eventosDiv.variablex = 1;
Si quieres modificarla desde dentro, por ejemplo cuando el componente se monta:
var v_eventosDiv = new Vue({
el: "#eventosDiv",
data: {
variablex:0,
eventos: []
},
mounted() {
this.variablex = 1;
}
});
El objeto this
está disponible en las propiedades computed
, en los methods
, en el lifecycle (como mounted) y en los watchers. Seguramente en otros lados también, lo cual es muy práctico.
Por ejemplo puedes tener un método que aumente la variable de uno en uno y otro método que fije su valor acorde a un parámetro y this
sigue ahí, contra viento y marea:
var v_eventosDiv = new Vue({
el: "#eventosDiv",
data: {
variablex:0,
eventos: []
},
methods: {
aumentaX() {
this.variablex = this.variablex+1;
},
setearX(nuevoX) {
this.variablex = nuevoX;
}
}
});
Desde dentro de un template se asume que siempre te refieres al componente, por lo que no usas this
sino la propiedad sola. Por ejemplo:
<div id="eventosDiv">
<button @click="variablex = 2">Fijar variable x</button>
</div>
Lo mismo con los métodos, los llamas directamente:
<div id="eventosDiv">
<button @click="aumentax()">Aumentar variable x</button>
</div>