1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Vuexで連想配列, Hashを更新するときにVueコンポーネントでも動的に取得する方法。

Last updated at Posted at 2021-03-17

連想配列の変更して、それを監視してもらうための方法の$set

Vue, Nuxt の初心者が躓きやすいポイントの一つに配列、連想配列のreactiveがあります。
https://jp.vuejs.org/v2/guide/reactivity.html#%E5%A4%89%E6%9B%B4%E6%A4%9C%E5%87%BA%E3%81%AE%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A0%85

連想配列を更新してもhtmlが更新されない!

という問題ですね。


$set(object, key, value)

これを使えばうまく更新されます。

Vuexに保存している連想配列は?

Vuexに連想配列をおいてgetterで呼び出しているときも、$setを使わないと同期して更新されないんです。
VuexはVueの上で動いているので、同じような動作をします。

Vuex内のmutationで$setを使うには?

公式ドキュメントにしれっと書いてます。
https://jp.vuejs.org/v2/guide/reactivity.html#%E5%A4%89%E6%9B%B4%E6%A4%9C%E5%87%BA%E3%81%AE%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A0%85

import Vue from 'vue'

Vue.set(object, key, value)

だいぶ省略しているので、よしなにやってください。
こんな感じでできます。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?