Javascript - Vue.js - 事件“点击”的无效处理程序

Question

我是Vue.js的新手，我有点击时想要编辑的元素列表。我在渲染时遇到了事件“点击”错误的无效处理程序，但我找不到原因。我用vue-cli构建它。

以下是代码：

<template lang='pug'>
  div#app

    div.input-area
      ul.toggle
        li.item.i1
          button#toggle-1(v-on:click="font") Roboto
        li#item.item.i2
          button( v-on:click="font") Roboto Condensed
        li.item.i3
          button( v-on:click="font") Noto Serif
        li.item.i4
          button( v-on:click="font") Droid Sans Mono
        li.item.i5
          button( v-on:click="font") Cutive Mono
        li.item.i6
          button( v-on:click="font") Coming Soon
        li.item.i7
          button( v-on:click="font") Dancing Script
        li.item.i8
          button( v-on:click="font") Carrois Gothic SC

      textarea(width="400", height="600")
</template>

<script>
import Vue from 'vue'

var fonts = new Vue({
  el: '#toggle-1',
  data: {
    name: 'name'
  },
  methods: {
    font: function (event) {
      alert('click')
    }
  }
})
</script>