I want to return the headings array from an axios.get function and use it on root level inside my vue component but when I try to return it, it shows: This is the script element from my Vue3 Component: Edit: Thanks to Thomas and huan feng I can do this: This is the most elegant solution because reactive objects provide
Tag: vuejs3
Why won’t my async call fire inside this Vue 3 component (using composition API)?
I’m trying to make an async call to fetch data from my Fauna database. But I can’t get the async call to fire. Inside the setup() function I have console.log(“Setup is working”); and that works as expected. It shows on page load. Then inside the callApi async function I have console.log(“callApi is working”);. That async function is called on a
Vue 3 Append Component to the DOM: Best Practice
I would like to dynamically create a component in my Vue 3 app that I have in an SFC, and append it to the DOM. I am using <script setup> style components, which is yet another wrinkle. This seems unnecessarily hard. Here’s more or less what I want to do: Fetch some data. Got that. Make an instance of my
How to inherit props from parent route with vue-router
I have the following router configuration and would like that the id of the main.parent route is converted to an integer and then passed into the child components (given props: true) for all child components. However, it seems as if the route function is only really called once (when evaluating /:id) and not when /:id/details is evaluated. The relevant code
Vue 3 defineEmits breaks defineProps types
I’m using Vue 3 and TS 4.4. I’ve got a component that defines its prop types with defineProps. When I add a call to defineEmits, VS Code starts telling me my props variable doesn’t exist in the component template. Here’s the source code: And a couple of screenshots to better show what I’m seeing in VS Code. This is after
What is the correct way of using axios.post in Vue 3?
I am trying to get axios.post to work in vue 3 with laravel 8 as backend but I am getting a POST http://localhost:3000/contact 500 (Internal Server Error). This is my vue component (without css): In addition, is there a way to use an array instead of properties inside of axios.post like so: Answer Try like following if You need to
How to run a function whenever unknown anchor tags are clicked in Vue.js 3?
I have a div with v-html that displays data from a database: <div id=”Content” v-html=”${Content}”></div> Within the ${Content} that is presented, there can be any number of a tags with links to other external pages. I need to parse these and then add an @click handler to each of them. An example would be: <p>Calm down, Marty, I didn’t disintegrate
Add CSS to Vue using JavaScript
I am trying to add style to this <label> tag on Vue. I want that when the onPrimaryPicSelected function is called to add a CSS styling to the <label> tag. How can I do this if it is possible? Currently the onPrimaryPIcSelected just gets the image that was uploaded. Answer You can use a boolean variable if true it will
How to make two permission menu with 2 role login in Vue JS 3
My router file checking what role is logged in: and my admin router is: I have already add requiresAdmin: true, requiresStaff: true, in meta field. But when i login with admin, its work. But when i login with staff account, i cant reach dashboard page. Answer The problem is that when you are logged in as staff and you access
Firebase – Vue database integration not working
I am trying integrating Firebase with Vue 4 application is currently getting the following error. Uncaught TypeError: db__WEBPACK_IMPORTED_MODULE_1_.default.database is not a function I am using “firebase”: “^9.0.0” “vue”: “^3.0.0” My function call is as below I tried the following the following suggestion but it didn’t work. Thank you! Answer The new modular SDK does not use namespaces anymore. So you