使用 split() in:value of<option value="tag in vuejs"> vuejs中的標簽</option>

Question

我很想在<option>標記中使用split() 。 AvaFac是一個包含Name和Code的array ，例如["XXX^101", "YYY^102"]

<option>標簽中顯示的split()會引發錯誤。 是否有另一種方法可以在不使用單獨的array來保存代碼的情況下實現這一點。

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

Answer 1

您應該使用一種方法來拆分您的價值。

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

看看這個例子

Answer 2

我建議使用計算屬性將數據轉換為對象數組。 就像是：

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>