Vue.js中能否在模板字面量中使用@click事件？求解决方案

你在模板里用${}包裹@click表达式的方式是错误的，Vue模板指令里不适用这种语法，给你几个可行的解决办法：

• 直接在@click中写Vue表达式
  去掉${}，直接把逻辑写在@click指令里，Vue会自动解析表达式：

  <button class="viewButton body" @click="$router.push({ name: 'Staff Profile', params:{obj: JSON.stringify(sdList[s.staff_id-1])} })">More Details ></button>
  

• 抽离逻辑到组件方法（推荐）
  把路由跳转的逻辑放到组件的methods里，模板只负责调用方法，代码更清晰易维护：
  首先在组件的脚本部分定义方法：

  methods: {
    navigateToStaffProfile(staffData) {
      this.$router.push({
        name: 'Staff Profile',
        params: { obj: JSON.stringify(staffData) }
      })
    }
  }
  

  然后在模板里调用这个方法：

  <button class="viewButton body" @click="navigateToStaffProfile(sdList[s.staff_id-1])">More Details ></button>
  

• 检查数据的响应式与可用性
  确保sdList是Vue的响应式数据（比如在data里定义，或者通过Vuex/Composition API的ref/reactive声明），如果是异步加载的sdList，要保证渲染按钮时数据已经加载完成，否则可能无法获取到sdList[s.staff_id-1]。

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