CODEWITHSUNDEEP
typescriptvue.jsvuejs3
HKK
HKK

Reputation: 187

Vue3 setup returned value can't be found in the rest of that component

It says "anything returned here will be available for the rest of the component"(https://v3.vuejs.org/guide/composition-api-introduction.html#setup-component-option), but I got this error on c which is a variable returned in setup: Cannot find name 'c'.ts(2304).

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  setup(props) {
    let c = 123;
    return { c }
  },
  methods: {
    increment() {
      c;
    }
  }
})
</script>

Any help?

Upvotes: 4

Views: 2433

Answers (2)

Usatei
Usatei

Reputation: 68

You have two ways to create a function in vue 3.

  • Add inside the setup method ( better )

Here the this. do not exists, so you can write a simple function like

const add = () => ++c.value

Here, the istance do not exist yet, so you can write c without this. Remember to export the function and create the c variable with ref or it won't update

  • Use the method object like you did

You can use this way but you need to use this. param because the istance now exists

Upvotes: 0

Salvino D&#39;sa
Salvino D&#39;sa

Reputation: 4506

You need to access the variables exposed via setup method using this keyword in your methods.

Warning:

But this is just a bad way to proceed because you are mixing composition api with options api. Refer to this thread to understand the difference between the two.

Vue.createApp({
  setup(props) {
    let c = 123;
    return { c }
  },
  methods: {
    increment() {
      console.log(this.c);
    }
  }
}).mount('#app')
<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <button @click="increment">Increment</button>
</div>

Correct way achieving it using Composition API:

Vue.createApp({
  setup(props) {
    const c = Vue.ref(123);
    const increment = () => c.value++;

    return {
      c,
      increment
    }
  },
}).mount('#app')
<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <span>{{ c }}</span><br/><br/>
  <button @click="increment">Increment</button>
</div>

Upvotes: 9

Related Questions