什么是直接调用方法和在函数内呼叫的vue @click的差异

发布于 2025-02-10 03:08:04 字数 747 浏览 1 评论 0原文

我正在学习nuxt，导师的功能可以添加一个名为updateTodo的项目，并将其连接到按钮，为follwoing

脚本

<script setup>  
  const updateTodo = async (id) => {
    if (!input) return;

    await $fetch(`/api/todo/${id}`, { method: 'PUT' });
  };
</script>

template

<template>
  <div class="container">
    <input type="text" placeholder="Add a new todo..." v-model="input" />
    <NButton @click="() => updateTodo(todo.id)">Add</NButton>
  </div>
</template>

i不知道他为什么不直接称其为（例如@click =“ updateTodo（todo.id））。我尝试这样做。只是偏好？

原文

I'm learning nuxt and the tutor has a function to add an item called updateTodo and attached it to a button as the follwoing

script

<script setup>  
  const updateTodo = async (id) => {
    if (!input) return;

    await $fetch(`/api/todo/${id}`, { method: 'PUT' });
  };
</script>

template

<template>
  <div class="container">
    <input type="text" placeholder="Add a new todo..." v-model="input" />
    <NButton @click="() => updateTodo(todo.id)">Add</NButton>
  </div>
</template>

I dont know why he didn't call it directly (eg. @click="updateTodo(todo.id)). I tried to do it and it worked. Is there a reason i dont know or it's just a preference?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

眼眸 2025-02-17 03:08:05

两者都被允许。

https://vuejs.s.s.s.s.s.s.s.org/guide/guide/esentials/event-esentials/event------------- antling.html＃听力到事件

用法将是v-on：click =“ handler”或使用快捷方式，@click@click =“ handler”。处理程序值可以是以下一个：
内联操作员：触发事件时要执行的内联JavaScript（类似于本机onClick属性）。
方法处理程序：指向组件上定义的方法的属性名称或路径。

但是，请注意，这种情况不一定总是如此。在某些库/框架中，类似onclick =“ yourfunction（）”可能会立即调用该方法，并将返回的值用作事件侦听器。除非您要返回功能，否则这通常不是您想要的。

回复收藏 0 原文

夕色琉璃 2025-02-17 03:08:05

在这种情况下，您直接致电，您不需要此处的parmas。

 ＆lt; nbutton @click =“ updateTodo（todo.id）”＆gt; add＆lt;/nbutton＆gt;

但是在某种情况下，您需要事件属于获取输入的值（e.target.value）或要防止该事件的默认值（e.preventdefault）IE

a。 每次都有任何功能

 ＆lt; input @input =“ Any Function”＆gt;

b。，但是如果输入值大于100或其他任何内容，则要通过功能，那么您需要通过功能作为函数，以便将事件如类似

 ＆lt; input @input =“（e）=＆gt; e.target.value＆gt; 100

换句话说，如果在该特定事件的函数中没有参数，那么您就不需要传递该函数。否则您需要通过功能。

in this case you call directly, you don't require event parmas here.

<NButton @click="updateTodo(todo.id)">Add</NButton>

but in a certain case, you need event parament to get the value of the input (e.target.value) or want to prevent the default of that event(e.preventDefault) i.e

a. you call anyFunction in each time, then

<input @input="anyFunction">

b. but you want to pass function if enter value is greater than 100 or anything else then you need to pass as function so you get event as params like

<input   @input="(e) => e.target.value > 100 && anyFunction">

In other words, if there is no argument in the function for the particular event then you don't need to pass the function. else you need to pass the function.

回复收藏 0 原文

~没有更多了~