vuejs / eslint-plugin-vue

Official ESLint plugin for Vue.js
https://eslint.vuejs.org/
MIT License
4.38k stars 649 forks source link

Rule Proposal: vue/no-mutating-computed #2413

Open ThomasKientz opened 3 months ago

ThomasKientz commented 3 months ago

Please describe what the rule should do: Prevent mutating a computed without setter.

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:)

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

<!-- ✗ BAD -->
<script>
export default {
  data: () => ({
    msg: 'foo'
  }),
  computed: {
    foo() {
      return msg
    }
  },
  methods: {
    test() {
      this.foo = 'bar' // <----- no-mutating-computed
    }
  }
}
</script>

<!-- ✓ GOOD -->
<script>
export default {
  data: () => ({
    msg: 'foo'
  }),
  computed: {
    foo:{
      get() {
        return this.msg
      },
      set(newValue) {
       this.msg = newValue
    }
  },
  methods: {
    test() {
      this.foo = 'bar'
    }
  }
}
</script>