[Vuejs]-Getting another element through a method thats related to the current operation

by

0👍

I have created one javascript function for increment and decrement value by 1.

HTML

<div class="form-group">
    <span class="input-number-decrement" v-on:click="inc_dec('dec')">-</span>
    <input class="input-number form-control" name="pack1" id="pack1" type="text" value="0" min="0">
    <span class="input-number-increment" v-on:click="inc_dec('inc')">+</span>            
</div>

Javascript

<script type="text/javascript">
    function inc_dec(flag){
        var pack1 = document.getElementById('pack1');
        var inc_dec_by = 1;
        if(flag=='inc'){
            pack1.value = parseInt(pack1.value)+inc_dec_by;
        }
        if(flag=='dec'){
            pack1.value = parseInt(pack1.value)-inc_dec_by;
        }
    }
</script>

0👍

I am assuming above code is a vue component.

<div class="form-group">
 <span class="input-number-decrement" v-on:click="decrement()">–</span>
 <inputn v-model="value" class="input-number form-control" name="pack1" id="pack1" type="text" value="0" min="0">
 <span class="input-number-increment" v-on:click="increment()">+</span>            
</div>

In the script define a variable to hold the value.Then manipulate values using defined methods

<script>
export default{
 data: {
    value
  },
  methods: {
    decrement: function (event) {
    },
    increment: function (event) {
    }
  }
}
</script>

Leave a comment