vue动态绑定点击事件名称，如何绑定？

• Z时代
• 2024-02-22
• 分类：IT

vue动态绑定点击事件名称，如何绑定？这样实现不了

<li v-for="(item, index) in items">
  <a href="javascript:;" @click="item.ClickEvent">
    <cite>{{item.name}}</cite>
  </a>
</li>

     items: [
        {
          name: '主页',
          ClickEvent: "homeClick",
          lay_href: 'homepage.html',
          icon: 'icon-home'
        },
        {
          name: '上缴操作',
          ClickEvent: "sjczClick",
          lay_href: 'sjcz.html',
          icon: 'icon-home',
        },
]

回答：

这样子写吧

<li v-for="(item, index) in items">
  <a href="javascript:;" @click="handleClick(item.ClickEvent)">
    <cite>{{item.name}}</cite>
  </a>
</li>
//vue3 setup
<script setup>
const homeClick = () => {...}
const sjczClick = () => {...}
const handleClick = (eventName) => {
    switch(eventName) {
        case homeClick:
            homeClick()
            break
        case: sjczClick:
            sjczClick()
            break
    }
}
</script>
// vue2 optionAPI
<script>
    export default {
        ...
        methods: {
            handleClick(eventName) {
                this[`${eventName}`]()
            }
        }
    }
</script>

以上是 vue动态绑定点击事件名称，如何绑定？ 的全部内容， 来源链接： utcz.com/p/932833.html