Набор часов Vue2 не работает

Question

Набор часов Vue2 не работает

1

У меня есть простое приложение Vue, которое должно добавить номер в Set, когда вы нажимаете кнопку "Добавить в Set" -

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.log(this.n + ' added to Set');
    }
  },
  watch: {
    nSet: function (newVal, oldVal) {
      console.log(newVal);
    }
  }
});

Почему ничего не заводится в консоли на часах?

Jerry Ji 18 июнь 2018, в 16:47

Источник

1

Есть ли причина, по которой вы используете Set over Array ? Если единственной целью является обеспечение уникальности, вы можете легко проверить с помощью indexOf перед нажатием. AFAIK нет простого способа следить за изменениями Set .
Terry 18 июнь 2018, в 14:06
0

Потому что Set требуется в реальном коде. Codepen - это просто урезанный пример. Но я понял твою точку зрения. Спасибо
Jerry Ji 18 июнь 2018, в 14:30
0

Хотите знать, если наборы не реагируют в компонентах Vue.
Francis Leigh 18 июнь 2018, в 14:44

Показать ещё 1 комментарий

Теги:

javascript

vuejs2

codepen

3 ответа

1

Это потому, что Vue не поддерживает Set, Map, WeakSet и WeakMap. И это потому, что браузеры не поддерживали эти структуры хорошо. Особенно WeakMap. Но... Они решили поддержать эти структуры. Возможно, в версии 3 - когда они решили отказаться от поддержки старых браузеров. Итак, на данный момент используйте объект, добавьте свойства с помощью Vue.$set() и следите за изменениями с помощью deep: true.

Vladislav Ladicky 18 июнь 2018, в 14:07

0

Сохранение и повторная Set 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.log('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>

Francis Leigh 18 июнь 2018, в 12:32

Ещё вопросы

Есть ли причина, по которой вы используете Set over Array ? Если единственной целью является обеспечение уникальности, вы можете легко проверить с помощью indexOf перед нажатием. AFAIK нет простого способа следить за изменениями Set .
Потому что Set требуется в реальном коде. Codepen - это просто урезанный пример. Но я понял твою точку зрения. Спасибо
Хотите знать, если наборы не реагируют в компонентах Vue.

Stephen Thomas · Accepted Answer · 2018-06-18T13-25-00.000Z

Vue добавляет специальную обработку для массивов, но не для Sets. В результате Vue автоматически не обнаруживает изменения в Set membership. Вы можете принудительно обновить, хотя

  this.nSet.add(this.n);
  this.$forceUpdate();