Wie wird VUE zum Synchronisieren von Daten in DOM verwendet?

Question

Ich möchte Vue verwenden, um Daten vom ACE-Editor an das Frontend zu binden, das heißt, wenn ich etwas in den Editor eintippe, kann ich den Inhalt an anderen Stellen synchronisieren lassen.

Die Editorlogik ist einfach, editor.getValue(), um Inhalt zu erhalten und editor.on('input', function(){......}), um das 'Eingabe' Ereignis zu hören.

ATM Ich habe dies:

<div id="content"> 
    <div id="editor" v-ace-editor="{snippet: snippet , type: type}" style="height:400px; width:100%"></div> 
    <div>{{snippet}}</div> 
</div> 

<script> 


    Vue.directive('ace-editor', { 
     bind: function (el, binding, vnode) { 
      var editor = ace.edit(el); 
      editor.setValue(binding.value.snippet); 
      console.log(binding); 

      editor.on('input', function(){ 
       binding.value.snippet = editor.getValue(); 
      }) 

     } 
    }) 

    var vm = new Vue({ 
     el: '#content', 
     data: { 
      snippet : 'select * from ...', 
      type : 'hive' 
     } 
    }) 
</script> 

Idealfall, wenn ich in Code eingeben, innerhalb des Zuhörers ich den Wert snippet aktualisieren, während tatsächlich die {{snippet}} nicht ändert.

Kann mir jemand sagen, warum?

Answer 1

In Ordnung, scheint dies, weil ich das Snippet als eine Zeichenfolge übergeben, die eine neue Zeichenfolge erzeugt, so dass die alte nicht verfolgt wird. (nicht sicher)

Momentan ist meine Lösung, ein Objekt zu bauen und es funktioniert.

<div id="content"> 
    <div id="editor" v-ace-editor="{snippet: snippet}" style="height:400px; width:100%"></div> 
    <div>{{snippet.statement}}</div> 
</div> 

<script> 
    Vue.directive('ace-editor', { 
     bind: function (el, binding, vnode) { 
      var editor = ace.edit(el); 
      editor.setValue(binding.value.snippet.statement);   
      editor.on('input', function(){ 
       binding.value.snippet.statement = editor.getValue(); 
      }) 
     } 
    }) 

    var Snippet = function(){ 
     this.statement = "nothing"; 
     this.type = 'hive'; 
    } 

    var vm = new Vue({ 
     el: '#content', 
     data: { 
      snippet : new Snippet() 
     } 
    }) 
</script>