Набор часов Vue2 не работает
У меня есть простое приложение Vue, которое должно добавлять число в набор, когда вы нажимаете кнопку «Добавить в набор» -
https://codepen.io/jerryji/pen/mKqNvm?editors=1011
<div id = "app">
<input type = "number" placeholder = "enter a number" v-model = "n">
<button type = "button" @click.prevent = "addToSet()">Add to Set</button>
</div>
new Vue({
el: "#app",
data: {
n: null,
nSet: new Set()
},
methods: {
addToSet: function() {
this.nSet.add(this.n);
console.info(this.n + ' added to Set');
}
},
watch: {
nSet: function (newVal, oldVal) {
console.info(newVal);
}
}
});
Почему смотреть ничего не регистрирует в консоли?
Потому что Set требуется в реальном коде. Кодовое слово - это просто урезанный пример. Но я понял вашу точку зрения. Спасибо
Интересно, не реагируют ли наборы в компонентах Vue.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Сохранение и повторное использование Set с использованием метода .values() на Set сработало для меня, и мне не пришлось использовать $forceUpdate.
Однако использование $forceUpdate может быть более разумным путем. В некоторых случаях использования в прошлом я обнаружил, что принудительное обновление компонентов было проблематичным.
new Vue({
el: "#app",
data: {
n: null,
nSet: new Set()
},
methods: {
addToSet: function() {
let set = this.nSet;
let newSet = set.add(this.n)
this.nSet = new Set(newSet.values())
}
},
watch: {
nSet: function (newVal, oldVal) {
console.info('newVal', ...newVal);
}
}
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id = "app">
<input type = "number" placeholder = "enter a number" v-model = "n">
<button type = "button" @click.prevent = "addToSet()">Add to Set</button>
<p>n = {{ n }}</p>
</div>Vue добавляет специальная обработка массивов, но не для наборов. В результате Vue не обнаруживает автоматически изменений в членстве в Set. Вы можете принудительно обновить
this.nSet.add(this.n);
this.$forceUpdate();
Это потому, что Vue не поддерживает Set, Map, WeakSet и WeakMap. Причина в том, что браузеры плохо поддерживают эти структуры. Особенно WeakMap. Но ... Они решили поддержать эти структуры. Возможно, в версии 3 - когда они решат отказаться от поддержки старых браузеров. Итак, сейчас используйте объект, добавьте свойства с помощью Vue.$set() и следите за изменениями с помощью deep: true.
Есть ли причина, по которой вы используете
SetвместоArray? Если единственной целью является обеспечение уникальности, вы можете легко проверить с помощьюindexOf, прежде чем нажимать. AFAIK не существует простого способа следить за изменениямиSet.