在 vuejs 中的 <option> 标签的 :value 中使用 split()答案

【问题标题】：Using split() in :value of <option> tag in vuejs在 vuejs 中的 <option> 标签的 :value 中使用 split()
【发布时间】：2025-12-16 02:40:01
【问题描述】：

我很想在<option> 标签中使用split()。 AvaFac 是一个 array 延续 Name 和 Code 就像 ["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>

【问题讨论】：

错误是什么？

标签： javascript html arrays vue.js drop-down-menu

【解决方案1】：

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

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

看看这个example

【讨论】：

感谢您的回复。我确实尝试了相同的方法，但是没有在
抱歉，如果在开发人员工具选项中看到它们，这两个值都被设置到它们的位置。但最初没有设置下拉值。我有什么需要改变的吗
控制台有错误吗？在我的示例中，没有错误，因此您可能会遗漏一些东西。尝试添加这一行<select v-if="avaFac && avaFac.length > 0">
控制台没有错误。数据被设置为标记，但应该选择一个初始值，并且在选择下拉列表中的此代码更改后未选择它
您可以在option 标签中添加:selected="i === 0"，这样您就可以默认选择第一个元素

【解决方案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>

【讨论】：