Retrieve v:model name in custom function-CodePudding

For some task, I need to retrieve the model name on some custom function called on change method.


//I have this code

<input v:model='xyz' @change='func()'>


//I need v:model name xyz inside the custom method func()


methods(){
    funct(){
        //I need xyz value here
    }
}

CodePudding user response：

Here you go

<template>
  <div>
      <input v-model="inputValue" @change="onInputChanged">
      <button @click="add">Add</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: null
    }
  },
  methods:{
    add(){
      console.log(this.inputValue)
    },
    onInputChanged(){
      console.log(this.inputValue)
    }
  }
}
</script>

You can use inputValue from add method.

CodePudding user response：

There is no buildin way to achieve this (afaik), but you can extend your method call to include the propertys name. Something like this might solve your issue:

<template>
<input v-model="xyz" @change="func('xyz', $event)">
</template>

<script>
methods(){
    func(property, value){
        this[property] = value
    }
}
</script>

CodePudding user response：

It should be v-model instead of v:model and to retrieve the model value you can directly access with the name.

Demo :

new Vue({
  el: '#app',
  data: {
    xyz: 'Hello!'
  },
  methods: {
   func() {
    console.log(this.xyz);
   }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input v-model='xyz' @change='func($event)'>
</div>