关于v-select通过.sync修饰符从子组件传递id与文本的技术问询

Let's break down your two questions with practical, actionable solutions:

Question 1: How to pass both the selected item's ID and corresponding text #

The core fix here is making v-select return the entire selected object instead of just the ID. You can enable this with the return-object prop on the VSelect component.

Step-by-step implementation: #

1. Update your child component's VSelect to include the return-object prop:

<VSelect 
  label="Attribute" 
  :items="addOnLabelItems" 
  :value="addOnLabelId" 
  @input="handleSelect" 
  solo outline reverse type="text"
  return-object <!-- Add this prop to get the full selected item -->
/>

2. Add a handler method in the child component to emit the data you need:

<script>
export default {
  props: ['addOnLabelId'],
  methods: {
    handleSelect(selectedItem) {
      // Option 1: Emit the full object in one event
      this.$emit('update:selectedAddOn', selectedItem);
      
      // Option 2: Emit ID and text as separate values (if you want split data)
      this.$emit('update:addOnLabelId', selectedItem.id);
      this.$emit('update:addOnLabelText', selectedItem.label); // Replace with your actual text field name
    }
  }
}
</script>

3. In the parent component, choose the binding that fits your needs:

• For the full object:

  <ChildComponent :selected-add-on.sync="selectedAddOn" />
  

• For split ID and text:

  <ChildComponent 
    :add-on-label-id.sync="parentAddOnId" 
    :add-on-label-text.sync="parentAddOnText"
  />
  

Question 2: Can we add another .sync modifier to trigger two separate emits? #

Absolutely! The .sync modifier is just syntactic sugar for :prop="value" @update:prop="value = $event", so you can use multiple .sync bindings as long as you define matching props in the child component and emit the correct update: events.

Example setup: #

1. In the child component, define both props you want to sync:

<script>
export default {
  props: {
    addOnLabelId: {
      type: [Number, String],
      default: null
    },
    addOnLabelText: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleSelect(selectedItem) {
      // Emit updates for both props whenever selection changes
      this.$emit('update:addOnLabelId', selectedItem.id);
      this.$emit('update:addOnLabelText', selectedItem.label);
    }
  }
}
</script>

2. Bind both props with .sync in the parent:

<ChildComponent 
  :add-on-label-id.sync="parentAddOnId" 
  :add-on-label-text.sync="parentAddOnText"
/>

Now whenever the user selects a new item, both parent variables will automatically update with the corresponding ID and text.

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