# Component update it's value by click item inside it

**URL:** <https://discuss.emberjs.com/t/component-update-its-value-by-click-item-inside-it/11036>\
**Category:** Uncategorized\
**Created:** [June 30, 2016, 7:38am UTC](https://discuss.emberjs.com/t/component-update-its-value-by-click-item-inside-it/11036 "2016-06-30T07:38:07Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![adsl99801](https://avatars.discourse-cdn.com/v4/letter/a/8e7dd6/32.png) [@adsl99801](https://discuss.emberjs.com/u/adsl99801)\
**Post date:** [June 30, 2016, 7:38am UTC](https://discuss.emberjs.com/t/component-update-its-value-by-click-item-inside-it/11036/1 "2016-06-30T07:38:07Z")

</div>

I have a component called ‘my-header’

template:

```auto
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">

            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#hamburger">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">name</a>
        </div>
        <div class="collapse navbar-collapse" id="hamburger">
            <ul class="nav navbar-nav">
              {{#each liStringArray as |item index|}}
                  <li class={{if (eq activePosition index) 'active' ''}}>
                      <a href="{{item.route}}">{{item.name}}</a></li>
              {{/each}}

            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li class={{if (eq activePosition 3) 'active' ''}}><a href="#/account/signup">signup</a></li>
            </ul>

        </div>
    </div>
</nav>

```

component:

```auto
import Ember from 'ember';

const MyHeader = Ember.Component.extend({
  activePosition:0,
times:0,
  liStringArray: [{
    "name": 'main',
    "route": '#'
  }, {
    "name": 'exampaper',
    "route": '#/exampaper'
  },
    {
    "name": 'account',
    "route": '#/account'
  }

  ]
  }
});

MyHeader.reopenClass({
  positionalParams: ['activePosition']
});

export default MyHeader;

```

now, I want click `<a href="#/account/signup">` and let it’s class attr set to ‘active’ and update value in component’s field variable( **times** )

---

<div class="post-metadata">

**Author:** ![heatbr](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/heatbr/32/9874_2.png) [@heatbr](https://discuss.emberjs.com/u/heatbr)\
**Post date:** [June 30, 2016, 6:47pm UTC](https://discuss.emberjs.com/t/component-update-its-value-by-click-item-inside-it/11036/2 "2016-06-30T18:47:23Z")

</div>

Just use the link-to component as a

- . Don’t forget to add `href=false` to avoid link click.

> <https://stackoverflow.com/questions/14412073/assigning-active-class-to-selected-list-item-in-emberjs/14501015#14501015>

---

<div class="post-metadata">

**Author:** ![adsl99801](https://avatars.discourse-cdn.com/v4/letter/a/8e7dd6/32.png) [@adsl99801](https://discuss.emberjs.com/u/adsl99801)\
**Post date:** [July 1, 2016, 5:22am UTC](https://discuss.emberjs.com/t/component-update-its-value-by-click-item-inside-it/11036/3 "2016-07-01T05:22:06Z")

</div>

How to do something on click link-to ? (this.set(‘times’,+1)) ?

---

<div class="post-metadata">

**Author:** ![heatbr](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/heatbr/32/9874_2.png) [@heatbr](https://discuss.emberjs.com/u/heatbr)\
**Post date:** [July 5, 2016, 9:57pm UTC](https://discuss.emberjs.com/t/component-update-its-value-by-click-item-inside-it/11036/4 "2016-07-05T21:57:46Z")

</div>

Sorry about late. This can help u [javascript - Combine linkTo and action helpers in Ember.js - Stack Overflow](http://stackoverflow.com/questions/16124381/combine-linkto-and-action-helpers-in-ember-js)