Vue/Jquery überschreiben bidirektionales Datenbidirektional

Question

Ich habe eine Eingabe in einer Vue.js-Komponente, die ich mithilfe von jquery überschreiben muss. Ich muss eine Eingabe mit einer E-Mail-Adresse mit jQuery füllen. Wenn ich die E-Mail-Adresse eintrage, füllt jQuery die E-Mail-Eingabe. Aber wenn ich V-Modell verwende, wird es nicht aktualisiert. Gibt es einen Workaround dafür?

Hier ist ein funktionierendes jsfiddle Beispiel https://jsfiddle.net/s3b7f1ah/

Hier ist der HTML-

<button id="push-email">Fill in email</button> 
<br><br> 
<div id="root"> 
    <label for="name">Name</label> 
    <input type="text" name="name" id="name" v-model="name"> 

    <label for="name">Email</label> 
    <input type="text" name="email" id="email" v-model="email"> 

    <br><br> 
    <button @click="proceed">next</button> 
    <br><br> 
    {{ name }} <br> 
    {{ email }} 
</div> 

Hier ist die jQuery

//jQuery 
$(function() { 
    $('#push-email').click(function() { 
    $('#email').val("john@example.com"); 
    }); 
}); 

Und hier ist die vue Komponente

//Vue 
var app = new Vue({ 
    el: '#root', 
    data: { 
    name: '', 
    email: '', 
    }, 
    methods: { 
    proceed: function() { 

    } 
    }, 
}); 

https://jsfiddle.net/s3b7f1ah/

Answer 1

Der beste Weg, wenn Sie wirklich ein Ereignis-Listener in Ihrem vue Modell stecken wäre hinzuzufügen:

var app = new Vue({ 
    el: '#root', 
    data: { 
    name: '', 
    email: '', 
    }, 
    methods: { 
    proceed: function() { 

    }, 
    foo : function(event){ 
     this.email = event.target.value; 
    } 
    }, 
}); 

<input @change="foo" type="text" name="email" id="email" v-model="email"> 

Auf diese Weise müssen Sie nicht die jQuery-Logik ändern.

Aktualisiert jsfiddle: https://jsfiddle.net/s3b7f1ah/1/

Answer 2

Ändern Sie den jquery-Code, um stattdessen den Modellwert festzulegen, der dann im Eingabefeld angezeigt wird.

//jQuery 
$(function() { 
     $('#push-email').click(function() { 
      app.email = 'john@example.com'; 
     }); 
}); 

Answer 3

Sie könnten eine Richtlinie schreiben die jQuery-Änderung (solange jQuery eine gibt) zu behandeln. Wenn jQuery nur den Wert festlegt, ohne ein Ereignis change auszulösen, wird es nie angezeigt. Leihen Code aus Axnyff:

//Vue 
 
var app = new Vue({ 
 
    el: '#root', 
 
    data: { 
 
    name: '', 
 
    email: '', 
 
    }, 
 
    methods: { 
 
    proceed: function() { 
 

 
    }, 
 
    foo: function(event) { 
 
     this.email = event.target.value; 
 
    } 
 
    }, 
 
    directives: { 
 
    onJqueryChange: { 
 
     bind(el, binding) { 
 
     $(el).change(binding.value); 
 
     } 
 
    } 
 
    } 
 
}); 
 

 

 
//Jquery 
 
$(function() { 
 
    $('#push-email').click(function() { 
 
    $('#email').val("john@example.com").change(); 
 
    }); 
 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="push-email">Fill in email</button> 
 
<br> 
 
<br> 
 
<div id="root"> 
 
    <label for="name">Name</label> 
 
    <input type="text" name="name" id="name" v-model="name"> 
 

 
    <label for="name">Email</label> 
 
    <input v-on-jquery-change="foo" type="text" name="email" id="email" v-model="email"> 
 
    <br> 
 
    <br> 
 
    <button @click="proceed">next</button> 
 
    <br> 
 
    <br> {{ name }} 
 
    <br> {{ email }} 
 
</div>