如何添加内联@change 或@update 功能？

Question

这是我的代码 sn-p。

<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>

当我试图使更新函数内联时：

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

什么是正确的格式？提前致谢！

CodeSandbox 游乐场： https://codesandbox.io/s/mystifying-benz-w8wgu?file=/src/FormFields.vue

Answer 1

使用内联处理程序是正确的，它的处理程序参数表示键入的值：

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

....
  created() {
    this.console = window.console;
  },

Answer 2

您可以使用内联函数，但表达式是在 Vue 实例的上下文中计算的。除了 console 不是 Vue 实例的属性之外，您尝试的方法都可以。但是，如果您愿意，可以将 console.log 方法添加到组件的方法中：

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

methods: {
  log: console.log
}

如果您想像这样明确地使用console.log 语法，则必须将console 添加到数据中：

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

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