access state in setup on methods Vue 3 got error TS doesn't exist-CodePudding

I am using Vue 3 and TS, I have some states in the Setup function which like this

export default defineComponent({
  setup() {
    const isLoadingSendData = ref(false)

    return { isLoadingSendData }
  
  },
  methods: {
    disableBtn(): boolean {
       // on Webstorm i got error: TS2339: Property 'isLoadingSendData' doesn't exist 
       // on type 'disableBtn(): boolean'
       if(this.isLoadingSendData) {
         return // do something
       }
       return // do something
    }

  }
})

that is just an example I can give for a case, the this.isLoadingSendData got error red on my IDE, does anyone know why ??

CodePudding user response：

You can't call composition api setup() variables in options api methods, data, etc,if you want to declare a method inside composition api, it's like this:

export default defineComponent({
  setup() {
    const isLoadingSendData = ref(false);
    const disableBtn = (): boolean => {
      if (this.isLoadingSendData.value) {
        return; // do something
      }
      return; // do something
    };

    return { isLoadingSendData, disableBtn };
  }
});

If you want to use options api, you can declare it like this:

export default defineComponent({
  data() {
    return {
      isLoadingSendData: false
    };
  },
  methods: {
    disableBtn(): boolean {
      if (this.isLoadingSendData) {
        return; // do something
      }
      return; // do something
    }
  }
});

so the choice is either you use composition api or options api.

Also, there is alternative syntax for composition api, that is to use <script setup> tag. You can declare it like this:

<script setup lang="ts">
import { ref } from "vue";

const isLoadingSendData = ref(false);
const disableBtn = (): boolean => {
  if (this.isLoadingSendData.value) {
    return; // do something
  }
  return; // do something
};
</script>

you can access everything inside <script setup> tag in template tag

CodePudding user response：

If you're using Vue 3 with the setup function, you won't need to use methods function like in Vue 2 and other previous versions of Vue. You can simply reference everything in the template from the return object from the setup function. Also make sure to enclose the script section with lang="ts" for TypeScript support.

<script lang="ts">
export default defineComponent({
  setup() {
    const isLoadingSendData = ref(false)

    return { isLoadingSendData }
  }
})
</script>

<template>
  <div v-if="isLoadingSendData">
    <p>Loading...</p>
  </div>
  <div v-else>
    <p>Finished Loading</p>
  </div>
</template>

CodePudding user response：

Just to add some more info to the already good answers. Vue3 also has another option called setup script which is much more simple. I also recommend the Volar extension instead of Vetur for the latest Vue setup syntax

<script setup lang="ts">
import { ref, Ref, computed, ComputedRef } from "vue";

const isLoadingSendData: Ref<boolean> = ref(false);
//You could use the `ref` above on the template already,
//but in case you want a computed value
const disableBtn: ComputedRef<boolean> = computed((): boolean => {
  return !isLoadingSendData.value
})
</script>

<template>
   <div>
      <button v-show="disableBtn">disabled button</button>
      <button v-show="!disableBtn">normal button</button>
   </div>
</template>

You don't need to return anything since de setup script already giving it's values to the template. And instead of having a function or computed to check for loading status, you can use the ref directly :)