how can i get current input value on change in Vue?-CodePudding

I want to get current select value without modeling on data. in other words , I want get this select value in second method argument. pay attention that this select placed in a v-for loop how can i do this?

<select v-if="user.client_groups.length > 0"  
    @change="clientGroupChanged(user.id,???)">
         <option v-for="group in groups" :key="group.id" :value="group.id" 
         :selected="user.client_groups[0].id">{{ group.title }}</option>
</select>

and my clientGroupChanged method body is :

clientGroupChanged: function(uid,value){
            alert(value);
},

CodePudding user response：

the onchange wont get value from loop inside the select tag, you can get value from event such as

 <select
    v-if="user.client_groups.length > 0"
    
    @change="event => clientGroupChanged(user.id, event)"
  >
    <option
      v-for="group in groups"
      :key="group.id"
      :value="group.id"
      :selected="user.client_groups[0].id"
    >
      {{ group.title }}
    </option>
  </select>

your method should be like

clientGroupChanged(uid , event) {
      console.log(event.target.value);
}

remember: event.target.value will be id as the group as you are passing group.id to key

CodePudding user response：

Try this one, should be a working solution.

@change="(val) => clientGroupChanged(user.id, val)"

CodePudding user response：

Well you should pass the value besides the uid to your change function like this:

<select v-if="user.client_groups.length > 0"  
    @change="event => clientGroupChanged(user.id, event.target.value)">
         <option v-for="group in groups" :key="group.id" :value="group.id" 
         :selected="user.client_groups[0].id">{{ group.title }}</option>
</select>