Skip to content

"vue/no-ref-as-operand" forbid ref assignments to reactive objects #1408

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

Closed
2 tasks done
dfidalg0 opened this issue Jan 4, 2021 · 1 comment · Fixed by #1409
Closed
2 tasks done

"vue/no-ref-as-operand" forbid ref assignments to reactive objects #1408

dfidalg0 opened this issue Jan 4, 2021 · 1 comment · Fixed by #1409

Comments

@dfidalg0
Copy link

dfidalg0 commented Jan 4, 2021

Checklist

  • I have tried restarting my IDE and the issue persists.
  • I have read the FAQ and my problem is not listed.

Tell us about your environment

  • ESLint version: 7.17.0
  • eslint-plugin-vue version: 7.0.0-0
  • Node version: 14.11.0
  • Operating System: Ubuntu 18.04

Please show your full configuration:

Configuration inside package.json, just the defaults for Vue 3 + CLI

{
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  }
}

What did you do?

<script>
import { ref, reactive, defineComponent } from 'vue';

export default defineComponent({
  // other options
  setup () {
    const u = ref(10);
    const v = ref(20);
    const obj = reactive({ u, v });
    
    obj.u = v; // This line causes the bug
  }
})
</script>

What did you expect to happen?
According to the Vue docs, on the topic "Access in Reactive Objects", "if a new ref is assigned to a property linked to an existing ref, it will replace the old ref", and there's this example

const count = ref(0)
const state = reactive({
  count
})

console.log(state.count) // 0

state.count = 1
console.log(count.value) // 1

const otherCount = ref(2)

state.count = otherCount
console.log(state.count) // 2
console.log(count.value) // 1

So, ESLint shouldn't complain about the assignment obj.u = v.

What actually happened?
ESLint throws this

62:17  error  Must use `.value` to read or write the value wrapped by `ref()`  vue/no-ref-as-operand

✖ 1 problem (1 error, 0 warnings)


 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=script&lang=js 1:0-37 5:10-14
 @ ./src/App.vue?vue&type=script&lang=js
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.0.97:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

It's not ideal to assign obj.u = v.value since it will cause the loss of the reactivity link from the ref to the reactive object.

Repository to reproduce this issue

Copying the code provided here in an existent Vue project should be enough to reproduce this one.

@ota-meshi
Copy link
Member

Thank you for this issue!
I fixed this issue and released it.
https://github.com/vuejs/eslint-plugin-vue/releases/tag/v7.4.1

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

Successfully merging a pull request may close this issue.

2 participants