Multiple instances on same page

[mailnike]

Hello All,

I am using this control to create an invoice page that allows user to add multiple items on the invoice. User enters an "item name"' in this control, that in turn searches for an item, if found populates other field such as price, available quantity etc. automatically.

Here is the screenshot of my page: http://www.awesomescreenshot.com/image/2107586/bf9cbac09ca323724493c4079780fe9f

Each item name column is unique to each specific row. In short - if I select "iphone 5" from the first row then it should populate price, quantity for iPhone 5 in the other fields. I can do this using VUEJS events. However, issue is - using event I can't determine which row this "item name" corresponds to. Due to this my code updates incorrect values.

I have added a screenshot of invoice page. At the moment - only item name is typeahead while other fields are part of a different component to which typeahead component has been imported.

http://www.awesomescreenshot.com/image/2107586/bf9cbac09ca323724493c4079780fe9f

any suggestions how to tackle this? Thanks.

[JoolsMcFly]

Hey,

I might be late to the game but I have a similar page as you do. I have several Target components which each have a TypeAhead component. I let Vue know that when Target receives a geoloc-selected event it should call updateGeo:

// Target.vue
<div>
  <!-- more html here -->
  <typeahead v-ref:typeahead :typeahead="target.geo" v-on:geoloc-selected="updateGeo"></typeahead>
</div>

<script>
//blablabla more JS
  events: {
      updateGeo(item) { // TypeAhead component has propagated this item up from onHit
        this.target.countryCode = item.country.toLowerCase();
        this.target.geo = item.geo;
        this.target.is_dma = item.is_dma;
      }
}
</script>

Then in TypeAhead I simply $dispatch the right event so parent Target gets the selected item.

// TypeAhead.vue
    onHit (item) {
      this.typeahead = item.display_name;
      this.$dispatch('geoloc-selected', item); // send to parent Target component
    },

And that's it.