web-dev-qa-db-ja.com

vue.jsでv-forとv-ifが一緒に機能しない

フォームを使用してテキストを送信し、vueテキストを表示する列を指定する2つのオプションを使用します。 、列1にテキストが表示されます。

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

<input type="radio" id="col1" value="one" v-model="newInfo.col">
<input type="radio" id="col2" value="two" v-model="newInfo.col">

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

次に、テンプレートでこの配列を2回繰り返します。 info.col === "one"に1回、他の繰り返しはinfo.col === "two"の場合にのみ表示されます。私はv-forとv-ifを一緒に使用していますが、vue.jsのドキュメントではそれをしても大丈夫です、

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

<div class="row">
            <div class="col-md-6">
                <ol>
                    <li v-for="item in info" v-if="item.col==='one'">
                        text: {{ item.text }}, col: {{ item.col }}
                    </li>
                </ol>
            </div>
            <div class="col-md-6">
                <ol>
                    <li v-for="item in info" v-if="!item.col==='two'">
                        text: {{ item.text }}, col: {{ item.col }}
                    </li>
                </ol>
            </div>
        </div>

完全なvue.jsコードはgithubにあります here

そして、gh-pagesで実行されています here

vue.jsradio-buttonv-for
7
Shane G

削除する !ならばv-if="item.col==='two'"

この方法でより良いことができます（一度だけ繰り返す）：

<div class="row" v-for="item in info">
            <div class="col-md-6">
                <ol>
                    <li v-if="item.col==='one'">
                        text: {{ item.text }}, col: {{ item.col }}
                    </li>
                </ol>
            </div>
            <div class="col-md-6">
                <ol>
                    <li v-if="item.col==='two'">
                        text: {{ item.text }}, col: {{ item.col }}
                    </li>
                </ol>
            </div>
        </div>
2
vpalade

Computed Properties のパワーを使用しないのはなぜですか？

computed: {
  infoOne: function () {
    return this.info.filter(i => i.col === 'one')
  },
  infoTwo: function () {
    return this.info.filter(i => i.col === 'two')
  }
}

次に、各リストで、チェックする必要なく、それぞれのプロパティを繰り返します。例

<ol>
   <li v-for="item in infoOne">{{item}}</li>
</ol>

ここで働く フィドル

8
DobleL

2番目のチェックは_!item.col==='two'_であり、not equal 'two'の場合にのみ表示されます。

編集：！ not演算子は、おそらく===よりも緊密にバインドするため、常にfalseを返します。ブラケットを追加して、アプリケーションの順序を制御します。おそらく、純粋なJavaScript表現ではなく、ちょっとしたVue私が使い慣れていない魔法かもしれません。

その感嘆符を削除したいと思います。または、「1」以外の値を表示するように!(item.col==='one')にする。

1
Raith

同じ要素でv-ifとv-forを使用することはお勧めしません！

0
DragoRoff