如何添加内联@change 或@update 函数？

Question

这是我的代码片段。

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

如何添加内联@change 或@update 函数？

How to add inline @change or @update function?

vue.js

vuejs2

bootstrap-vue