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

Question

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>

Answer 1

You should use a method that splits your value.

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

Take a look a this example

Answer 2

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>