vuejs 2 v-for：キーが機能していない、htmlが置き換えられていますか？

Question

私はV-ため

にいくつかのHTMLをレンダリングしています。しかし、毎回私がデータを変更、すべての私のhtmlを交換します（入力フィールドがその値を失う）

私が与えてみました：キーすべての種類を異なる値

は私だけ、私はこれで少しプレイしていた

http://jsbin.com/jomuzexihu/1/edit?html,js,output

Answer 1

V2で、VUEのV1でこの問題を持っていなかったし、Vueのは再レンダリングしないことが表示されます<input />を使用する場合はリスト全体を、componentを使用する場合はv-htmlを使用してください。

https://jsfiddle.net/cxataxcf/

キーリストが並べ替えされていないので、あなたの問題は:keyではなくv-htmlを行うことはないので、実際に、ここでは必要ありません。比較のためHERESにフィドル。ドキュメントの内容はv-htmlとなります。

コンテンツはプレーンHTMLとして挿入されます。データバインディングは無視されます。 Vueは文字列ベースのテンプレートエンジンではないので、テンプレートパーシャルを作成するためにv-htmlを使用することはできません。その代わりに、UIの再利用と構成の基本単位としてコンポーネントが優先されます。

だから、これはどこに問題があるのでしょうか。

それは、これがv-htmlのために予想される動作ですが、Vueの2.0は、はるかに重くVUE 1.xのよりコンポーネントに焦点を当てているとv-htmlを使用することをお勧めしていないようかどうかを確認するためのVueのgithubのページで問題を提起する価値があるかもしれません、代わりにコンポーネントを使用するようにコードを再調整する必要があるかもしれません。

編集

この問題に対する解決策は、単に、コンポーネントのコードをラップし、小道具としてHTMLを渡すことである。

Vue.component('unknown-html', { 
    props: { 
    html: "" 
    }, 
    template: '<div><div v-html="html"></div>' 
}) 

マークアップ：

<unknown-html :html="thing.html"></unknown-html> 

Viewモデル：

var app = new Vue({ 
    el: '#app', 
    data: { 
    numInputs: 1, 
    stuff: [{ 
     'html':'<input />' 
    }, { 
     'html':'<button>Foo</button>' 
    }] 
    } 
}) 

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

Answer 2

生のHTMLを直接DOMに注入しようとしています。おそらく以前のバージョンのVue.jsでも可能でしたが、間違いなく推奨される方法です。

代わりにオブジェクトの配列を有しており、このjsFiddleに示すようにHTMLにそれを結合することができる：https://jsfiddle.net/43xz6xqz/

Vue.jsバージョン：上記の例では2.0.3

、VUE。jsはinput要素を作成し、v-modelを使用してこれらの要素をオブジェクト値にバインドします。

これらの値を抽出するには、サンプルコードに示すようにcomputedプロパティを使用します。

Answer 3

キーが変更されていない場合、Vueはdomを再レンダリングしませんが、directiveを介してデータインポートを更新します。入力要素がディレクティブ（v-html）物が変わるたびに再レンダリングされます。コンポーネント内の文字列テンプレートにincommingのHTMLを使用する、@craig_hの例の場合にようにVUEのために

は、文字列テンプレート・エンジンではなく、DOMに基づくテンプレート：

Vue.component('unknown-html', { 
    props: { 
    html: "" 
    }, 
    template: '<div><div v-html="html"></div>' 
}) 

view: 
<unknown-html :html="thing.html"></unknown-html> 

したがって、stuffが変更された場合、vueは文字列テンプレートエンジンではないため、文字列のdeclareを再レンダリングしません。