vue js modication of a variable

1

I would like to know how I modify the value of a variable,

var v_eventosDiv = new Vue({
    el: "#eventosDiv",
    data: {
      variablex:0,
      eventos: []
    }
  });

I would like to know if I can modify the variablex when I call it in a condition or something like that.

    
asked by Cristian Villalba 16.11.2018 в 23:13
source

1 answer

0

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>
    
answered by 17.11.2018 в 00:07