# Why object changes in other component too.? How create object inside component for itself.?

**URL:** <https://discuss.emberjs.com/t/why-object-changes-in-other-component-too-how-create-object-inside-component-for-itself/9024>\
**Category:** Uncategorized\
**Created:** [October 28, 2015, 4:26pm UTC](https://discuss.emberjs.com/t/why-object-changes-in-other-component-too-how-create-object-inside-component-for-itself/9024 "2015-10-28T16:26:39Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Vazgen7788](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@Vazgen7788](https://discuss.emberjs.com/u/Vazgen7788)\
**Post date:** [October 28, 2015, 4:26pm UTC](https://discuss.emberjs.com/t/why-object-changes-in-other-component-too-how-create-object-inside-component-for-itself/9024/1 "2015-10-28T16:26:39Z")

</div>

Can anybody help me? How create object inside component for itself. ?

> **[JS Bin](http://emberjs.jsbin.com/qusedosafa/1/edit?html,js,output)**
>
> A live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more...

---

<div class="post-metadata">

**Author:** ![Spencer\_Price](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/spencer_price/32/14878_2.png) [@Spencer\_Price](https://discuss.emberjs.com/u/Spencer_Price)\
**Post date:** [October 28, 2015, 4:31pm UTC](https://discuss.emberjs.com/t/why-object-changes-in-other-component-too-how-create-object-inside-component-for-itself/9024/2 "2015-10-28T16:31:59Z")

</div>

This is more or less a javascript issue — when you define the component and give one of the properties a value that is not a primitive (so, in your case, it’s an Object), that same object is used across all instances of that component.

So, one of the common patterns to resolve this is to use a computed property. Something like this:

```auto
App.FooTestComponent = Ember.Component.extend({
  testObj: Ember.computed(function() {
    return {
      bool: true
    };
  }),
  
  testBool: false,
  
  actions: {
    change: function() {
      this.toggleProperty('testObj.bool');
      this.toggleProperty('testBool');
    }
  }
  
});

```

In this case, the `testObj` value is not calculated until sometime after the instance of the component is created (it’s actually created the first time something tries to retrieve that value).

Hope this helps!!

---

<div class="post-metadata">

**Author:** ![Vazgen7788](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@Vazgen7788](https://discuss.emberjs.com/u/Vazgen7788)\
**Post date:** [October 28, 2015, 6:01pm UTC](https://discuss.emberjs.com/t/why-object-changes-in-other-component-too-how-create-object-inside-component-for-itself/9024/3 "2015-10-28T18:01:40Z")

</div>

Thanks very much for answer… )
