eslint 錯誤處理:Parsing error: invalid-first-character-of-tag-name.

在使用 Vue 的時候,有時候會把運算符號寫進 template 而造成 eslint 錯誤如下:

Parsing error: invalid-first-character-of-tag-name.eslint (vue/no-parsing-error)

<div
  class="multi_material_select"
  v-for="(item, index) in selectValue"
  :key="index"
>
  <div>
    {{ 4 + index < 10 ? `010${4 + index}` : `01${4 + index}` }}
  </div>
</div>

其實上面的寫法是可以運作的,只是 eslint 會報錯,因為有驗證到 < 標籤符號,這算是 HTML 代碼的一部分,所以會錯誤。

解決辦法:有兩種方法

第一種方法:

< 改寫為字元實體,寫成 &lt; 或 &#60;,如下:

<div
  class="multi_material_select"
  v-for="(item, index) in selectValue"
  :key="index"
>
  <div>
    {{ 4 + index &lt; 10 ? `010${4 + index}` : `01${4 + index}` }}
  </div>
</div>

第二種方法:

v-text 方法,如果只有純文字內容,可以用這方法解決,如下:

<div
  class="multi_material_select"
  v-for="(item, index) in selectValue"
  :key="index"
>
  <div v-text="(4 + index < 10) ? `010${4 + index}` : `01${4 + index}`">
  </div>
</div>

這樣就達到同樣效果,eslint 也不會噴錯!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *