[Vue] Практический пример использования this.$forceUpdate() метода.

Простой и небольшой пример. Каких-то подробных комментариев давать не буду, все видите перед собой:

1) HTML

<div id="app">
  <h2 v-for="item in toArray(map)">{{ item }}</h2>
  <button @click="append">
    Add an item
  </button>
</div>

2) JS

new Vue({
  el: '#app',
  data: { map: new Map(), counter: 0 },
  methods: {
    append() {
     // vue js не умеет видеть изменения на map/set типах данных.
     this.map.set(++this.counter, `some value ${this.counter}`)
     // Собственно, здесь мы и говорим ему о том, что нужно посмотреть изменения вручную.
     // То есть, форсированно. Как вы наверное уже поняли, это довольно "дорогой" метод
     // с точки зрения ресурсов.
     this.$forceUpdate()
    },
    toArray(dataSet) {
      return Array.from(dataSet)
    }
  }
})

  • Slider

You may also like

  • Slider
  • Slider
2 comments

John Doe

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non | numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Reply