vue/no-use-v-if-with-v-for does not work with v-else

[tomers]

Tell us about your environment

• ESLint version:
• eslint-plugin-vue version:
• Node version:

  "devDependencies": {
    "babel-eslint": "^10.0.1",
    "eslint": "^5.12.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-friendly-formatter": "^4.0.1",
    "eslint-loader": "^2.1.1",
    "eslint-plugin-html": "^5.0.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-node": "^8.0.1",
    "eslint-plugin-promise": "^4.0.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^5.1.0",
    "quasar-cli": "^0.17.23",
    "strip-ansi": "=3.0.1"
  },

Please show your full configuration:

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  env: {
    browser: true
  },
  extends: [
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    // 'plugin:vue/essential',
    'plugin:vue/recommended',
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard'
  ],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  globals: {
    'ga': true, // Google Analytics
    'cordova': true,
    '__statics': true
  },
  // add your custom rules here
  'rules': {
    // allow async-await
    'generator-star-spacing': 'off',

    // allow paren-less arrow functions
    'arrow-parens': 0,
    'one-var': 0,

    'import/first': 0,
    'import/named': 2,
    'import/namespace': 2,
    'import/default': 2,
    'import/export': 2,
    'import/extensions': 0,
    'import/no-unresolved': 0,
    'import/no-extraneous-dependencies': 0,

    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
  }
}

What did you do?

The following code raises vue/no-use-v-if-with-v-for warning:

<div
  v-if="elements.length > 0"
  v-for="element in elements"
  :key="element.id"
>
  Item #{{ element.id }}
<div>
<div
 v-else
>
  No items
</div>

However, if I change the order of the elements, I get no warning:

<div
  v-if="elements.length === 0"
>
  No items
</div>
<div
  v-for="element in elements"
  v-else
  :key="element.id"
>
  Item #{{ element.id }}
<div>

What did you expect to happen?
I expect that code to raise vue/no-use-v-if-with-v-for warning.

What actually happened?
Nothing

[mysticatea]

Thank you for this report!

Indeed, sounds like a bug.

[ota-meshi]

I checked this issue in the Vue Template Explorer.

As stated in the Guide, v-for has a higher priority than v-if, so v-for when used together with v-if is a problem.
However, v-for has a lower priority than v-else, so v-for when used together with v-else is a not problem.

So I think vue/no-use-v-if-with-v-for rule is working correctly.
@mysticatea What do you think?

[ota-meshi]

I don't think this is a bug, so close this issue.