I’m scratching my head because I ran npm i swiper and read through the Swiper Vue docs and it says to import { Swiper, SwiperSlide } from ‘swiper/vue which I’ve done and I even get the bundle size showing 95.4K (gzipped: 28.9K). When I run npm run serve I then get this error I for the life of me cannot
Tag: vue.js
Display JSON file content in Vue
I’ve json file with some data. I’ve to fetch this data and display them in the component. In my vuex store in actions I have: mutations: and state: And now how to get this todos in state and display them when Homepage is mounted? JSON file example: Answer Well you can use mapState in your components
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
Force Nuxt to run script tag
I have a script on a page: If I go to the page via a NuxtLink in the navigation the script runs, however if I type the URL to the browser address bar it doesn’t. Is there a way to force the NuxtLink result when the page is accessed directly? The script tag is coming from a CMS so there
Vuejs seems to struggle with v-model when many items on the page
I have a simle page containing a form at the top to submit some data and a list below that form as in the image: The list is filled by data from an api and each object has 4 properties (not many for a simple list!). Currently the list has 130 elements in total. Now if I try to write
Find and change item in Javascript array of arrays
I am trying to find and change a item that is inside of an array of arrays. My array is like that: The way i’m doing it now is using a forEach: The problem is that I can’t stop the loop and I believe there must be a better way, maybe using the ‘find’ command. I can do this with
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
I want to create a activate/deactive button in vue
This is my table. As you can see I have added a button to perform an action. The action needs to change active to not active and not active to active upon clicking. I cannot seem to find the SQL area that I could access which makes it difficult for me to update the database upon clicking. Any suggestions or
How to combine each select tag’s data
I’m creating a sign-up page in vue3 now and trying to pass the value of birthDate. The date of birth consists of three select tags and each tag has a year, month, and day as an option. I want to combine the values of each select tags into birthDate. and need to deliver the value of the birthDate through ‘axios