使用 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>