Triggering vuejs on programatical change of element.

[garpur]

Hi,

We are having a slight problem using vuejs in an existing web.

The web has automatic validate/format functionality bound to all input fields (this is done by jQuery)

We are using vue for a part of the site to handle a multi step wizard, this works very well except that our
input field validation/format does not trigger a change in the value stored in vue :(

eg.
if (isvalid.valid) {
var v = _inputs.format($input._type, $input.val());
$input.val(v); // -- this changes the displayed value in the actual dom input field but NOT the value in vuejs
}

Is there any way to tell vue to re-read the input field or can we somehow access the vuejs value and set that manually?

cheers
garpur

[yyx990803]

You can trigger an input event (or change event if you are using lazy mode) on that input element to notify Vue.

[garpur]

That was what I thought :)

however adding

$input.change(); or
$input.trigger('change'); or
$input.trigger('input');

after the $input.val(v); line does nothing :(

I have a $watch on the field and it triggers on entry in the input-field but not on the change/trigger/...

PS
$input is a jquery object, do I need to access the dom directly ?

[yyx990803]

What version of Vue are you using? If jQuery is available globally, Vue should be able to pick up the trigger. Otherwise you might want to dispatch a native event instead of using $.trigger, which sometimes only trigger a jQuery event, but not a native one.

[garpur]

I am using 0.11.5

I have a watch:

  self.wizard.$watch('claim.tilkynnandi.kennitala', function(){
    console.log('kennitala', self.wizard.claim.tilkynnandi.kennitala);
  }, true);

which fires fine when the data is being entered into the form

console:
kennitala 1
kennitala 12
...
kennitala 1212121212sfdsfsd

then on exit from the field the validate/format kicks in.

    $input.on('blur.forms forceValidate', function(){
      var isvalid = _inputs.validate($input);

      if (isvalid.valid) {
        var v = _inputs.format($input._type, $input.val());
        $input.val(v);
        console.log('call change', v, $input);
        $input.change();

        var event; // The custom event that will be created

        if (document.createEvent) {
          event = document.createEvent('HTMLEvents');
          event.initEvent('change', true, true);
        } else {
          event = document.createEventObject();
          event.eventType = 'change';
        }

        event.eventName = 'change';

        if (document.createEvent) {
          input.dispatchEvent(event);
        } else {
          input.fireEvent('on' + event.eventType, event);
        }

      }
    });

I have a onChange on the inputfield which fires but the $watch does not appear to fire.

:(

[yyx990803]

Are you using lazy mode? If not you need to fire "input" events instead of "change".
Also, try upgrading to the latest version - I don't think 0.11.5 v-model supports jQuery events, you can try just using $input.trigger with the latest version.

[garpur]

Thank you,
0.11.10 and trigger('input') did the trick :):)

[silasrm]

@garpur how you solve this?

[ebisbe]

Under v1.0.26 the trigger('input') is not working and has to be changed to 'change'. Lazy is not needed

[csytan]

This method worked for me, using Vue 2.1.4:

var $input = $('.search').val('query');
var e = document.createEvent('HTMLEvents');
e.initEvent('input', true, true);
$input[0].dispatchEvent(e);

[SohanChy]

+1 to csytan's method.
Really useful when using simple things such as jquery image pickers.
This should be in the docs or something.

[estrica2000]

csytan: thank you

[FreeWebStyler]

In my case works shorted (for modern browsers):
$('#element_id')[0].dispatchEvent(new Event('input', { 'bubbles': true }))

[j-jonas]

in my case, this works:
this.$emit('input', value)