Nuxt.js中Vuetify下拉按钮点击报handler.apply错误如何解决？

你为@click绑定的item.to是字符串类型的'print()'，并非可执行的函数对象。Vue的事件绑定逻辑要求@click接收的参数是函数引用，触发事件时Vue内部会尝试调用handler.apply()执行回调，而字符串不存在apply方法，因此抛出该类型错误。

另外你的代码还存在一个隐含问题：组件的data选项不能使用箭头函数声明，箭头函数的this指向外层作用域而非组件实例，会导致无法正常获取组件的methods、props等属性。

不能直接将带括号/不带括号的函数字符串直接绑定给@click作为回调。如果需要通过配置动态触发对应方法，可采用以下两种可行方案：

方案1：actions数组存储函数引用 #

将data改成普通函数声明，actions的to字段直接存对应方法的引用：

<script>
export default {
  // 去掉箭头函数，用普通函数声明data
  data() {
    return {
      actions: [
        {
          title: 'Print',
          to: this.print
        },
        {
          title: 'Download',
          to: this.download
        }       
      ]
    }
  },
  methods: {
    print() {
      // 打印逻辑
    },
    download() {
      // 下载逻辑
    }
  }
}
</script>

模板部分的@click="item.to"不需要修改即可正常运行。

方案2：存储纯函数名字符串，点击时动态调用 #

actions的to字段存不带括号的纯函数名字符串：

actions: [
  {
    title: 'Print',
    to: 'print'
  },
  {
    title: 'Download',
    to: 'download'
  }       
]

模板部分的点击事件修改为通过实例访问对应方法执行：

<v-list-item
  v-for="(item, index) in actions"
  :key="index"
  @click="this[item.to]()" 
>

内容的提问来源于stack exchange，提问作者user15242898