Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rule proposal: Prevent setting nested writable computed value #1891

Open
1 of 4 tasks
Armaldio opened this issue May 16, 2022 · 3 comments
Open
1 of 4 tasks

Rule proposal: Prevent setting nested writable computed value #1891

Armaldio opened this issue May 16, 2022 · 3 comments

Comments

@Armaldio
Copy link

Armaldio commented May 16, 2022

Please describe what the rule should do:
The rule should warn when trying to set a writable computed ref nested property.

What category should the rule belong to?

  • Enforces code style (layout)
  • 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:

import Vue from 'vue'
import { defineComponent, ref, computed } from '@vue/composition-api'

export default defineComponent({
  setup(props, { root }) {
    const value = ref('French')

    const language = computed({
      get() {
        return {
         	selected: value.value 
        }
      },
      set({ selected }) {
        value.value = selected
      }
    })
    
    console.log(value) // French
    console.log(language) // { selected: 'French' }
    
    // Good
    language.value = { selected: 'English' }
    
    // Bad, it has no effect unlike a standard ref
    language.value.selected = 'German'

    return {
	  language
    }
  }
)}

Additional context

With writable computed ref, it's easy to fall into this case since IDE suggestion will show nested properties.

@FloEdelmann
Copy link
Member

Should this maybe also report setting of nested refs? Or is reactivity working as expected in this case?

const myRef = ref({ nested: 'foo' });

myRef.value = { nested: 'bar' }; // GOOD
myRef.value.nested = 'baz' // Maybe BAD? Should maybe use `reactive` instead?

In this case, I'd suggest the rule name vue/no-deep-mutating-refs (since computed returns a ComputedRef or WritableComputedRef).

@Armaldio
Copy link
Author

Reactivity is working fine in case of a regular ref

@FloEdelmann
Copy link
Member

Thanks for checking. Then I'd suggest rule name vue/no-deep-mutating-computed-ref.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants