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>

You preferably shouldn't. Just use composition api.

Estus Flask
– Estus Flask

2023-04-30 16:50:48 +00:00
Commented Apr 30, 2023 at 16:50 — Estus Flask
– Estus Flask, Commented Apr 30, 2023 at 16:50

ProfDFrancis · Accepted Answer · 2023-04-30 16:50:39Z

0

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

That should allow it access to this.

answered Apr 30, 2023 at 16:50

ProfDFrancis

9,4151 gold badge24 silver badges33 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related