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

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?

CodePudding user response：

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>

CodePudding user response：

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