Vue 3 - How to use reactive ref and computed without .value?

Question

When we use Options API, we can define some properties in the computed section and some properties in the data section. All of them become accessible from the instance through the this reference, i.e. in the same object. It's very suitable.

For example:

if (this.hasMore) {
   this.loading = true;
   ...
}

Where hasMore is a computed property, loading is a reactive property.

Is there any possibility to do something similar via Composition API? For example, to implement similar code, but where pagination is a simple object, not a link to a component, like:

if (pagination.hasMore) {
   pagination.loading = true;
   ...
}

The computed is not solution at all, because it returns ref and its using will be completely different than using of this in the example above.

Dan · Accepted Answer · 2024-01-09 23:56:21Z

12

You could use a reactive object having a property which is a computed. Then it will all be accessible the way you want:

const pagination = reactive({
  loading: false,
  hasMore: computed(() => {
    return true;
  })
})

Demo:

const { createApp, reactive, computed } = Vue;
const app = createApp({
  setup() {
    const pagination = reactive({
      loading: false,
      hasMore: computed(() => {
        return true;
      })
    })
    if (pagination.hasMore) {
      pagination.loading = true;
      // ...
    }
    return {
      pagination
    }
  }
});
app.mount("#app");

<div id="app">
  {{ pagination }}
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.7/vue.global.min.js"></script>

edited Jan 9, 2024 at 23:56

answered Jan 31, 2021 at 9:36

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mbokil · Accepted Answer · 2023-04-12 11:48:08Z

9

If you really dislike having to use .value with ref you might be interested in the Reactivity Transform compiler macro.

Update for 2023: Reactivity Transform feature will not be added to Vue 3 as a core feature. Instead, add the feature using the Vue Macros library. https://vue-macros.sxzz.moe/features/reactivity-transform.html

// declaring a reactive variable backed by an underlying ref
let count = $ref(1)
console.log(count); //no .value needed!

vite.config.js

import { defineConfig } from 'vite'
import ReactivityTransform from '@vue-macros/reactivity-transform/vite'

export default defineConfig({
  plugins: [ReactivityTransform()],
})

edited Apr 12, 2023 at 11:48

answered Jan 16, 2022 at 16:31

mbokil

3,36035 silver badges23 bronze badges

1 Comment

Maksim Shamihulau Over a year ago

Thanks for the answer! Hope one day Vue will get rid of this annoying .value suffixes and follows Svelte neat approach.

Collectives™ on Stack Overflow

Vue 3 - How to use reactive ref and computed without .value?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related