vue.js - 将类添加到 p 标签会引发 eslint 错误

Question

我正在开发一个项目并将 Vue 集成到其中。webpack 编译器包含 eslint 和 vues eslint。当我尝试编译代码时，出现错误cannot read property 'replace' of undefined。每当我尝试向其添加<p>具有任何类型属性的标签时，就会出现这种情况。查看下面的代码<p class="name">John Smith</p>将引发错误。如果我删除它，错误就消失了。

我没有replace在文件中的任何地方使用，所以我不确定为什么 eslint 会抛出这个错误，或者如何克服它。

组件文件

<template>
    <div v-if="committee_id > 0">
        <a
            href="#"
            class="line-btn blue"
        ><span>Return to the section's committees list</span></a>
        <h2>{{ data.title }}</h2>
        <div
            v-html="data.content"
        ></div>
        <div class="btn-cnt">
            <a
                href="#"
                class="curve-btn blue"
                @click.prevent="goBack"
            ><span>Join the committee</span></a>
        </div>
        <div class="roster detail-roster">
            <h3>Committees Roster</h3>
            <div class="row">
                <div class="col-xs-6">
                    <p class="name">John Smith</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {EventBus} from '../event-bus';
    import axios      from 'axios';

    export default {
        data() {
            return {
                classArray: {
                    name: 'name',
                    title: 'title',
                },
                committee_id: 0,
                data: [],
                api_url: (API.restUrl !== undefined) ? API.restUrl : '',
            };
        },
        created() {
            EventBus.$on('committee-post-id', committee_id => {
                this.committee_id = committee_id;
                this.getCommitteePost();
            });
        },
        methods: {
            getCommitteePost: () => {
                this.$nextTick(function () {
                    axios.get(`${this.api_url + this.committee_id}`)
                         .then(({data}) => {
                             if (data.message === 'success') {
                                 this.$nextTick(function () {
                                     this.data = data;
                                 });
                             }
                         })
                         .catch(err => {});
                });
            },
            goBack: () => {

            }
        },
        name: 'section-committee'
    };
</script>

埃斯林特

module.exports = {
  "root": null,
  "globals": {
    "wp": true
  },
  "env": {
    "node": true,
    "es6": true,
    "amd": true,
    "browser": true,
    "jquery": true
  },
  'extends': [
    'plugin:vue/recommended'
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "globalReturn": true,
      "generators": false,
      "objectLiteralDuplicateProperties": false,
      "experimentalObjectRestSpread": true
    },
    "ecmaVersion": 2017,
    "sourceType": "module"
  },
  "plugins": [
    "import"
  ],
  "settings": {
    "import/core-modules": [],
    "import/ignore": [
      "node_modules",
      "\\.(coffee|scss|css|less|hbs|svg|json)$"
    ]
  },
  "rules": {
    "no-console": 0
  }
}

标签： vue.jsvuejs2vue-componenteslint

Answer 1

仍然不确定发生了什么，但 linter 的解决方案是更改我的 linter 文件中的以下内容。

'extends': [
    'plugin:vue/base'
  ],