button function to sum of two numbers using Vuejs

Question

I'm trying to display the sum of two numbers using VueJs, but I want to develop this code so it would get the sum when the user clicks the button. please help me!

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
  <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
</head>
<body>
  
<div id="app">
            Enter number 1:<input type="number" name="number1" v-model="number1">
            <p></p>
            Enter number 2:<input type="number" name="number2" v-model="number2">
            <p></p>
            <hr>
            <p>TOTAL:{{ result }}</p>
</div>

<script>
  new Vue({
  el: '#app',
  data: {
    number1: 0,
    number2: 0,
  },
  computed: {
    result() {
        return parseInt(this.number1) + parseInt(this.number2);

    }
  }
});
</script>
</body>
</html>

Does this answer your question? Event Listener in Vue.js

Mohammad Hossein Dolatabadi
– Mohammad Hossein Dolatabadi

2022-01-01 04:39:20 +00:00
Commented Jan 1, 2022 at 4:39 — Mohammad Hossein Dolatabadi
– Mohammad Hossein Dolatabadi, Commented Jan 1, 2022 at 4:39

Nilesh Patel · Accepted Answer · 2022-01-01 04:33:47Z

2

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
  <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
</head>
<body>
  
<div id="app">
            Enter number 1:<input type="number" name="number1" v-model="number1">
            <p></p>
            Enter number 2:<input type="number" name="number2" v-model="number2">
            <p></p>
<button @click="add()">Sum</button>
            <hr>
            <p>TOTAL:{{ result }}</p>
</div>

<script>
  new Vue({
  el: '#app',
  data: {
    number1: 0,
    number2: 0,
    result:0
  },
  methods: {
    add() {
        this.result= parseInt(this.number1) + parseInt(this.number2);

    }
  }
});
</script>
</body>
</html>

answered Jan 1, 2022 at 4:33

Nilesh Patel

3,3079 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kien Nguyen · Accepted Answer · 2022-01-01 04:32:18Z

2

You can add a "Calculate" button and use v-on directive to listen to click event:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
</head>
<body>

<div id="app">
    Enter number 1:<input type="number" name="number1" v-model="number1">
    <p></p>
    Enter number 2:<input type="number" name="number2" v-model="number2">
    <p></p>
    <hr>
    <button v-on:click="result = parseInt(number1) + parseInt(number2)">Calculate</button>
    <p>TOTAL:{{ result }}</p>
</div>

<script>
new Vue({
    el: '#app',
    data: {
        number1: 0,
        number2: 0,
        result: null,
    },
});
</script>
</body>
</html>

answered Jan 1, 2022 at 4:32

Kien Nguyen

2,7212 gold badges9 silver badges25 bronze badges

Collectives™ on Stack Overflow

button function to sum of two numbers using Vuejs

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related