How do you get variables from the setup script in vue3

Question

How would I access variables declared within the setup script within the none setup script? I attempt to update the message in the example below when something happens within the script tags. However, msg just returns undefined, I've looked through the Vue documentation on setup scrips, but there doesn't seem to be any mention of accessing the variable in none setup scripts.

<script setup>

   var msg = 'Hello!';

</script>

<script>

export default {
  data() {
    return {

    };
  },
  mounted(){
   
      // my current attempt to get msg and update it. However, I just get undefined.
      this.msg = 'Something happened inside script tags';
      //or msg = 'Something happened inside script tags';
    
  },

</script>


<template>
  <p>{{ msg }}</p>
</template>

Why do you want to use both?

cSharp
– cSharp

2022-07-27 08:30:17 +00:00
Commented Jul 27, 2022 at 8:30 — cSharp
– cSharp, Commented Jul 27, 2022 at 8:30

Dr4jw3r · Accepted Answer · 2022-07-27 08:37:15Z

3

Seems like you are mixing up two syntaxes here - the newer, Composition API (Vue3, setup script) and Options API (Vue2 style, one with data and mounted functions). While it's still ok to use the Options API syntax, you should only use one of the two. I suggest reading up on the different syntaxes:

Composition API

Options API

The tag is syntactic sugar for THIS type of syntax. Everything returned by the setup() function will be made available to the template. If you're using the tag, by default everything is made available.

For the Options API syntax, everything returned by the data function is made available to the template. Delete the entire first tag and try adding the "msg" property to the object returned by the data function and see if it works.

  data() {
    return {
        msg: ''
    };
  }

answered Jul 27, 2022 at 8:37

Dr4jw3r

1811 silver badge8 bronze badges

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

Collectives™ on Stack Overflow

How do you get variables from the setup script in vue3

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related