How to convert value in DATA via METHOD (undefined to number)

user_11971160 0
Viewed 50

I have the following code https://codepen.io/Robovision/pen/rNMrRwL?editors=1010

It is not working right now. To make it work, I need to put 0 instead of undefined in data (because maybe later I want it to be string or number or something else). I want to have it undefined, and change it in methods. How can I do that?

I have tried:

this.output = this.value;
this.output += this.value;

and:

this.output += Number(this.value);

but neither works.

<html>
  <head>
    <title>Vue.js Demo</title>
    <script src="https://npmcdn.com/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p>
        Enter an amount in the input field and click the button to update to
        count
      </p>
      <input type="number" v-model.number="value" />
      <button type="button" v-on:click="counter">Click++</button>
      <p>{{ output }}</p>
      <p>{{ currentNumber }}</p>

      <button type="button">RESET</button>
    </div>

    <script>
      new Vue({
        el: "#app",
        data: {
          output: undefined,
          currentNumber: "Counter++",
          value: undefined,
        },
        methods: {
          counter: function () {
            this.currentNumber =
              "You have chosen to increment the counter by " + this.value;
            this.output += this.value;
            console.log("output - " + this.output);
            console.log("currentNumber - " + this.currentNumber);
            console.log("value - " + this.value);
          },
        },
      });
    </script>
  </body>
</html>
vuejs2 vue.js javascript
2 Answers

Use null instead of undefined, since null is coerced to 0 when adding to a Number, while adding undefined to a Number results in NaN.

new Vue({
  data: {
    output: null 
  },
  methods: {
    counter: function() {
      this.output += this.value  // ✅ value is Number, so output becomes Number
    }
  }
})

updated codepen

user_62771510

Try to initialize the values with numbers not with undefined to make the typing safe :

<html>
  <head>
    <title>Vue.js Demo</title>
    <script src="https://npmcdn.com/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p>
        Enter an amount in the input field and click the button to update to
        count
      </p>
      <input type="number" v-model.number="value" />
      <button type="button" v-on:click="counter">Click++</button>
      <p>{{ output }}</p>
      <p>{{ currentNumber }}</p>

      <button type="button">RESET</button>
    </div>

    <script>
      new Vue({
        el: "#app",
        data: {
          output: 0,
          currentNumber: "Counter++",
          value: 1,
        },
        methods: {
          counter: function () {
            this.currentNumber =
              "You have chosen to increment the counter by " + this.value;
            this.output += this.value;
            console.log("output - " + this.output);
            console.log("currentNumber - " + this.currentNumber);
            console.log("value - " + this.value);
          },
        },
      });
    </script>
  </body>
</html>

user_81728570
Related