Got "valid-v-for" if I write key in bind attribute

[iigmir]

Tell us about your environment

• ESLint version: v6.6.0
• eslint-plugin-vue version: v4.7.1.
• Node version: v12.8.0

Please show your full configuration:

// https://eslint.org/docs/user-guide/configuring
const production_only = () => process.env.NODE_ENV === "production" ? "error" : "off";

module.exports = {
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": [
        "plugin:vue/essential",
        "eslint:recommended"
    ],
    "parserOptions": {
        "ecmaVersion": 7,
        "ecmaFeatures": {
            "impliedStrict": true,
            "jsx": true
        },
        "sourceType": "module",
        "parser": "babel-eslint"
    },
    "globals": {
        "Tether": true,
        "Promise": true,
        "google": true
    },
    "plugins": [
        "html", "vue"
    ],
    "settings": {
        "html/html-extensions": [
            ".html",
            ".vue"
        ]
    },
    "rules": {
        "accessor-pairs": "error",
        "array-bracket-spacing": [
            "error",
            "never"
        ],
        "array-callback-return": "off",
        "arrow-parens": [
            "error",
            "as-needed"
        ],
        "arrow-spacing": [
            "error",
            {
                "after": true,
                "before": true
            }
        ],
        "block-scoped-var": "error",
        "block-spacing": [
            "error",
            "never"
        ],
        "brace-style": "off",
        "callback-return": "error",
        "class-methods-use-this": "error",
        "comma-dangle": "off",
        "comma-spacing": "off",
        "comma-style": [
            "error",
            "last"
        ],
        "complexity": "error",
        "computed-property-spacing": [
            "error",
            "never"
        ],
        "consistent-return": "off",
        "consistent-this": "off",
        "curly": "off",
        "default-case": "off",
        "dot-location": [
            "error",
            "property"
        ],
        "dot-notation": "error",
        "eol-last": "off",
        "eqeqeq": "off",
        "func-call-spacing": "error",
        "func-name-matching": "error",
        "func-style": "warn",
        "generator-star-spacing": "error",
        "global-require": "off",
        "guard-for-in": "error",
        "handle-callback-err": "error",
        "id-blacklist": "error",
        "id-length": "off",
        "id-match": "error",
        "indent": ["error", 4],
        "init-declarations": "off",
        "jsx-quotes": "off",
        "key-spacing": "off",
        "keyword-spacing": [
            "error",
            {
                "after": true,
                "before": true
            }
        ],
        "line-comment-position": "error",
        // 'linebreak-style': [
        //     'warn',
        //     'windows'
        // ],
        "lines-around-comment": "off",
        "lines-around-directive": "error",
        "max-depth": "error",
        "max-len": "off",
        "max-nested-callbacks": "error",
        "max-params": ["error", 4],
        "max-statements": "off",
        "max-statements-per-line": "off",
        "multiline-ternary": "off",
        "new-cap": "error",
        "new-parens": "error",
        "newline-after-var": "off",
        "newline-before-return": "off",
        "newline-per-chained-call": "off",
        "no-alert": "error",
        "no-array-constructor": "error",
        "no-await-in-loop": "error",
        "no-bitwise": "error",
        "no-caller": "error",
        "no-catch-shadow": "error",
        "no-confusing-arrow": ["error", {"allowParens": true}],
        "no-continue": "error",
        "no-console": production_only(),
        "no-debugger": production_only(),
        "no-div-regex": "error",
        "no-duplicate-imports": "error",
        "no-else-return": "error",
        "no-empty-function": "error",
        "no-eq-null": "error",
        "no-eval": "error",
        "no-extend-native": "error",
        "no-extra-bind": "off",
        "no-extra-label": "error",
        "no-extra-parens": "off",
        "no-floating-decimal": "error",
        "no-implicit-coercion": "error",
        "no-implicit-globals": "error",
        "no-implied-eval": "error",
        "no-inline-comments": "error",
        "no-inner-declarations": [
            "error",
            "functions"
        ],
        "no-invalid-this": "off",
        "no-iterator": "error",
        "no-label-var": "error",
        "no-labels": "error",
        "no-lone-blocks": "error",
        "no-lonely-if": "error",
        "no-loop-func": "error",
        "no-magic-numbers": "off",
        "no-mixed-operators": [
            "error",
            {
                "allowSamePrecedence": true
            }
        ],
        "no-mixed-requires": "error",
        "no-multi-assign": "error",
        "no-multi-spaces": "off",
        "no-multi-str": "error",
        "no-multiple-empty-lines": "error",
        "no-native-reassign": "error",
        "no-negated-condition": "error",
        "no-negated-in-lhs": "error",
        "no-nested-ternary": "off",
        "no-new": "error",
        "no-new-func": "error",
        "no-new-object": "error",
        "no-new-require": "error",
        "no-new-wrappers": "error",
        "no-octal-escape": "error",
        "no-param-reassign": "error",
        "no-path-concat": "error",
        "no-plusplus": "off",
        "no-process-env": "off",
        "no-process-exit": "error",
        "no-proto": "error",
        "no-prototype-builtins": "error",
        "no-restricted-globals": "error",
        "no-restricted-imports": "error",
        "no-restricted-modules": "error",
        "no-restricted-properties": "error",
        "no-restricted-syntax": "error",
        "no-return-assign": "error",
        "no-return-await": "error",
        "no-script-url": "error",
        "no-self-compare": "error",
        "no-sequences": "error",
        "no-shadow-restricted-names": "error",
        "no-spaced-func": "error",
        "no-sync": "error",
        "no-tabs": "off",
        "no-template-curly-in-string": "error",
        "no-ternary": "off",
        "no-throw-literal": "error",
        "no-trailing-spaces": "off",
        "no-undef-init": "error",
        "no-undefined": "warn",
        "no-unmodified-loop-condition": "error",
        "no-unneeded-ternary": "error",
        "no-unused-expressions": ["error", {"allowShortCircuit": true, "allowTernary": true}],
        "no-use-before-define": "error",
        "no-useless-call": "error",
        "no-useless-computed-key": "error",
        "no-useless-concat": "error",
        "no-useless-constructor": "error",
        "no-useless-escape": "off",
        "no-useless-rename": "error",
        "no-useless-return": "error",
        "no-var": "off",
        "no-void": "error",
        "no-warning-comments": "error",
        "no-whitespace-before-property": "error",
        "no-with": "error",
        "object-curly-newline": "off",
        "object-curly-spacing": "off",
        "object-property-newline": [
            "error",
            {
                "allowMultiplePropertiesPerLine": true
            }
        ],
        "object-shorthand": "error",
        "one-var": "off",
        "one-var-declaration-per-line": "error",
        "operator-assignment": "error",
        "operator-linebreak": [
            "error",
            "after"
        ],
        "padded-blocks": "off",
        "prefer-arrow-callback": "off",
        "prefer-const": "off",
        "prefer-numeric-literals": "error",
        "prefer-promise-reject-errors": "error",
        "prefer-reflect": "off",
        "prefer-template": "off",
        "quote-props": "off",
        "quotes": ["error", "double", {
            "avoidEscape": true,
            "allowTemplateLiterals": true
        }],
        "radix": [
            "error",
            "always"
        ],
        "require-await": "error",
        "rest-spread-spacing": "error",
        "semi": ["error", "always"],
        "semi-spacing": "off",
        "sort-imports": "off",
        "sort-keys": "off",
        "sort-vars": "error",
        "space-before-blocks": "off",
        "space-before-function-paren": "off",
        "space-in-parens": [
            "error",
            "always",
            {
                "exceptions": ["{}", "[]", "()"]
            }
        ],
        "space-infix-ops": "off",
        "space-unary-ops": "error",
        "spaced-comment": "off",
        "strict": "error",
        "symbol-description": "error",
        "template-curly-spacing": "error",
        "template-tag-spacing": "error",
        "unicode-bom": [
            "error",
            "never"
        ],
        "vars-on-top": "off",
        "wrap-iife": "error",
        "wrap-regex": "error",
        "yield-star-spacing": "error",
        "yoda": [
            "error",
            "never"
        ]
    }
};

What did you do?

<template>
    <b-nav-item v-for="(item) in link_binding" v-bind="{ key: item.name.id }" >
        Elements inside
    </b-nav-item>
</template>

What did you expect to happen?

It should no error when key is in the v-bind attribute.

What actually happened?

This is what puzzles me the most: I got this error when I use Vetur in VScode:

I try to use yarn eslint src/my-file.vue, but there were no errors shown, so I post an issue in Vetur. However, my issue was closed because they said the issue "should be reported on eslint-plugin-vue".

[CorneVgit]

Pretty sure you have to do v-bind:key="item.name.id"
or the shorthand version :key="item.name.id"

[iigmir]

Pretty sure you have to do v-bind:key="item.name.id"

I know that, but it will be annoying when you need to write more v-bind:

<foo-bar v-for="(item) in link_binding" v-bind:key="item.name.id" v-bind:id="id_binding" v-bind:class="class_binding" v-bind:disabled="disabled_binding" v-bind:bind-to-child="bind_to_child_binding">
</foo-bar>

I mean, I can write something like this to make components looks more clear:

<foo-bar v-for="(item, index) in link_binding" v-bind="foobar_binding(item, index)">
</foo-bar>

// In JavaScript
methods: {
    foobar_binding(item, index) {
        return {
            key: index
            id: item.whatever + "-dom"
            // ... bypass
        };
    },
};

or the shorthand version :key="item.name.id"

It's impossible to bind an object of attributes using shorthand.

[ota-meshi]

Thank you for this issue.

We can't fully track scripts from v-bind directives, so we can only rule out errors when v-bind with no arguments is used.
However, I don't want to do this because ignoring v-bind with no arguments can leave a potentially invalid v-for.

I want to know your ideas.

[iigmir]

I usually write my v-bind into computed or methods instance(Or, at least, write them into v-bind="{ }" directive) to make component looks more clear and simple like what I mentioned above, thanks for the object binding syntax. But I can't do this in the iteration component due to the v-bind:key directive.

I don't know if this can clearly explain my idea.

However, as you said, it's not possible to fully track scripts from v-bind directives, so maybe it's hard to solve this issue.

[FloEdelmann]

You can use :key="item.name.id" v-bind="otherAttributes". Given this workaround, I guess it's fine to close this issue.

[iigmir]

Recently I found the article describing the key attribute on the official site:

key here is a special attribute being bound with v-bind. It should not be confused with the property key variable when using v-for with an object.

So I guess this is the way we should write.