[Vuejs]-Dynamic change doesn't work on vuejs input

by

1👍

✅

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

👤Hammerbot

1👍

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']);
    }
  }
})
👤thanksd

Leave a comment