Binding method result to v-model with Vue.js

Question

How do you bind a method result to a v-model with Vue.js?

example :

<someTag v-model="method_name(data_attribute)"></someTag> 

I can't make it work for some reason.

Thank you.

Answer 1

Years later, with more experience, I found out that is it easier to bind :value instead of using v-model. Then you can handle the update by catching @change.

Edit (per request):

<input :value="myValue" @change="updateMyValue">  ...  methods: {   updateMyValue (event) {     myValue = event.target.value.trim() // Formatting example   } } 

And in a child component:

// ChildComponent.vue  <template>   <button     v-for="i in [1,2,3]">     @click="$emit('change', i) /> </template>  // ParentComponent.vue  <template>   <child-component @change="updateMyValue" /> </template>  <script> import ChildComponent from './child-component'  export default {   components: {     ChildComponent   },   data () {     return {       myvalue: 0     }   },   methods: {     updateMyValue (newValue) {       this.myvalue = newValue     }   } } </script> 

Answer 2

v-model expressions must have a get and set function. For most variables this is pretty straight forward but you can also use a computed property to define them yourself like so:

data:function(){     return { value: 5 } }, computed: {     doubleValue: {         get(){             //this function will determine what is displayed in the input             return this.value*2;         },         set(newVal){             //this function will run whenever the input changes             this.value = newVal/2;         }     } } 

Then you can use <input v-model="doubleValue"></input>

if you just want the tag to display a method result, use <tag>{{method_name(data_attribute)}}</tag>