javascript - 在 :value of 中使用 split()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

您应该使用一种方法来拆分您的价值。

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>