Vue.js 将参数传递给方法'；带去Bounce-vue的s函数

模板：

<input @keyup="fetchData(0)" v-model="name">

使用参数0调用

fetchData

，

fetchData（0）

，但它不会通过，因为我使用的是

。.debounce

。控制台日志显示“未定义”

如何正确传递参数？

安装程序包

将其导入组件：

import debounce from 'debounce'

通过从

fetchData

中删除

0

来更新模板：

<input @input="fetchData" v-model="name">

（App.vue）

安装软件包

将其导入组件：

import debounce from 'debounce'

通过从

fetchData

中删除

0

来更新模板：

<input @input="fetchData" v-model="name">

---

（App.vue）

我也在寻找一个解决方案，总的来说，这里有一个工作版本，我希望它能帮某人节省一分钟：）

//Lodash或任何自定义函数去Bounce
从“lodash”进口；
常量模板=`
`;
导出默认值{
模板：模板，
数据：（）=>{
返回{
textInput:null
}
},
已创建：函数（）{
让vue=这个；
vue.debouncedApiPatch=uu.debounce（vue.apiPatch，500）；
vue.$watch（'textInput'，函数（val）{
vue.debouncedApiPatch（'textInput'，val）；
})
},
方法：{
apiPatch：函数（prop，val）{
控制台日志（道具，val）；
//api异步修补程序。。。
}
}
}

我也在寻找解决方案，总的来说，这是一个有效的版本，我希望它能帮某人节省一分钟：）

//Lodash或任何自定义函数去Bounce
从“lodash”进口；
常量模板=`
`;
导出默认值{
模板：模板，
数据：（）=>{
返回{
textInput:null
}
},
已创建：函数（）{
让vue=这个；
vue.debouncedApiPatch=uu.debounce（vue.apiPatch，500）；
vue.$watch（'textInput'，函数（val）{
vue.debouncedApiPatch（'textInput'，val）；
})
},
方法：{
apiPatch：函数（prop，val）{
控制台日志（道具，val）；
//api异步修补程序。。。
}
}
}

下面的代码尚未检查，但我想解释更多关于debounce以及Vue中“v-on”或“@”事件的工作原理

在

标记上，您可以使用@dziraf解释的

，并为额外变量做大量额外的工作。或者

要发送参数，只需先显式地包含“EVENT”变量（在Vue.js events中，它的名称是$EVENT），然后选择添加：

<input 
  @input="fetchData($event, 'Custom Values', customVariables)"
  v-model="name"
>

提示：两个customVariables中的“=undefined”用于使它们成为可选的

警告：如果要在一个页面上实现此组件的多个实例，请小心，因为在某些初始Vue生命周期挂钩期间存在一些封装问题，因此不建议在

方法中使用您的解盎司功能：

。另外，我相信，如果需要，当您与其他用户交互并在延迟结束之前停止函数时，您不能调用

.cancel（）

方法

建议将函数保存到

created（）

生命周期中的变量，而不是

方法：

：

created() {
  this.fetchData = _.debounce( 
    (e, customVariable1=undefined, customVariable2=undefined) => {
      console.log('Input argument is: ' + e.target.value);
    }, 500);
}

现在，您可以调用

.cancel（）

方法来正确地进行垃圾收集：

beforeDestroy() {
  this.fetchData.cancel();
}

或者，有一个“取消”按钮或从另一个UI元素调用：

<button @click="fetchData.cancel();">Cancel the Request</button>

---

下面的代码尚未检查，但我想解释更多关于debounce以及Vue中“v-on”或“@”事件的工作原理

在

标记上，您可以使用@dziraf解释的

，并为额外变量做大量额外的工作。或者

要发送参数，只需先显式地包含“EVENT”变量（在Vue.js events中，它的名称是$EVENT），然后选择添加：

<input 
  @input="fetchData($event, 'Custom Values', customVariables)"
  v-model="name"
>

提示：两个customVariables中的“=undefined”用于使它们成为可选的

警告：如果要在一个页面上实现此组件的多个实例，请小心，因为在某些初始Vue生命周期挂钩期间存在一些封装问题，因此不建议在

方法中使用您的解盎司功能：

。另外，我相信，如果需要，当您与其他用户交互并在延迟结束之前停止函数时，您不能调用

.cancel（）

方法

建议将函数保存到

created（）

生命周期中的变量，而不是

方法：

：

created() {
  this.fetchData = _.debounce( 
    (e, customVariable1=undefined, customVariable2=undefined) => {
      console.log('Input argument is: ' + e.target.value);
    }, 500);
}

现在，您可以调用

.cancel（）

方法来正确地进行垃圾收集：

beforeDestroy() {
  this.fetchData.cancel();
}

或者，有一个“取消”按钮或从另一个UI元素调用：

<button @click="fetchData.cancel();">Cancel the Request</button>

---

这有用吗？据我所知，

created（）

在页面加载时触发，但是我的

fetchData

不仅在初始页面加载时触发，而且在用户应用过滤器时也会触发。为什么需要该参数

0

？这有帮助吗？据我所知，

created（）

在页面加载时激发，但是我的

fetchData

不仅在初始页面加载时激发，而且在用户应用过滤器时也会激发。为什么需要该参数

0

？根据

#app {
  margin: 20px;
  font-size: 20px;
  font-family: Arial, sans-serif;  
}