VUEは、データに直接つながるがに更新されていないJS値によってHTMLオブジェクトを修正しました

ビジネスシーン

我々はVUEの書き込みコードを使用すると、我々は複数行テキストボックスコントロールを持っているデータの{PK}を挿入し、テキストボックス焦点位置にページ上のボタンをクリックします。

検出されたデータを挿入した後、このデータは、データに同期されず、直接キーボード入力を介して、データを変更することができます。

原因分析

JSによってデータ値の制御を変更した後、データを更新するトリガが存在しません。

ソリューション

Vue.component（ 'RX-TEXTAREA' 、{ 
    小道具：{ 
        値：[文字列、数値]、
        COLS：{ 
            タイプ：Number、
            デフォルト：60 
        }、
        列：{ 
            タイプ：Number、
            デフォルト：4 
        } 
    }、

    データ（） { 
        戻り{ 
            CURVAL：この.VALUE 
        } 
    }、
    テンプレート：フォーカス= 'フォーカス（イベント）' @「の<div> <TEXTAREAクラス= 'RX-TEXTAREA' Vモデル= 'CURVAL'：COLSの= 'COLS'：行= '行' @ブラー= '変更（イベント）'> </ TEXTAREA> </ div>」、
    方法：{ 
        変化：関数（E）{
             この。$（ '入力'発する、e.target.value）と、
        }、
        フォーカス：関数（E）{
             この $（ 'myfocus'を放出する。すなわち、）。
        } 
    }、
    時計：{ 
        CURVAL：関数（ヴァル、OLDVAL）{
             この $（ '入力'発する。この.curVal）を、
        }、
        値：関数（ヴァル、OLDVAL）{
             場合（！ヴァル= OLDVAL）{
                 この .curVal = この.VALUE。
            } 
        }  
    }
}）

テキストボックスがフォーカスを取得するとき、我々は我々が時間内に、このコントロールを使用し、myfocusコントロールを公開します。

< RX-TEXTAREAの    @myfocus = "getTextarea" Vモデル= "item.sql" > </ RX-TEXTAREA >

getTextareaの製造方法。

VAR curTextarea = nullを。
        関数  getTextarea（E）{ 
            curTextarea = e.target。
        }

ここでは、テキストボックスコントロール、投げる、我々はjsのコードで、このコントロールの値を変更することができます。

機能insertPK（）{ 
            $ .insertText（curTextarea、 "{} PK" ）
        }

私たちは、このコードによって焦点に我々のコードを挿入します。

ときに、テキストボックスは、データの同期を可能にする、入力イベント発行として、フォーカス制御の現在値を失います。