How to find elements in an array in vuejs or Javascript

Question

I'm having an array of elements in vuejs, I've some data manipulation with them Like I've a select dropdown which shows the company information and each company information has a tag. Tags are of one sub level, I've joined both the tags as one and stored in database, whenever I select the parent company I want these tags to be selected, I mean it should have class btn-warning and rest all to be btn-primary don't be confused with other select, there options are coming from the filter of first select

So suppose my tag data value is: Investor-Mutual fund, it should split up and Investor button should be selected and Mutual Fund button should have class of btn-primary and this should be changeable only with the select list only

Here's my code pen: https://codepen.io/anon/pen/eWXPaK?editors=1010

This will give you idea what I'm trying to do. Guide me

Solution

I believe this is what you want.

if (!this.selectedCompanies.length > 0){
  const str = this.model.data.find(d => d.name === newValue.label)
  const [currentTag, selectedTag] = str.tag.split("-")
  this.currentTag =  currentTag
  this.selectedTag =  this.tags[this.currentTag].find(t => t.display === selectedTag)
}

Updated pen.

Comments

[Nitish Kumar]

Error in callback for watcher "company_name": "TypeError: Cannot read property 'split' of undefined". But I want exactly as you did in codepen :(

[Bert]

@NitishKumar I don't get an error in the pen. What is the difference?

[Nitish Kumar]

Ok solved. Was getting model.data.type and was writing model.data.tag

[Nitish Kumar]

Can I put @click.prevent? in v-for="tag in tags[currentTag]", as while clicking the buttons it is redirecting

[Bert]

@NitishKumar Not sure how to answer. There doesn't appear to be any reason a re-direct would happen in the pen.