VueJS - 事件“单击”无效处理程序：未定义

我有点击时想要编辑的元素列表。我在其他组件有类似的解决方案，它工作得很好，但在新的它不是，也找不到原因。VueJS - 事件“单击”无效处理程序：未定义

当组件被渲染我： Invalid handler for event "click": got undefined

列表：

<div v-for="annt in anns" class="item two-lines" v-if="!anntInEdit"> 
      <div class="item-content has-secondary" v-on:click="edit(annt)"> 
      <div> 
       {{ annt.title }} 
      </div> 
      <div > 
       {{ annt.body}} 
      </div> 
      </div> 
      <div class="item-secondary"> 
      <a><i >delete</i></a> 
      </div> 
     </div>

JS：

edit (annt) { 
     if (this.anntInEdit == null) { 
      this.anntInEdit = annt 
      this.anntInEditBackup = Object.assign({}, this.anntInEdit) 
     } 
     this.anntInEditIndex = this.anns.indexOf(annt) 
     },

当我将只按一下，我得到了公布与形式编辑SNF DIV显示，我可以使用保存（ajax），取消（只需设置为无）等，但只要我触摸任何输入内编辑div我得到： [Vue warn]: Invalid handler for event "click": got undefined vue.common.js?e881:1559 Uncaught (in promise) TypeError: Cannot read property 'invoker' of undefined 只要出现错误，版本中的任何按钮都根本不起作用。

相同的div用于新建/编辑，并且对于新的通知工作非常合适。任何想法？

整个元件引擎收录：http://pastebin.com/JvkGdW6H

来源

2016-11-20 M U

可能是一些小错误，如果你发布整个组件结构。 –

我今天晚上会做，我家有代码 –

整个组件：http：//pastebin.com/JvkGdW6H –

明白了。这不是关于顶级功能@click。这是关于@click的元素，当最高级别点击被调用时，它正在呈现。我在函数名中有一个拼写错误。不幸的是，Vue没有抛出缺失函数的名称，这就是为什么我找不到它的原因，因为我在错误的地方看...

来源

2016-11-21 21:47:24

我真的不跟随的问题，可能是一个很好的发布更完整的示例。但是看起来您需要使用该项目的索引。这应该有助于你抓取正确的物品。这就是说，如果点击事件未定义，那么它听起来像它没有在该组件上注册。

以下可以帮助作为一个例子...

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    \t anns: [ 
 
    \t { state: 'none' }, 
 
     { state: 'none' }, 
 
     { state: 'none' }, 
 
    ], 
 
    }, 
 
    methods: { 
 
    \t edit (index) { 
 
     this.anns[index].state = 'editing' 
 
    }, 
 
    }, 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.8/vue.min.js"></script> 
 
<div id="app"> 
 

 
    <div v-for="(annt, index) in anns"> 
 
    <button v-on:click="edit(index)">edit</button> 
 
    <p>state: {{ annt.state }}</p> 
 
    </div> 
 

 
</div>

来源

2016-11-20 20:52:47 GuyC

试过了。抛出完全相同的错误... –

是的，如果你有组件中的错误，上面不会解决这个问题，更多的是如何重构的例子。如果您发布完整的组件，那么我们可以对其进行故障排除。 – GuyC

我今天晚上会做，我家里有代码 –

VueJS - 事件“单击”无效处理程序：未定义

回答

相关问题