問題タブ [v-for]

インライン要素で v-for を使用して配列 (またはオブジェクト) をループすると、vuejs はその要素の周りに空白をレンダリングしません。

たとえば、次の html があります。

そしてこのJavaScript：

Vue がこれをレンダリングすると、リンク間のスペースが削除されます。この jsfiddleを参照してください。

どうすればこの動作に対抗できますか?

テキストを送信するためにフォームが使用され、テキストを表示する列を vue に指示する 2 つのオプションが使用されます。col2 ラジオ ボタンがチェックされている場合、送信されたテキストは列 2 に表示されます。

値 'one' または 'two' を newInfo.option に渡す必要がある 2 つのラジオ ボタンがあります。submnit では、メソッドがフォーム データを配列 'info' にプッシュしました。

このデータは配列「情報」に正しくプッシュされており、それを反復処理できます。配列を反復処理できるため、これが機能していることがわかります。console.log に含まれるすべてのデータです。送信されたすべてのフォーム データがそこにあります。

次に、テンプレートでこの配列を 2 回繰り返し処理します。info.col==="one" に対して 1 回、もう 1 つの反復は、info.col==="two" の場合にのみ表示されます。v-for と v-if を一緒に使用していますが、vue.js のドキュメントには問題ないと書かれています。

https://vuejs.org/v2/guide/conditional.html#v-if-with-v-for

完全な vue.js コードは、こちらの github にあります

そして、ここのghページで実行されています