在VUE3中定义了方法，但是使用显示Uncaught ReferenceError: XXX is not defined

Question

如题所述：显示无法找到方法，代码如下：

<template>
  <vab-card shadow="hover">
    <div v-for="(item, i) in items" class="contentDiv">
      <el-date-picker
        v-model="item.value"
        :key="item.id"
        end-placeholder="结束日期"
        range-separator="至"
        start-placeholder="开始日期"
        type="datetimerange"
      />
      <div v-if="i > 0" onclick="subDatePickerFun(i)" class="leftLine">
        <vab-icon icon="checkbox-indeterminate-line" class="vabIconLine" />
      </div>
    </div>
    <div>
      <i onclick="addDatePickerFun">
        <vab-icon icon="add-box-line" class="vabIconAdd" />
      </i>
    </div>
  </vab-card>
</template>
<script>
export default defineComponent({
    name: 'CustomDateTool',
    components: {},
    setup() {
      const state = reactive({
        items: [{ value: '', id: 'item_1' }],
      })
     const addDatePickerFun = () => {
        // state.items.push({ value: '', id: 'item_' + (e + 1) })
        console.log('数据：', state.items.length)
      }
      const subDatePickerFun = (e) => {
        console.log('数据：', e)
      }
      return {
        ...toRefs(state),
        addDatePickerFun,
        subDatePickerFun,
      }
    },
  })
</script>![](/img/bVcZuPc)

是语法没有弄对还是怎么的，我反复检查没有语法问题呀！这个是什么原因呢？

Answer 1

onclick=>@click