ページ上のデータ入力とVue.jsとのやりとり

Question

特定のデータを入力するときにさまざまな操作が必要なデータ入力ページがあります。現在、データを操作するために、データの変更をサーバーに戻して画面を更新します。 アプリケーションは生産管理のために内部ネットワーク上で使用されているので、jsライブラリなどの時間やファイルサイズをリロードすることに問題はありません 私は再ロードせずにこれをすべて行うためにjavascriptを使用して実験したと思います。反応し、他の同様のフレームワーク/ライブラリ。 まず、ほとんどのデモンストレーションでは、ある要素にデータが入力され、直ちに別の要素にデータが更新されることが示されています。完全なデータだけが更新されるので、ここでは特に有用ではありません（このようなプロセスは便利です）。 私は、キーストロークを確認してから、Enterキーのデータを受け入れるか、要素のフォーカスを離し、エスケープキーを使用してデータを初期状態に戻すことを検討しました。データが受け入れられた場合、様々な異なるプロセスを開始する必要があります。 学習するのが簡単で、助けになるようなフレームワークはVue.jsでした。 以下の例では、パラメータを渡し、必要に応じて更新するという考え方で、データ入力ブロック（ラベルと入力要素）用のコンポーネントを作成しましたが、これを実装する方法は固執しています。 My Vueインスタンスがdivに接続されていて、自分のコンポーネントがグローバルコンポーネントです。私は

 <ms-pages></ms-pages> 

そして、私のコンポーネントを持っているのdiv内にある：

Vue.component('ms-pages', { 
template: '<div class="form-group row">' + 
      '<label class="col-xs-4 col-form-label">Pages</label>' + 
      '<div class="col-xs-8">' + 
       '<input v-model="mspages" class="form-control" type="text">' + 
      '</div>' + 
      '</div>', 
}) 

Vモデルはエラーをスロー私はVueのインスタンスでmspagesを定義しているが、私はまた、コンポーネントでそれを定義しようとしました。次に、Vueインスタンスでコンポーネントを定義しようとしましたが、これを行う方法が見つかりませんでした。 1つは、コンポーネントが入力されているデータの現在の状態を保存できると考えていますが、これはデータが入力要素にあるため意味がないようです。おそらく、このアプローチが間違っていると思うように導く。

私のjavascriptの知識は素晴らしいことではありませんが、私は自分の関数をさまざまな要素のキーストロークを聞くように書くことができますが、コードは長く複雑になるでしょう。 （私はPythonでこのようなことを行うほうがはるかに簡単です。）

何か助けてください。

Answer 1

VueがMVVMなので、ビューデータはモデルデータを反映する必要がありますが、データが更新されるたびに更新を起動する必要はありません。これにアプローチする通常の方法は、親にコンポーネントにpropを渡して、何らかのイベントが発生したときにコンポーネント$emitを更新させることです。

バスを

var bus= new Vue(); // A Vue instance to emit events onto 

コンポーネントテンプレート：

<template id="my-input"> 
    <div> 
    <input v-model="inputVal" v-on:keyup.enter="updateVal"/> 
    </div> 
</template> 

コンポーネントをここでは、入力したキーが押されたとき、あなたの値を更新コンポーネントを持っているかもしれない方法の例を示します。

Vue.component('my-input', { 
    template: '#my-input', 
    data(){ 
    return { 
     inputVal: "" 
    } 
    }, 
    props: ['initVal'], 
    created(){ 
    this.inputVal = this.initVal 
    }, 
    methods: { 
    updateVal(){ 
     bus.$emit('updateVal', this.inputVal); 
    } 
    } 
}); 

主なマークアップ：

<div id="app"> 
    <my-input :init-val="myInput"></my-input> 
    {{myInput}} 
</div> 

親Vueのインスタンス：

new Vue({ 
    el: '#app', 
    data: { 
    myInput: "foo" 
    }, 
    created(){ 
    bus.$on('updateVal', (updatedVal) =>{ 
     this.myInput = updatedVal; 
    }); 
    } 
}); 

私はあなたがVueのに新しく追加されたことを実現ので、私は何が起こっているかを打破するだろう：

最初にbus（ちょうど空のVueインスタンス）があり、$emitイベントがこれで、ここでbus.$emit('updateVal', this.inputVal);

我々が押されたキーを入力バスに「updateVal」と呼ばれるイベントを放出し、当社の親会社でそれを聞いている：この行に気づく、彼らのために聞く

bus.$on('updateVal', (updatedVal) =>{ 
    this.myInput = updatedVal; 
}); 

コンポーネントテンプレートを見ると、Enterキーを押したときにupdateValメソッドが呼び出され、イベントが発生するv-on:keyup.enter="updateVal"が使用されていることがわかります。

v-modelは、実際の更新を行い、イベントを発生させ、メイン変数を更新する場合にのみ、コンポーネント入力を同期させていることに気づくべきです。

これ以外の唯一の点は、コンポーネントに初期値を設定するためにpropを渡したことです。

ここにJSFiddleがあります。https://jsfiddle.net/k7cvq0f0/