个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
24
4
编辑以更正未报告的语法错误(见评论)。它现在可以正常工作。
我无法在以下 Vue 代码中触发我的事件处理程序。
如您所见，有两个组件，posts 和 post，以及一个根 Vue 实例。 post 模板中的按钮应触发 remove 事件，该事件由 posts< 中的 使用帖子的索引调用 v-on:remove 处理程序捕获posts.deleteItem。有人可以提示我做错了什么吗？
<!DOCTYPE html>
<html lang="en">
<head>
<title>Posts</title>
<!--link href="../css/bootstrap.css" rel="stylesheet" /-->
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<posts></posts>
</div>
<script>
window.onload = function() {
// A post
Vue.component('post-item', {
props: ['post'],
data: function() {
return {
editing: false,
_cachedItem: ''
}
},
methods: {
deleteItem(postId) {
debugger
this.$emit('remove', event.target.value);
},
},
template: `
<div v-on:remove="deleteItem">
<li v-show="!editing">
<p v-html="post.text"></p>
<button v-on:click="$emit('remove')">Delete</button>
</li>
</div>
`
})
Vue.component('posts', {
data: function() {
return {
posts: [
{id: 0, text: "Day at beach"},
{id: 1, text: "Carving the canyons"},
{id: 2, text: "Kickin' it"}
],
};
},
methods: {
deleteItem(index) {
debugger
this.posts.splice(index, 1);
}
},
template: `
<div>
<ol>
<post-item
v-for="(post, index) in posts"
v-bind:post="post"
v-bind:key="post.id"
v-on:remove="deleteItem(index)" />
</ol>
</div>
`
});
// Root Vue instance
new Vue({
el: '#app'
});
}
</script>
</body>
</html>
最佳答案
看起来您对事件的创建和处理有点困惑。
事件被发送到父组件。您通常不会在同一组件内添加事件监听器。
在 post-item 组件中，您真正需要的是使用适当的数据(即 post 对象)发出 remove 事件)
<div>
<li v-show="!editing">
<p v-html="post.text"></p>
<button @click="$emit('remove', post)">Delete</button>
</li>
</div>
然后在您的父组件(posts)中，在post-item 组件上监听此事件并分配事件处理程序
<post-item v-for="post in posts" :key="post.id" :post="post" @remove="deleteItem" />
并使用post payload 处理事件
methods: {
deleteItem (post) {
this.posts.splice(this.posts.indexOf(post), 1)
}
}
post-item 组件发出的 post 对象应该与传递给它的 prop 的对象完全相同，这就是为什么你可以直接使用 this.posts.indexOf(post)。无需搜索匹配的 id 属性。
关于vue.js - 如何让 Vue 捕捉事件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52508802/
24
4
0
如何知道 WM_DEVICECHANGE 的到来？ WndProc 被覆盖。我收到了所有消息，但没有一条是 WM_DEVICECHANGE 类型的。 RegisterDeviceNotificatio
我想创建一个滚动的表面列表框，它会在拖动完成后自动捕捉到一个位置，以便屏幕上的中心项目在视口(viewport)中居中。 我已经得到了中心项，但现在像往常一样，WPF 处理大小、屏幕位置和偏移量的方式
如果我有一个使用步长的范围 slider ，例如从 0 到 100，步长为 5，然后我在该范围之间有一个随机值，比如说 56，我如何确定最接近的捕捉值 (55) 是多少？ 我正在考虑向前和向后循环，直
我想添加到模块记录器中的所有功能。我想记录函数的“开始”时间和“结束”时间。这样我就可以获得每个函数(同步函数)的执行时间。 但我不知道如何让它工作.. =(我不想以某种动态方式重写函数 - 我想在将
我正在编写一个 C# 应用程序，如果文件已被某个进程使用，我必须在其中显示一条消息，如果该文件不存在，则应用程序需要显示另一条消息。 像这样: try { //Code to open a f
所以我正在使用城市词典 api，他们的术语可以链接到其他使用 [term] 和 api 的框，我想使它们实际上在 markdown 中超链接，即 term所以我尝试制作一个替换正则表达式来做到这一点我
我有一个使用鼠标滚轮 jQuery 插件的水平滚动网站。滚动有效，但我想将每个“文章”捕捉到文档的左侧，这样一旦停止滚动，它就不会停留在一半的位置。 我目前的标记: CSS #viewport { w
我需要在 windows 上录制声音。我需要写信来传输我从演讲者那里听到的内容。我可以依赖什么方法/API？ 最佳答案 您可以使用 DirectSound ;可以找到 sample here这是针对麦
for ii = 1:2:2*de.nP G=[one, aux3(:,ii), aux3(:,ii) - aux2(:,ii),aux3(:,ii+1) - a
您好，感谢阅读。我是编程、C# 和套接字编程方面的新手。在我的代码中，我尝试发现问题以在我的应用程序中提供容错能力。以下内容: catch (ArgumentNullException
我有一个函数可以运行用户生成的正则表达式。但是，如果用户输入了一个不会运行的正则表达式，那么它就会停止并跌倒。我试过将行包装在 Try/Catch block 中，但是没有任何反应。 如果有帮助，我正
嵌套的 Try/Catch 是否表示您的编码不干净？我想知道，因为在我的 catch 中，我正在调用另一个方法，如果失败，我会收到另一个运行时错误，所以我很想再次使用另一个 try/catch 将这些
我不知道如何放置一个相对于其同级路径边界框的路径。想象一个像窗口一样的盒子，我想在它的右上角放一个关闭按钮。这是在变换窗口(缩放 3 倍)后组合在一起的框和关闭按钮: 我只是在
我正在尝试使用 UISlider 实现某种形式的捕捉或步骤。我编写了以下代码，但它并没有像我希望的那样顺利。它可以工作，但是当我向上滑动它时，它会向右移动 5 个点，使手指不在“滑动圆”的中心 这是我
目前，我使用 Snap SVG 创建一个小型建模工具。 var p = Snap.path(pathString).attr({fill:'none', stroke:'black', strokeW
我希望能够使用 Snap SVG 将一组集合作为一个组进行拖动。到目前为止，我只能将子集(矩形和文本框)作为一个项目进行拖动，但我想要实现的是集体“表格”是可拖动的，而其中的字段仍保留为单独的形状，因
我有一段代码可以像这样抛出和捕获错误 try { } catch (e: FooException) { } catch (e: BarException) { } finally { } 并且有一些
我定义了一个自定义错误处理程序，它捕获所有异常并将它们保存到日志中。现在，如果我在 mysqli 查询中出现语法错误，例如拼写错误，页面会在此时完全停止加载。不会引发异常，因此不会触发错误处理程序，也
我有以下分组的svg文件，g的id为flower-petals，然后里面的每个部分都是花瓣，我似乎无法更改每个内部路径的填充。 我将 snap 的 petals 变量定义为 petals.Snap("
当脚本执行 Read-Host cmdlet，关闭窗口不会激活 finally堵塞。下面是一个随意但功能最少的示例。我正在使用 PowerShell 5.0。 Beep() 只是为了让 finally
我是一名优秀的程序员,十分优秀！