vue.js - How to add inline @change or @update function?

Question

Here is my code snippet.

<template>
   <b-form-input
     type="text"
     name="title"
     class="form-control"
     placeholder="Post Title"
     @update="onUpdate"
    />
</template>

<script>
 export default{
   methods:{
      onUpdate(value) {
        console.log(value)
      }
   }
 }
</script>

While I was trying to make the update function inline something like this:

<b-form-input
     type="text"
     name="title"
     class="form-control"
     placeholder="Post Title"
     @update="()=>{console.log(value)}"      //which is wrong
/>

What will be correct format ? Thanks in advance!

CodeSandbox Playground: https://codesandbox.io/s/mystifying-benz-w8wgu?file=/src/FormFields.vue

Answer 1

You can use inline functions, but the expressions are evaluated in the context of the Vue instance. What you tried would work except that console isn't a property of the Vue instance. But you can add the console.log method to your component's methods if you like:

@update="()=>{ log(value) }" 

methods: {
  log: console.log
}

If you wanted to use the console.log syntax explicitly like that, you'd have to add console to data:

@update="()=>{ console.log(value) }"

data() {
  return {
    console: console    // just `console` would work too
  }
}