vue/no-shared-component-data
enforce component's data property to be a function
- ⚙️ This rule is included in all of
"plugin:vue/essential",*.configs["flat/essential"],"plugin:vue/vue2-essential",*.configs["flat/vue2-essential"],"plugin:vue/strongly-recommended",*.configs["flat/strongly-recommended"],"plugin:vue/vue2-strongly-recommended",*.configs["flat/vue2-strongly-recommended"],"plugin:vue/recommended",*.configs["flat/recommended"],"plugin:vue/vue2-recommended"and*.configs["flat/vue2-recommended"]. - 🔧 The
--fixoption on the command line can automatically fix some of the problems reported by this rule.
When using the data property on a component (i.e. anywhere except on new Vue), the value must be a function that returns an object.
📖 Rule Details
When the value of data is an object, it’s shared across all instances of a component.
<script>
/* ✓ GOOD */
Vue.component('some-comp', {
data: function () {
return {
foo: 'bar'
}
}
})
export default {
data() {
return {
foo: 'bar'
}
}
}
</script>
<script>
/* ✗ BAD */
Vue.component('some-comp', {
data: {
foo: 'bar'
}
})
export default {
data: {
foo: 'bar'
}
}
</script>
🔧 Options
Nothing.
📚 Further Reading
🚀 Version
This rule was introduced in eslint-plugin-vue v3.8.0