Использование split () in: значение тега <option>в vuejs

Question

Я пытаюсь использовать split() в теге <option>. AvaFac - это array продолжение Name и Code как ["XXX^101", "YYY^102"]

split(), как показано в теге <option>, выдает ошибку. Есть ли другой способ добиться этого без использования отдельного array для сохранения кода.

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

Answer 1

Я рекомендую преобразовать ваши данные в массив объектов, используя вычисляемое свойство. Что-то вроде:

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

Это превратит avaFac во что-то похожее на

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

Тогда в вашей разметке:

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

Answer 2

Вы должны использовать метод, который разделяет ваше значение.

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

Посмотрите на этот пример