Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Vue.jsは気難しい(オブジェクト編)

More than 1 year has passed since last update.

本記事は Vue 2.2 時代(2017/03頃)に記載したものです。
最新のVueでは未検証です(たぶん通用すると思う)ご留意ください。

はじめに

Vue.jsはインスタンスが持つプロパティ(dataやprops)の変更を検知して、DOMの内容を変更したり、イベントの発火を行うことができる。
だが、それはdataやprops配下のオブジェクトの、変更を検知する機構が重要であるため
プレーンなJSのやりかたでオブジェクトを変更すると、その機構を失ってしまう。

失ってしまうとあら大変、オブジェクト内の値を変更してもDOMに反映されないし、vue-devtoolsにも表示されないという迷宮に、僕らは迷い込む。
そうならないための注意点です。

オブジェクトの気の遣い方

キーを追加したい

player オブジェクトに job キー(プロパティ)を追加する
(オブジェクトはそのキーを持っていないとする)

× いつものやり方でキー追加すると、検知機構を持たないプロパティになってしまう

this.player.job = { company: "インクリメンツ", income: "800" }};

setを使おう

this.$set(this.player, "job", { company: "インクリメンツ", income: "800" });

※ここで記載しているthisはコンポーネントのことです。
つまりコンポーネント内での記載を前提としています。
Vue.set(obj, key, val); っていう方法でもできる(実は this.$set()Vue.set() のエイリアス)けど、見通しが悪くなるので知らなくていいと思います。

複数のキーを一度に追加したい

Object.assignを使う

this.someObject = Object.assign({}, this.someObject, { company: "インクリメンツ", income: "800" });

これ、公式リファレンスにも記載されているやりかただけど、使わないほうがいいんじゃないかな…(なんか次のバージョンとかで非推奨になりそうな予感がする)

追加したいキーの数だけ$setを実行するとか
上記$setで予め構築しておいたオブジェクトを追加するなどしたほうがいい

var job = {
  company: "インクリメンツ",
  income: "800"
};
this.$set(this.player, "job", job);

(追記)
Object.assign() は、IE非対応なので注意! 参考 Object.assign()
assign.PNG

おわりに

Vue.jsの冒頭の説明にある「プレーンなオブジェクトのまま管理します」みたいな文言は嘘だよなと思う。

配列編も記載しているので、見てね

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away