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绑定。如果我们执行splice()的options一样， 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>

由于$index ，'b'选项的值不会变为1，而应为0。这可能不是bug，但这有点奇怪。

以下是此问题的实时演示：
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这可能是一个错误，因为selected options更改时selected保持为0，而dom应该反映了此更改，但我不确定。

现在，您可以尝试按照@defcc的建议添加selected道具，（请注意，在2.0中不建议使用道具/道具的胡须绑定，因此请改用:selected="$index == selected" ）
或者你也可以添加track-by道具<options> ，这可能做出VUE认为它是安全更新DOM选择的值。 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条评论

相关问题