How to fix Parsing error: invalid-first-character-of-tag-name.eslint (vue/no-parsing-error) in Vue

Question

Code

 <div class="flex justify-center">
            <vs-chip v-if="current" class="text-base w-24" :color="color">
              {{
                getPercentage > 0 && getPercentage < 3
                  ? "Neutral"
                  : getPercentage > 3 && current < average
                  ? "Buy"
                  : "Sell"
              }}
            </vs-chip>
          </div>

How can I fix this parsing error in vue ?

Is there a way to solve this without disabling the eslint rule ?

This [comment](https://github.com/vuejs/eslint-plugin-vue/issues/370#issuecomment-830774152) might help. — Abdul Niyas P M, Sep 09 '21 at 15:51

score 2 · Answer 1 · answered Sep 13 '21 at 15:56

In my case by adding the following under the rules of .eslintrc.js worked:

"vue/no-parsing-error": [
    "error", 
    {
        "invalid-first-character-of-tag-name": false,
    }
],

PS: you may need to stop the server and run npm run lint for the rule to be applied

score 0 · Answer 2 · answered Jan 23 '22 at 08:17

Other solutions if you do not want to update eslint:

Using v-text directive:

<div class="flex justify-center">
  <vs-chip v-if="current" class="text-base w-24" :color="color" v-text="
    
      getPercentage > 0 && getPercentage < 3
          ? 'Neutral'
  : getPercentage > 3 && current < average
  ? 'Buy'
  : 'Sell'
  ">
  </vs-chip>
</div>

Or using &lt replace <, and &gt replace >:

<div class="flex justify-center">
        <vs-chip v-if="current" class="text-base w-24" :color="color">
          {{
            getPercentage &gt 0 && getPercentage &lt 3
              ? "Neutral"
              : getPercentage &gt 3 && current &lt average
              ? "Buy"
              : "Sell"
          }}
        </vs-chip>
      </div>

score 0 · Answer 3 · answered Aug 01 '22 at 04:00

This is probably better solved with a computed property instead of a nested ternary (I'm assuming that getPercentage, current and average are either data or props, hence adding this)

computed: {
  myLabel() {
    if (this.getPercentage > 0 && this.getPercentage < 3) {
      return "Neutral"
    } else if (this.getPercentage > 3 && this.current < this.average) {
      return "Buy"
    } else {
      return "Sell"
    }
  }
}

In component

<div class="flex justify-center">
  <vs-chip v-if="current" class="text-base w-24" :color="color">
    {{myLabel}}
  </vs-chip>
</div>

How to fix Parsing error: invalid-first-character-of-tag-name.eslint (vue/no-parsing-error) in Vue

3 Answers3