Rule proposal: vue/v-text-no-child-content

[dmke]

Please describe what the rule should do:

When using the v-text directive, the element's inner content gets overwritten by the result of the v-text expression.

What category should the rule belong to?

[ ] Enforces code style (layout)
[x] Warns about a potential error (problem)
[ ] Suggests an alternate way of doing something (suggestion)
[ ] Other (please specify:)

This might just belong to the layout category, not sure.

Provide 2-3 code examples that this rule should warn about:

<template>
  <!-- ✓ GOOD -->
  <div v-text="foo"></div>

  <!-- ✗ BAD -->
  <div v-text="foo">{{ bar }}</div>
</template>

Additional context

I'm in the process of localizing an app, and stumbled upon a few elements which already used v-text, but also had child content:

<template>
  <label class="control-label col-sm-3" v-text="fields.name.label">
    Name
  </label>
</template>

This isn't really a problem, just unnecessary and confusing.

[ota-meshi]

Thank you for the rule proposal. That rule is sounds good to me.

[FloEdelmann]

The same is true for v-html too, right? Maybe the rule can be generalized to vue/v-html-v-text-no-child-content?

[ota-meshi]

The same is true for v-html too, right? Maybe the rule can be generalized to vue/v-html-v-text-no-child-content?

You're right 👍.

[dmke]

Hm, come to think of it, can we generalize it and make the directives configurable?

vue-i18n for example has a v-t directive, which does something similar.

// .eslintrc.js
module.exports = {
  rules: {
    // default: ["error", "always", { directives: ["text", "html"] }]
    "vue/no-child-content", ["error", "always", { directives: ["text", "html", "t"] }],
  },
}

[ota-meshi]

That's a good idea!

[ota-meshi]

"vue/no-child-content", ["error", "always", { directives: ["text", "html", "t"] }],

We probably don't need the second option ("always").

[vdanviel]

hello, how can I disable this rule ?

[dmke]

hello, how can I disable this rule ?

Same as any other eslint rule: Add "vue/v-text-no-child-content": "off" to your rule set (e.g. .eslintrc.json).

See the documentation for further details.

[vdanviel]

hello, actually my problem is related to the "vue/no-child-content" rule.

i am having a problem on my application due the need of using childs tags inside a tag with v-html attribute.

i NEED that this tag accepts childs so i can add tags inside this father-tag on futher occasions (and together with the v-html elements when I open the page too!)

i am desactivating it as the documentation explains but for some reason the rule is still on operation in my application..

here is my .eslintrc.json:

module.exports = {
  root: true,
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    "vue/multi-word-component-names": "off",
    "vue/no-child-template": "off",
    "vue/no-child-content": "off",
    "vue/v-text-no-child-content": "off"
  }
}

[FloEdelmann]

The rule is called vue/no-child-content, not vue/v-text-no-child-content. You're disabling the wrong rule.

If you have more problems with that rule, please check the documentation and open a new issue instead of commenting on old issues (otherwise it's more likely to go off-topic, be overlooked, or cause noise for unrelated people).

[dmke]

The rule is called vue/no-child-content, not vue/v-text-no-child-content.

(Sorry, my bad :))