Здравствуй.
Я столкнулся с очень странной проблемой с флажками.
<template lang="html">
<div>
<div v-for="(item,key) in test">
<input type="checkbox" v-model="item.active">
</div>
</div>
</template>
<script>
window.T = [{
active: false
}, {
active: false
}];
export default {
data() {
return {
test: T
}
},
methods: {}
}
</script>
Сначала я набрал в консоли T[0].active=true
, и первый флажок был установлен нормально, но когда я обновил браузер, я вручную установил первый флажок, а затем набрал T[0].active=false
. В это время Первый флажок не будет снят, но второй все еще можно установить в обычном режиме (true / false) через консоль.
Пробовал 2.1.0 и 2.1.8, результаты одинаковые, хром версия 54.0.2824.2
Чтобы отображать элементы dom с сохранением состояния (ввод и т. Д.) С помощью v-for, вам необходимо добавить ключевой атрибут, чтобы гарантировать правильность состояния.
https://cn.vuejs.org/v2/guide/list.html#key
Этот режим по умолчанию действителен, но применяется только к выходным данным рендеринга списка, который не зависит от состояния подкомпонента или временного состояния DOM (например: входные значения формы).
@fnlctrl Спасибо за ваш ответ, но, возможно, я не описал его четко. Я добавил ключ, как вы сказали, и результат тот же. Есть еще одно доказательство того, что я сказал, что в chrome 55.0.2883.95 под Mac, Независимо от того, добавлен ключ или нет, его можно установить как обычно.
Не могу воспроизвести. https://jsfiddle.net/1b7cux60/
@fnlctrl щелкните первый за 3 секунды, чтобы сделать его выбранным состоянием
https://jsfiddle.net/1b7cux60/5/
Продолжайте тестировать, проблема действительно есть
https://jsfiddle.net/Lu3o86wt/
Статус флажка последнего клика будет неправильным
Последний нажатый <input>
останется в неправильном состоянии
Хром
Край
@fnlctrl На самом деле это не ошибка. Это происходит из-за того, что флажок все еще установлен, мы не обновляем его специально. По крайней мере, это имеет смысл для ввода текста, мы можем пересмотреть его для других вводов
Это было исправлено через # 4639.
Самый полезный комментарий
Это было исправлено через # 4639.