Vue中使用select选择器选中对象数组中目标对象的实现问题

• 方案1：直接绑定对象作为option值（最简便）
  给select标签绑定v-model到chosenService，同时给每个option动态绑定:value为当前遍历的service对象，选中时v-model会直接拿到完整的对象实例。
  代码示例：

  <select v-model="chosenService" placeholder="Vælg ydelse">
      <option v-for="service in services" :key="service.id" :value="service">
          {{service.name}}
      </option>
  </select>
  

  注意：使用该方案时，初始赋值的chosenService必须是services数组中的某一项引用，否则会出现初始选中状态不匹配的问题。

• 方案2：绑定id后查找匹配对象（兼容性更好，适配初始值非数组引用的场景）
  给option绑定service的id作为value，监听select的change事件，触发时从services数组中查找id匹配的完整对象赋值给chosenService。
  代码示例：
  模板部分：

  <select v-model="selectedServiceId" @change="handleSelectService" placeholder="Vælg ydelse">
      <option v-for="service in services" :key="service.id" :value="service.id">
          {{service.name}}
      </option>
  </select>
  

  逻辑部分：

  export default {
    data() {
      return {
        selectedServiceId: 42, // 和初始chosenService的id对应即可
        chosenService: {
          id: 42,
          name: "some service",
          group: {
              id: 2,
              name: "some group within the service",
          },
          additions: [],
          classSignupMoreActive: false,
        },
        // 其余data字段
      }
    },
    methods: {
      handleSelectService() {
        this.chosenService = this.services.find(service => service.id === this.selectedServiceId)
      }
    },
    mounted() {
      // 初始化时自动匹配一次，保证初始选中状态正确
      this.handleSelectService()
    }
  }
  

你当前父组件向Modal组件传递services数组的写法符合Vue单向数据流的最佳实践：

• 数据源保存在父组件，通过props下发给子组件，数据流向清晰，后续维护更新时只需要修改父组件的数据源即可，不会出现多组件数据不同步的问题
• 注意不要在Modal组件内部直接修改services数组，如果有修改数组的需求，需要通过$emit向父组件派发事件，由父组件完成数据修改，避免数据流混乱
• 模板内绑定props时不需要额外写this，直接访问属性即可，父组件模板可以简化为：

  <Modal
    :show="showModal"
    @close="showModal = false"
    title="Modal Title"
    :services="services"
  >
  </Modal>
  

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