CODEWITHSUNDEEP
javascriptvuejs2
mafortis
mafortis

Reputation: 7128

Vuejs returning data while user typing

I have numeric input field and I'd like to return some results while user is filling the input field.

code

<input type="number" name="bid" v-model="bid.bid" class="form-control">

Logic

  1. Users starts to type numbers in field above
  2. Will get that number -%10 below it
  3. Returned number will change consistently when user changes the input

example:

one

PS: The reason that I didn't share any watch, mounted, etc. code is because i don't have any code for this question.

any idea?

Upvotes: 0

Views: 80

Answers (3)

Thomas Lombart
Thomas Lombart

Reputation: 433

You can use a computed property for that :

new Vue({
  el: "#app",
  data: {
    bid: 1000
  },
  computed: {
    reducedBid() {
      return this.bid * 0.9
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="number" name="bid" v-model="bid" class="form-control">
  <p>You get {{ reducedBid }}</p>
</div>

Here is a resource on computed properties.

Hope it helps!

Upvotes: 0

menestrello
menestrello

Reputation: 181

This is a very simple snippet. Hope it would be useful.

var app = new Vue({
  el: '#app',
  data: {
    bid: 0
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  your bid: <input type="number" name="bid" v-model.number="bid" class="form-control">
  <br>
  your result: <span>{{bid*0.9}}</span>
</div>

Upvotes: 0

B. Fleming
B. Fleming

Reputation: 7220

You can insert the value directly into the page pretty easily using interpolation:

<div>You get: {{bid.bid * 0.9}}</div>

Upvotes: 1

Related Questions