question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

vue/attributes-order: v-dom-portal errors if placed after v-if

See original GitHub issue

Tell us about your environment

  • ESLint Version: 4.14.0
  • eslint-plugin-vue Version: 4.3.0
  • Node Version: 8.9.4

Please show your full configuration:

"vue/attributes-order": [2, {
          order: [
              "DEFINITION",
              "LIST_RENDERING",
              "CONDITIONALS",
              "RENDER_MODIFIERS",
              "GLOBAL",
              "UNIQUE",
              "CONTENT",
              "OTHER_ATTR",
              "BINDING",
              "EVENTS"
          ]
      }]

What did you do? Please include the actual source code causing the issue.

<div v-if="isVisible" v-dom-portal="true" :class="classes"></div>

What did you expect to happen? v-dom-portal directive should not fail linting, as it should be OTHER_ATTR imo

What actually happened? Please include the actual, raw output from ESLint. Instead it seems to be recognised as either DEFINITION or LIST_RENDERING, and the following message displays:

Attribute "v-dom-portal" should go before "v-if". (vue/attributes-order)

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:2
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

5reactions
skyrpexcommented, Mar 28, 2018

What about letting us cherrypick the exact attributes? For example, I would like the v-t directive (from vue-i18n) to be grouped with v-text and v-html, while having the other directives in a different priority.

"vue/attributes-order": [2, {
    order: [
        "DEFINITION",
        "LIST_RENDERING",
        "CONDITIONALS",
        "RENDER_MODIFIERS",
        "GLOBAL",
        "UNIQUE",
        "BINDING",
        "OTHER_ATTR",
        "EVENTS",
        ["CONTENT", "v-t"],
    ],
}]
0reactions
mitarcommented, May 1, 2018

I agree with @skyrpex, I also think we should put them all into a separate category, but translation ones should go into content.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Understand and solve hydration errors in Vue.js - sum.cumo
Understand and solve hydration errors in Vue.js ✘ What is hydration? When do problems occur? What are the causes?
Read more >
vue/attributes-order
Rule Details #. This rule aims to enforce ordering of component attributes. The default order is specified in the Vue.js Style Guide and...
Read more >
In Depth Vue 3 For Beginners | Chris Dixon - Skillshare
Together we explore everything Vue.js has to offer from the ground up, all while building 4 projects to put your knowledge into practice....
Read more >
Learn Vue 3, a Front-End JavaScript Framework
In the course, you will learn the fundamentals of VUE and apply what you learn to build an e-commerce website. Here are the...
Read more >
Vue js error: Component template should contain exactly one ...
Note This answer only applies to version 2.x of Vue. Version 3 has lifted this restriction. You have two root elements in your...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found