html - Access v-select selected value from method called by another element

Question

I have part of my html generated with v-for depends on data from server.

This part of html has v-select and a button elements, What i need when the button click event triggered is to access the index of the v-for and the selected value of the v-select to be used in the method which is called

<v-card-text v-for="(channel, index) in Item.Channels" :key="index">
    ...
    <v-edit-dialog @click.native.stop>
      {{ channel.name}}
      <template v-slot:input>
        <v-select
          item-text="channel.name"
          :items="index == 0 ? names : [...names, 'Disable Channel']"
        >
        </v-select>
        <v-col class="text-right pa-0 ma-0 mb-2">
          <v-btn color="primary" outlined :click="handleNameChange(index)">Apply</v-btn>
        </v-col>
      </template>
    </v-edit-dialog>
</<v-card-text>

At the handleNameChange method the value from the v-select should also be passed

EDIT Changed i made to code:

    @click="handleNameChange(channel.name,index)

my script tag

<script>
...
methods:{
handleNameChange(name, index) {
      console.log(`name: [${name}], Index: [${index}]`);
    }
}
</script>

The problem is that each time i press the button i get the same name which is initialized first with {{ channel.name}}

HTML tag added for text coloring

question from:https://stackoverflow.com/questions/65559842/access-v-select-selected-value-from-method-called-by-another-element

Answer 1

Use @ (used for v-on) instead of :