どの練習が良いですか：v-show（真/偽）かreplaceWith？ jQueryの

Question

対ヴュー例えば、私は次のように実装したかった、私は今、いくつかのvue.jsを学んだし、私はどの道を思っていた私があれば行く必要があります。

質問ですHTMLで<span></span>と書くことができます。style="display: none"と<textarea></textarea>を追加すると、vue.jsの助けを借りてEditボタンをクリックすると、代わりにspanを表示してtextareaを表示することができ、jQueryのreplaceWithメソッドを追加すると、そこにコードのいくつかの行を保存します。しかし、それが適切な方法であるかどうかは分かりません。

ページがまだ読み込まれている間、テキストエリアを隠すためにv-cloakも使用します。ボタンはこのディレクティブでクリックされたときにtrueにisEditingを設定するには、あなたの編集ボタンにイベントハンドラを追加します

data: { 
    isEditing: false 
} 

：あなたがそうのようなコンポーネントのdata属性にブール値を追加しますVue.jsで

Answer 1

：

0123：それは次の属性を持つように

<a href="#" @click="isEditing = true">...</a> 

は、最後にあなたのスパンに v-showディレクティブを追加します

<span v-show="!isEditing">...</span> 

これにより、編集モードでないときにスパンが表示されるようになります。スパンを非表示にして編集するときにテキストエリアを表示したいので、次のように編集するときは、テキストエリアにv-showを追加する必要があります。このアプローチを使用

は

<textarea v-show="isEditing">...</textarea> 

私はあなたがいずれかのAJAXや伝統的なPOSTを経由してフォームを送信していると仮定しておりますが、何のjQueryを必要としないので、フォームの入力が常に内になるように、私はこのケースでv-showを使用することをお勧めしますDOM。 v-showは、v-ifのようにDOMから完全に削除するのではなく、条件に基づいて要素にdisplay: noneを単純に適用します。

Answer 2

Vueを使用している場合は、jQueryプラグイン用のラッパーを作成している場合を除き、ほとんどの場合、Vue over jQueryを使用してください。

あなたの問題は、主にv-showがDOMにレンダリングされ、レンダリングされた要素が隠れているようです。 Vueでは、コンテンツを隠すための2つの基本的なオプションがあります。 v-showはDOMにレンダーし、display:noneを使用して非表示にします。 v-ifは単に要素をDOMにレンダリングしません。そうでないときshowSpanがtrueの場合

<span v-if="showSpan">I'm a span!</span> 
<textarea v-else></textarea> 

これは、スパンをレンダリングします、とtextarea：

は、だからあなたの場合には、あなたがこのような何かをしたい場合があります。

詳細については、hereのドキュメントを参照してください。