is there any way to access property from data() inside setup()?

Question

I'm making app in Vue.js 2.6.14.

I use vue-query to fetch data from external API. I wanted to pass an argument - this.form.style to the query function, inside setup() but it seems to does not work. How should i do it properly?

<script lang="ts">
  const fetchRandomImg = async (style: FormType["style"]) => {
  const params = new URLSearchParams();

  if (style.type === "grayscale") {
    params.append("grayscale", "");
  } else if (style.type === "blur") {
    params.append("blur", style.blurValue.toString());
  }

  const response = await fetch(
    `https://picsum.photos/150?${params.toString()}`
  );

  const blob = await response.blob();

  return URL.createObjectURL(blob);
};


export default Vue.extend({
  data(){
    return{
     form:{
       style: {
        type:"normal",
        blurValue: 1
       },
      ...
     }
    }
  }
})

setup() {
 const { data: randomImg, refetch: refetchRandomImg } = useQuery(
  ["randomImage", this.form.style],
  () => fetchRandomImg(this.form.style),
  {
    refetchOnWindowFocus: false,
  }
);

return { randomImg, refetchRandomImg };
},

})
</script>

Answer 1

Put your JS code inside a created(){} function, inside the Vue.extend({}).

That should allow it access to this.