我在和Vue 3Bootstrap 5打交道.

我有一张select分的,有多个选项.现在我正在显示我的option.TEXT,当我改变一些东西时,这value也将被传递到我的方法中.但是当我改变一些事情的时候,我想通过key (option.ID).

但我也希望我的v-model是我的option.ID,但要展示我的option.TEXT.

如果不在方法本身中进行判断,我如何才能实现这一点.

100

<select class="form-select" v-model="value" @change="get_key()">
    <option v-for="option in options" :key="option.ID">
        {{ option.TEXT }}
    </option>
</select>

100

[
  {  "ID": 1,
     "TEXT": "One"
  },
  {  "ID": 2,
     "TEXT": "Two"
  },
  {  "ID": 3,
     "TEXT": "Three"
  },
]

推荐答案

option属性值应绑定到option.ID:

<select class="form-select" v-model="value" @change="get_key()">
    <option v-for="option in options" :key="option.ID" :value="option.ID">
        {{ option.TEXT }}
    </option>
</select>

Javascript相关问答推荐

当我使用jQuery时,我的图标显示为[对象对象]

订阅操作顺序

React对话框模式在用户单击预期按钮之前出现

过滤对象数组并动态将属性放入新数组

字节数组通过echo框架传输到JS blob

如何解决CORS政策的问题

防止用户在selectizeInput中取消 Select 选项

React Code不在装载上渲染数据,但在渲染上工作

Rehype将hashtag呈现为URL

TypeScript索引签名模板限制

如何禁用附加图标点击的v—自动完成事件

如何在Angular17 APP中全局设置AXIOS

在HTML语言中调用外部JavaScript文件中的函数

为什么客户端没有收到来自服务器的响应消息?

如何在我的Next.js项目中.blob()我的图像文件?

使用线性插值法旋转直线以查看鼠标会导致 skip

postman 预请求中的hmac/sha256内标识-从js示例转换

Socket.IO在刷新页面时执行函数两次

自动滚动功能在当前图像左侧显示上一张图像的一部分

每隔3个项目交替显示,然后每1个项目交替显示