Vue.js如何修复`:=`语法绑定错误？

1. 先修正模板的语法错误 #

你模板里写的<img :=="imageInfo">是错误语法，Vue并不支持:=这种写法。要把对象中的属性批量绑定到<img>标签，正确的方式是使用v-bind指令绑定整个对象：

<template>
    <!-- 完整写法 -->
    <img v-bind="imageInfo">
    <!-- Vue 3支持的简写形式 -->
    <img :="imageInfo">
</template>

之前的错误语法导致ESLint无法识别模板中对imageInfo的引用，这才触发了“变量未使用”的报错。

2. 解决ESLint配置不生效的问题 #

如果修正语法后仍有报错，或你确实需要禁用no-unused-vars规则，检查以下配置：

• 确保.eslintrc.js的配置能覆盖Vue文件，正确配置示例：

  module.exports = {
    parser: 'vue-eslint-parser',
    rules: {
      "no-unused-vars": "off"
    }
  };
  

• 若只想局部禁用该规则，可在<script setup>顶部添加注释：

  <script setup>
  /* eslint-disable no-unused-vars */
  let imageInfo = {
      src: "https:/myImg.jpg",
      alt: "my img",
      width: 400
  };
  </script>
  

3. 最合理的解决方式 #

优先修正模板语法是最优解，这样ESLint能自动识别到imageInfo在模板中被使用，无需修改ESLint配置就能消除报错。

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