dynamic change doesn't work on vuejs input

Question

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.

v-model="amount" rewrites whatever value you specify to amount value. Your v-model usage is wrong. 1) Where is your amount set? 2) Use either v-model OR :value, not both. — Egor Stambakio
– Egor Stambakio, Commented Jun 2, 2017 at 12:03
I guess pattern is an object. You should use this.set(obj, prop, value) in order to make it reactive if properties are not defined in data: vuejs.org/v2/api/#vm-set If it doesn't help - provide a workable fiddle with dummy fetching etc. — Egor Stambakio
– Egor Stambakio, Commented Jun 2, 2017 at 12:14
but my alert(this.pattern['value']) works great, so that mean pattern is correctly setting — Sylvain Attoumani
– Sylvain Attoumani, Commented Jun 2, 2017 at 12:19

Hammerbot · Accepted Answer · 2017-06-02 12:31:45Z

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

answered Jun 2, 2017 at 12:31

Hammerbot

16.5k13 gold badges67 silver badges109 bronze badges

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

3 Comments

thanksd Over a year ago

Technically, v-bind:value would still be responsive to changes in the pattern property. You mean that changes to the input's value wouldn't update the pattern property.

Hammerbot Over a year ago

mmm I don't know, when I test it on a fiddle, the value is not responsive: jsfiddle.net/8dvggzhc Except if you get rid of the v-model

thanksd Over a year ago

Yeah, without v-model is what I mean. Since v-model is just shorthand for v-bind:value="something" v-on:input="something = $event.target.value", it's overriding the additional v-bind is his example.

thanksd · Accepted Answer · 2017-06-02 12:37:35Z

Three things:

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.
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?)
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']);
    }
  }
})

Collectives™ on Stack Overflow

dynamic change doesn't work on vuejs input

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related