CODEWITHSUNDEEP
javascripthtmlarraysvue.jsdrop-down-menu
SM079
SM079

Reputation: 731

Using split() in :value of <option> tag in vuejs

I am tyring to use split() in <option> tag. the AvaFac is an array continaing Name and Code like ["XXX^101", "YYY^102"]

The split() as show in the <option> tag throws error. Is there an another way to achieve this without using separate array to save the code.

<option v-for="fieldRows in avaFac" :value=fieldRows.split('^')[1]>
      <span class="custom__tag">
         <span>{{fieldRows}}</span>
      </span>
    </option>

Upvotes: 3

Views: 594

Answers (2)

Tanner
Tanner

Reputation: 2421

I recommend transforming your data into an array of objects using a computed property. Something like:

computed: {
    preparedAvaFac() {
        return this.avaFac.map(row => {
             const rowObj = row.split("^");
             return {
                 name: row[0], 
                 code: row[1]
        }
    }
}

This will transform avaFac into something similar to

[
    {name: "XXX", code: "101"},
    {name: "YYY", code: "102"}
]

Then in your markup: 

<option v-for="fieldRows in preparedAvaFac" :value=fieldRows[1]>
    <span class="custom__tag">
       <span>{{fieldRows[0]}}</span>
    </span>
</option>

Upvotes: 1

ptheodosiou
ptheodosiou

Reputation: 400

You should use a method that splits your value. 

methods:{
  splitValue(itemToSplit){
    return itemToSplit.split("^")[1]
  }
}

Take a look a this example

Upvotes: 1

Related Questions