LoginSignup
4
0

More than 5 years have passed since last update.

vue.js props にオブジェクトを渡した時、子で中身を変更すると親でもそれが反映される挙動をなんとかしたいとき

Posted at

タイトルが長い!

vue.js での props のバインディングでは、下記のURLにある通り、オブジェクトを渡した場合は参照渡しとなるので、結果的に、子で中身を変更すると、親でもそれが反映されてしまいます。

もし、渡される prop がオブジェクトまたは配列ならば、それは参照で渡されることに注意してください。オブジェクトの変更または配列は、使用しているバインディングのタイプに関係なく、子の内部それ自身は、親の状態に影響を与えます。

この挙動が困る場合、下記のような clone フィルタを作り、それを介して prop に渡すことで、one-way バインディングのような挙動にすることができます。

var _ = require('lodash');

Vue.filter('clone', function (value) {
  return _.cloneDeep(value);
});
<my-component my-object="{{myObject | clone}}"></my-component>

が、cloneDeep を使う以上、スペックを気にする必要がありそうです。
……どなたか「中身を一個ずつ渡す」以外にいいやり方ご存知でしたら教えて下さい。

4
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
4
0