CODEWITHSUNDEEP
vue.js
Sylvain Attoumani
Sylvain Attoumani

Reputation: 1194

dynamic change doesn't work on vuejs input

i'm working on a vue file and have a form : 

<div class="input-group">
    <span class="input-group-addon">Montant</span>
    <input type="number" class="form-control"  v-model="amount" v-bind:value="pattern['value']"]>
</div>

my tab pattern is loaded like that : 

var request = $.ajax({
url: '{{ path ('home') }}promos/pattern/'+value,
})
request.success(function(data){
    if(data['pattern']==='yes'){
        this.pattern=data[0];
        alert(this.pattern['value']);
    }
})

and my instance :

var instance = new Vue({
el: "#General",
data: {
    [...]
    pattern: []
}

and the request is made evertyime i do 'action a'. I have the right alert with the value i want everytime i do 'action a' but the input stays at 0 and won't dynamically change.

Upvotes: 0

Views: 1709

Answers (2)

thanksd
thanksd

Reputation: 55664

Three things:

  1. The this in your success handler is not referencing the Vue instance. You need to set a reference outside the scope of the handler and use that instead.

  2. You can't chain a success callback to jQuery's ajax method in the first place. It's defined as a property in the parameter object passed to the call. (Maybe you copied code over wrong?)

  3. You need to get rid of v-model="amount" if you want the input's value to reflect the value bound by v-bind:value="pattern"

Your code should look like this:

let self = this; // set a reference to the Vue instance outside the callback scope

var request = $.ajax({
  url: '{{ path ('home') }}promos/pattern/'+value,
  success: function(data) { // success handler should go in the parameter object
    if (data['pattern']==='yes') {
      self.pattern=data[0];
      alert(this.pattern['value']);
    }
  }
})

Upvotes: 1

Hammerbot
Hammerbot

Reputation: 16364

Something is wrong with your code. Firstly, let's look at your ajax request:

request.success(function(data){
    if(data['pattern']==='yes'){
        this.pattern=data[0];
        alert(this.pattern['value']);
    }
})

What is the form of your data response? Because you are checking something with data['pattern'], and then you are trying to associate to this.pattern something that you call data[0]

Then, as stated in @thanksd answer, you are referencing a wrong this in your ajax callback, you need to create a self variable:

var self = this

var request = $.ajax({
    url: '{{ path ('home') }}promos/pattern/'+value,
})

request.success(function(data){
    if(data['pattern']==='yes'){
        self.pattern=data[0];
        alert(this.pattern['value']);
    }
})

Finally, you write:

<input type="number" class="form-control"  v-model="amount" v-bind:value="pattern['value']"]>

So there are a few mistakes here. Firstly, you have a ] at the end of the line that has nothing to do here.

Secondly, you are using v-bind:value, this is not something that is going to be responsive. If you want this input to be responsive, you should use v-model and set the value of amount when you want to change the input value.

Hope this helps

Upvotes: 1

Related Questions