Can you apply this filter rule in VueJS? If an element has the filter discount, the parent will be styled with the class color-green (in this case, the span tag) Check out my JSFIDDLE for more details :) HTML <div id="app"> <h3>50% Disc ...
Looking to incorporate the following template into my component's render function, but struggling with how to do so. This is the current template structure: <template> <div> <slot name="item" v-for="item in filteredIt ...
Vue CLI 3.3 is what I'm using to develop projects for my vertical website with Vue. However, every time I build the project, the assets in dist/index.html always load from the root path. For example: <script src=js/chunk-vendors.b0f460c7.js></scri ...
Check out this cool code example I created. It's a simple tabs system built using Vue.js. Every tab pulls its content from an array like this: var tabs = [ { title: "Pictures", content: "Pictures content" }, { title: "Music", c ...
Within my api.php file, I have implemented two routes: Route::get('resume-list/{templateID}', 'BasicController@getAllResumes'); Route::get('resume/single/{id}', 'BasicController@getResume'); The first route is functioning correctly, but the second route ...
Currently, I have set up a mediastream (multi WebRTC) and plan on placing each MediaStream into the child component that contains a video tag. The stream type is MediaStream, however there is no corresponding type for a Vue prop. Refer to the Vue documenta ...
I am currently facing an issue with populating my events array from a meteor call so that it appears in a select list. The 'get.upcoming' Meteor function returns an array of JSON objects, but it seems like the select list is being rendered before ...
I am currently mounting a Vue component dynamically within a mixin to incorporate the resulting HTML into a map popup. While everything is functioning correctly, I am facing an issue with listening to events emitted by the component. I am unsure of how to ...
I am facing a situation where I need to update data whenever changes are detected in a state. The user should have the ability to further edit this information within a textarea. Although using computed properties fetches the data exactly as desired, any m ...
When working inside a vue action, I am interested in continuously checking the status of my backend by calling another async action until a certain task is completed (there will be a loader on the frontend to show progress). To elaborate, I need to keep m ...
I am encountering an issue with a table where the last column contains a div with three options (View, Edit, and Delete). This submenu is initially hidden, but when clicking on the options button in the last column of the table, the array used to control i ...
Description I am looking to create a table component with checkboxes, but I am facing an issue. Whenever I click on a checkbox, the click event is also triggered for the table row and cell containing the checkbox, which is not what I want. I have tried us ...
Using Vue.js along with the vuex store, I make an API call to validate an item, which returns arrays of errors and warnings. Below is my vuex action : export function validateitemReview ({ commit, dispatch, state }, { reviewId, type, itemreviewData }) { ...
<div v-for="(data, key) in imgURL" :key="key"> <img :src= "getLink(data)" /> </div> imgURL here is an array that contains file names. methods: { async getLink(url){ let response = await PostsService.downloadURL({ i ...
My view is always changing: <div id="myview"> <div :is="currentComponent"></div> </div> I have linked it to a Vue instance: new Vue ({ data: function () { return { currentComponent: 'myComponent', } }, }).$mo ...
I'm facing an issue where I am attempting to assign a data URL of an image to a state in Vue.js, but it is not getting assigned properly. After converting a blob URL to a data URL, the state does not contain the correct data URL. While the imgSrc does dis ...
Trying to implement a transition-group for animating list items upon deletion. The animation works smoothly when I remove an item from the list. However, adding a new list results in a console error message: [Vue warn]: <transition-group> children m ...
Is there a way to stop the Enter key from creating a new line in a contenteditable div? I attempted using @keyup.enter.prevent, but it did not work. I also tried @keyup.enter.prevent & @keyup.enter.stop.prevent with no success. ...
I am currently working on a backend built in Flask that provides a REST API for various tasks, one of which involves requesting deployment. Once the request is made, logs are stored in the database. To address this, I have created another REST API endpoint ...
Within my template, I have form-group components that are being iterated over based on the value of a select element (an integer). My goal is to access the values of these iterated v-models, but I am struggling to get it right. TEMPLATE <b-form-g ...
I've recently implemented the VueJS framework with Vuetify and I'm in need of a more advanced pagination feature than what is currently available. Specifically, I am looking for: An option to customize names (not just numbers) A tooltip displayed over t ...
I am currently importing the createStore function into a store.js file and passing an object with state properties and mutation functions as an argument, which is working well. createStore.js import Vue from 'vue' function createStore({ state, ...
I discovered a fiddle with a simple radio button functionality that I forked and made some modifications to. The changes worked perfectly, you can check it out in this fiddle: Vue.component('radio-button', { props: ['id', 'value'], template: ` ...
When using v-html to display content retrieved via AJAX, I encountered an issue with the "pre" tag not rendering as expected. Here is my component setup: <div v-html="content"></div> For example, the content includes: <h1>Title</h1 ...
I am currently working with an array in Vue where I am using v-for to create 3 columns of information. Each column includes an image, and I would like to be able to change only the specific image that is being hovered over without affecting any others. How ...
Here is my global state and shared component where I set and define getters: export default { getters: { loading(state) { return state.loading; }, statusMessage(state) { return state.statusMessage; }, }, } The store expor ...
Using the action, I retrieve all products and then utilize the computed method within the same component to display the data. Below is the structure of the component: <template v-for="product in allProducts"> <div class="ap-table-content"> ...
Having trouble iterating over mapGetters results and making changes only to a copy of the data? Here's my code snippet: ...mapGetters({ 'shop' : 'getShops' }) When I try to iterate over the shops and make modifications, it affects the parameters in t ...
How can I effectively test the v-if condition in my parent component using Jest? Parent Component: <div class="systemIsUp" v-if="systemStatus == true"> foo </div> <div class="systemIsDown" v-e ...
Currently utilizing the vuetify date range picker component https://i.stack.imgur.com/s5s19.png At this moment, it is showcasing https://i.stack.imgur.com/GgTgP.png I am looking to enforce a specific display format, always showing the lesser date first ...
How can I effectively utilize the data fetched using the Vuex store's action in a specific component? import axios from 'axios' export default { namespaced: true, state: { items: [] }, actions: { fetchCategories ({state, commit}) { ...
Hey there, I'm trying to figure out how to keep dropdown content from disappearing when using @mouseenter and @mouseleave. Here's what I have so far: <div class="wrapper"> <div class="link" @mouseenter="show = true" ...
I am looking to take my project to the next level with vue3 This project is based on symfony and utilizes vue as separate components on the frontend Since I have never tackled a major upgrade before, I'm unsure of the best approach. Any suggestions? ...
As I ponder on the best way to structure my Vue components, I am faced with a dilemma. Two of my Vue components share the same sass code, yet they have different markup, state, and methods. I am seeking a solution to reduce repetition of sass code across t ...
Currently, I am in the process of upgrading my Vue 2 project to Vue 3 and have decided to migrate from the Vue CLI to Vite since it is now end of life. The upgrade has resulted in numerous breaking changes, requiring refactoring of most files in the /src f ...
I'm facing an issue with uploading multiple images to Cloudinary from my Vue2JS front-end. I have successfully created a function that uploads a single image, but I am struggling with uploading multiple images using a forEach loop. upload(evt) { conso ...
Recently diving into Vue and came across an intriguing issue, I am curious to know the reason behind it and how to prevent it. <template> <div> <input type="number" v-model="a" style="color: white" /> <input type="number" v- ...
I am facing a situation where I have a component that is mounted as part of the DOM rendering process. The basic structure of the application looks like this: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...
Whenever I try to display my modal, an error pops up indicating that the property is not defined, even though I have clearly declared it in the Data(). It seems like there is a crucial aspect missing from my understanding of how everything functions... T ...
As a novice in the realm of Webpack, NPM, and VueJS, I find myself facing a perplexing issue. Despite my efforts to seek answers online, I remain stumped by the outcome when executing the command npm run dev in VueJS - wherein webpack generates 15 files l ...
I'm having trouble with my Vue component creation. I've been using v-show to hide certain elements, but it doesn't seem to be working as intended. The goal is to hide an element when clicked from a list by setting element.visible to false i ...
Having just begun my journey with Vue, I find myself in a bit of a predicament. As part of my learning process, I am developing an app for tracking episodes in TV series. The initial step involves searching for series and adding them to a database. When co ...
In my Vue.js data, the structure looks like this: new Vue({ el: "#app", data() { return { alpha: [{ artist: "Aa" }, { artist: "Az" }, { artist: "Ab" }, { artist ...
Currently, my app is built with Vue 2 using vue-tsx-support, vue-class-component, and vue-property-decorator. All of my Vue 2 components are already TSX classes. I am interested in gradually transitioning to React. I experimented with https://github.com/ ...
I have an array of data containing selected items, and I need to extract the IDs from this array into a new array so that I can send only the IDs to the back-end. Sample Code method toggleSelection(rows) { console.log('this.multipleSelection : ',this. ...
I'm developing a custom table feature that allows users to customize <td> elements using a slot. Here's the current setup: <tbody> <tr v-for="(item, key) in items"> <slot :item=item"> <td v-for="(header, he ...
On my profile page, I wanted to allow users to update their information. Initially, I fetched the data from the store using: this.$store.state.auth.user However, when I tried binding this data to input controls using v-model, the <input> element wo ...
Currently, I am in the process of integrating Vue I18n into my application. The issue I am facing is that when I switch the language using a locale switcher (without reloading the page), the translated strings appear correctly but the content above them di ...
Hello, I am a newcomer to Vue.js. I am facing an issue with my Vue.js application where I am unable to access the URL '/foo/apple' on the web hosting server after running "npm run build". It keeps showing error 404. I am using HTML5 History Mode ...
Apologies if the title doesn't fully capture my query. In the brief Vue code snippet below, I have 2 input fields. One utilizes v-bind and the other uses v-model. I am puzzled as to why changing the second input resets the value of the first input. ...
Here is the template I am working with: <template> <div> <div v-for="report in reports"> <div class="map" v-bind:id="mapID = report.started.toUpperCase()" v-text="report.started"> {{hello(mapID)}} </div& ...
Currently working on a Vue.js website that interacts with an API (route -> /api/**). However, I am struggling to figure out the process of sending JSON responses. Is there a similar method like res.json() in Vue.js as express.js has? ...
I am encountering an Uncaught ReferenceError: webpackJsonp in Vue Js all of a sudden. Although I am new to Js, I have recently started working on Vue applications. I have attempted various solutions from Git and stackoverflow but none of them seem to be ef ...
So I have this scaffold: https://github.com/vuejs/vue-cli Now, my goal is to integrate Webpack 3.8.1 into it. There's an existing "build" folder with numerous webpack files in it : https://i.stack.imgur.com/MJ3JP.png However, when I try running "webpac ...
There are numerous panels (products) displayed on a page in multiple rows and columns. Using Vue 2 with components for the panels, I aim to show details of each panel below its respective row upon clicking, similar to Google image search. https://i.stack. ...
Looking to localize the text displayed on v-text-field and vuetify-google-autocomplete components in Vuetify. Here's a snippet of the code: <template>(...) <v-text-field label="$t('common.nameLabel')" v-model="registerName" required &g ...
One thing that puzzles me is how to efficiently select a specific element in the DOM using VueJS, with or without jQuery. Within my component, I've created a method function that performs the following task: $(".u-loc input").focusin(function() { $(" ...
My Vue component includes checkboxes that have an array of items as their value: <div v-for="group in groups"> <input type="checkbox" v-model="selected" :value="group"> <template v-for="item in group"> <input type ...
Currently, the data is displayed in a span tag with an input for updating it Is it possible to fetch data from an API, load it into an input field, update the input with new information, and send it back? What are the best approaches for achieving this? ...
Greetings to the Vue.js user community! I'm facing a challenging issue that I can't seem to resolve: I am currently using Vue.js 2.x on Windows 11. Whenever I run yarn install or npm install, I encounter an error as displayed in the console. Vi ...
I have a requirement to dynamically generate a list using v-for, which includes radio input elements. The purpose of this list is to allow patients to book appointments based on the selected slot value that is passed to a function when a radio button in th ...
In my Vue.js application, I am utilizing a d3.js plugin to generate a intricate visualization. I am interested in implementing a customized vue directive to the components that were incorporated by the d3 plugin. It seems that the $compile feature, which ...
I have a sidebar displayed below: <template> <section> <div class="sidebar"> <router-link v-for="(element, index) in sidebar" :key="index" :to="{ name: routes[index ...
I am in the process of transitioning my code to Vue.js, so I am relatively new to Vue. In the screenshot provided (linked below), you can see that there are 4 columns inside a div with the class name columns. I attempted to use the index, like v-if='i ...
Need help! I am struggling with sending data from my Vue app to Symfony using axios. Even though I try to send the data, the Symfony request doesn't seem to receive it. Check out my controller code below: $form = $this->createForm(TeacherType::class); ...
After experimenting and seeking help on stackoverflow, I have managed to sort an array of objects based on the 'plate' key using the following function: sort(function(a, b) { return a.plate.toLowerCase() > b.plate.toLowerCase() ? a.pla ...
Does anyone have samples of code for adding a search bar to a vue2-leaflet map? I tried using the vue2-leaflet-geosearch package but encountered issues. Any alternatives or solutions would be greatly appreciated. Thank you in advance. <template> ...
current version of vue is 2.7.13 Although it supports jsx, I encounter a type error when using onClick event handling. The type '(event: MouseEvent) => Promise<void>' cannot be assigned to type 'MouseEvent' Is there a correct ...
I have a component that receives an object as a prop: <foo :ob='object'></foo> Within the component, the prop is defined like this: props: { ob: { type: Object, required: false, default: {} } } Typically, the expected struc ...
I am working on a full-stack application using express and the default vue-webpack-boilerplate. The structure of my project is as follows: ├── client │ ├── build │ │ └── ... │ ├── config │ │ └ ...
In my collection of objects, each item is structured like this: orders : [ { id: 1, image: require("./assets/imgs/product1.png"), originalPrice: 40, discountPrice: "", buyBtn: require(&q ...
I am currently working on parsing a list of objects found within a JSON payload into a table utilizing Vue.js. My goal is to extract the keys from the initial object in the array and use them as headings for the table. While the code I have in place succe ...
Hello, I am new to the world of web development and I'm currently learning vue.js. I am working on an app where I input an ID and upon clicking the search button, a method is called. This method utilizes axios to make a request to the controller and fetch ...
I'm trying to incorporate Vuelidate into my Vue Form. Within this form, I have Phone Number and Email fields. My goal is to validate if either of them is filled out using the "Or" Validator, but unfortunately, I haven't been able to find any exam ...
Currently, I am working with a variable that holds user input in HTML format. This input may consist of either plain text or an image. I am looking to determine whether the user has entered an image or just simple text. Here is an example of user entry: t ...