How to reference a setup() variable in an imported function?

Question

I have a component in which I define a reactive variable, and I would like to use it in an imported function. A simple example of the code is available in the playground

App.vue

<script setup>
import { change }  from './lib.js'
import { ref } from 'vue'

const msg = ref('one')
change()
</script>

<template>
  <h1>{{ msg }}</h1>
</template>

lib.js

export const change = () => msg.value = 'two'

The code above of course does not work because change() does not know msg. Msg on the other hand is not exportable as a <setup script> only variable.

My question: how should I declare msg so that I can refer to it from that exported function? Or, alternatively, is it possible to declare a reactive variable in lib.js?

WoJ · Accepted Answer · 2022-04-26 18:49:55Z

3

You could pass the msg as a param to your change method like this

lib.js

export const change = (msg) => msg.value = 'two'

and use it like that in your file App.vue

const msg = ref('one')
change(msg)

edited Apr 26, 2022 at 18:49

WoJ

30.6k60 gold badges220 silver badges414 bronze badges

answered Apr 26, 2022 at 10:46

kissu

47.3k16 gold badges94 silver badges197 bronze badges

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

Collectives™ on Stack Overflow

How to reference a setup() variable in an imported function?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related