如何通过Composition API的v-model下拉框获取JSON其他值？

核心问题在于你当前只把商品的name绑定到了v-model，所以只能拿到单个字符串，没法获取整个商品对象的其他属性。按下面的步骤修改就能同时拿到name和price：

1. 绑定整个商品对象到选项 #

把<option>的:value="pl1.name"改成:value="item"（注意把循环变量名从pl1改成item，避免和响应式变量重名），这样选中时v-model会拿到完整的商品对象：

<select v-model="pl1">
  <option v-for="item in items" :key="item.id" :value="item">
    {{ item.name }} {{ item.price }}
  </option>
</select>

2. 调整响应式变量类型 #

原来的pl1是存字符串的ref，现在改成存对象的ref：

const pl1 = ref({});

3. 页面上直接访问对象属性 #

修改展示部分，直接从pl1对象中取name和price：

<p>选中的商品名称（正常显示）-> {{ pl1.name }}</p>
<p>选中的商品价格 -> {{ pl1.price }}</p>

4. 调整表单提交的响应式数据 #

如果需要把name和price单独提交到form里，用computed自动同步pl1的属性值，不用单独维护pl1_price：

const form = reactive({
  pl1: computed(() => pl1.value.name || ''),
  pl1_price: computed(() => pl1.value.price || '')
})

完整修改后的代码 #

<template>
  <select v-model="pl1">
    <option v-for="item in items" :key="item.id" :value="item">
      {{ item.name }} {{ item.price }}
    </option>
  </select>

  <p>选中的商品名称（正常显示）-> {{ pl1.name }}</p>
  <p>选中的商品价格 -> {{ pl1.price }}</p>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'

const items = [
  { id: 1, name: 'apple', price: 100 },
  { id: 2, name: 'banana', price: 80 },
];

const pl1 = ref({});

const form = reactive({
  pl1: computed(() => pl1.value.name || ''),
  pl1_price: computed(() => pl1.value.price || '')
})

const { errors, storeCompany } = useCompanies()
const saveCompany = async () => {
  await storeCompany({ ...form });
}
</script>

这样修改后，选中不同商品时，name和price都会同步更新，表单里的字段也会自动跟着变化，满足提交需求。

内容的提问来源于stack exchange，提问作者user22350468