Vue: <select>splice（）の後で、配列にバインドされたパフォーマンスが正しくない</select>

作成日 2016年09月30日 · 6コメント · ソース: vuejs/vue

次のコードについて考えてみます。

<div id="demo">
  <select v-model="selected" number>
    <option v-for="opt in options" :value="$index" number>{{opt}}</option>
  </select>
</div>

<select>では、各オプション値は$indexバインドされます。 optionsでsplice()を実行すると、 options.splice(0,1) 、 $indexはオプションと正しく同期されません。

たとえば、 options=['a','b']とすると、レンダリングされたHTMLは次のようになります（実際にはそうではありません）。

<div id="demo">
  <select selectedIndex="0">
    <option value="0">a</option>
    <option value="1">b</option>
  </select>
</div>

options.splice(0,1)後、 options=['b']後に、レンダリングされたHTMLは次のようになります。

<div id="demo">
  <select selectedIndex="0">
    <option value="1">b</option>
  </select>
</div>

'b'オプションの値は1になりません。これは、 $indexために0になるはずです。これはバグではないかもしれませんが、これはちょっと奇妙です。

以下は、この問題のライブデモです。
https://jsfiddle.net/peteranny/trwp98g9/4/

bug

ソース

peteranny

最も参考になるコメント

2.0でテストされ、期待どおりに機能しました： https ：
だから私はこれを1.xのバグとしてマークしています

fnlctrl 2016年10月02日

👍2

全てのコメント6件

選択した属性をテンプレートに追加するだけですselected="{{$index == selected}}"

ここでデモを更新しますhttps://jsfiddle.net/trwp98g9/5/

defcc 2016年10月01日

👍1

@peteranny予想される動作を明確にできますか？

options.splice（0,1）の後、options = ['b']ですが、レンダリングされたHTMLは次のようになります。
<option value="1">b</option>

ここから提供したものと同じ結果が得られません：
[削除]をクリックする前に：
before

クリック後：
after

'b'オプションの値は1になりません。これは、$ indexのために0になるはずです。

それで、それは正確に何になるべきですか？ 'b'の値は、クリック前は1でしたが、クリック後は0になりました。

fnlctrl 2016年10月01日

@fnlctrlええと、テストしていただきありがとうございます。私は間違った質問をしたと思います。
テストによると、「b」の値はクリック後に0になりました。

私の本当の質問は、「b」の値が0になったのに、なぜ<select>が「b」を選択しなかったのかということです。
画像に見られるように、 <select>はオプションをまったく選択しません<select>は値0のオプションを選択する必要があります。
（そのため、「b」の値は変わらないと誤解しました。）

peteranny 2016年10月02日

@peteranny options変更されている間selectedが0のままであり、domがこの変更を反映することになっているため、バグの可能性がありますが、よくわかりません。

今のところ、 @ defccが提案したようにselected小道具を追加してみることができます（小道具/属性の口ひげバインディングは2.0で非推奨になるため、代わりに:selected="$index == selected"を使用してください）
または、 track-by小道具を<options>に追加することもできます。これにより、選択した値をdomで更新しても安全であるとvueに思わせることができます。 https://jsfiddle.net/74ncq90w/

fnlctrl 2016年10月02日

👍2

2.0でテストされ、期待どおりに機能しました： https ：
だから私はこれを1.xのバグとしてマークしています

fnlctrl 2016年10月02日

👍2

1.xはサポート終了となり、重要なセキュリティパッチのみを受け取るため、1.xの問題をクローズします。

yyx990803 2018年04月17日

このページは役に立ちましたか？

0 / 5 - 0 評価

Vue: <select>splice（）の後で、配列にバインドされたパフォーマンスが正しくない</select>

最も参考になるコメント

全てのコメント6件

関連する問題