能否在Vue.js中直接编写JavaScript？代码编译报错求助

你当前的代码有两个问题：一是用了原生HTML的onclick绑定函数，ESLint无法识别模板里的这个调用，所以判定openpopup和closepopup未被使用，抛出no-unused-vars错误；二是直接操作DOM不符合Vue的响应式开发规范。

修复方案如下：

• 替换原生onclick为Vue的@click指令，让ESLint能检测到函数调用
• 用响应式数据控制弹窗的显示状态，替代直接操作DOM的classList
• 将函数定义在Vue组件的methods选项中，这是Vue组件定义方法的标准方式

修正后的完整代码：

<template>
  <div class="customers-page">
    <h2>Customers</h2>

    <button type="button" class="add-button" @click="openPopup">Add</button>
    <div class="popup" :class="{ 'open-popup': isPopupOpen }">
      <h3>Input the following information</h3>

      <button type="button" class="submit-customer-button" @click="closePopup">Submit</button>
    </div>  
  </div>
</template>

<script>
export default {
  data() {
    return {
      isPopupOpen: false
    }
  },
  methods: {
    openPopup() {
      this.isPopupOpen = true
    },
    closePopup() {
      this.isPopupOpen = false
    }
  }
}
</script>

说明：

• :class="{ 'open-popup': isPopupOpen }"是Vue动态class语法，当isPopupOpen为true时，自动给弹窗添加open-popup类
• 函数放在methods中通过@click绑定，ESLint会识别到函数已被使用，不会再报错
• 全程通过响应式数据控制视图，符合Vue的设计理念

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