Questions tagged [vue.js]

Vue.js is a forward-thinking and versatile JavaScript framework designed to facilitate the creation of visually appealing user interfaces. With its open-source nature, Vue.js allows for seamless integration and provides developers with the flexibility to gradually incorporate it into their projects. Primarily utilized in front-end development, proficiency in HTML and CSS at an intermediate level is essential when working with Vue.js. Given the dynamic updates and enhancements introduced in different versions, categorizing Vue.js queries based on specific versions becomes crucial. Therefore, along with this tag, it is highly recommended to include [vuejs2] or [vuejs3] tags while addressing Vue.js related issues.

Retrieve the desired element from an array when a button is clicked

When I click on the button, I need to update an object in an array. However, I am facing difficulties selecting the object that was clicked. For better readability, here is the link to my GitHub repository: https://github.com/Azciop/BernamontSteven_P7_V2 ...

javascriptvue.js

The start "NaN" is not valid for the timeline in vis.js

Whenever I attempt to make a call, an error message pops up saying Error: Invalid start "NaN". I've looked everywhere online for a solution with no success. Below are the timeline options: timeline: { stack: true, start: new Date(), end: new ...

javascriptvue.jsvuejs2vis.jsvis.js-timeline

Passing data between multiple components in Vue.js and Laravel: Best practices

require('./bootstrap'); window.Vue = require('vue'); Vue.component('exampleComponent1', require('./components/exampleComponent1.vue')); Vue.component('exampleComponent2', require('./components/exampleComponent2.vue')); const app = new Vue({ el: '#ap ...

javascriptlaravelvue.jsvuejs2

Placing a component within a div element using Vue

I recently integrated a Vue module to make objects draggable and resizable on my project. In my design, I envisioned creating movable and sizable boxes that contain dropdown menus, input fields, and radio buttons. As a starting point, I have included a sim ...

vue.js

I am attempting to create a footer with a set size, but encountering an issue

I'm in the process of developing a responsive website using Vue.js. One aspect I am working on is the footer container, which looks fine on the full screen but shrinks when the screen resolution is reduced below 1100 pixels. As shown in the images linked ...

htmlcssvue.jswebfrontend

Retrieve the following object in an array of objects using a specific property value in Javascript

I am working with an array of objects structured like this: orders: [ 0: { order_id: 234, text: 'foo' }, 1: { order_id: 567, text: 'bar' } ] Suppose I have the ID 234 and I want to find the next object in the a ...

javascriptvue.js

Establish a guideline based on a data property for a form input in vueJS

I recently visited a page at Upon exploring, I discovered the ability to customize rules, such as: rules: [ value => !!value || 'Required.', value => (value || '').length <= 20 || 'Max 20 characters', value => { const patt ...

formsvalidationvue.js

Interacting with iView UI dropdown menu items

I'm attempting to create a click event in iView ui. Here's my code: <DropdownMenu slot="list"> <DropdownItem @on-click="markAsRead">Mark as read</DropdownItem> </DropdownMenu> The function markAsRead isn't executing. Any sugg ...

javascriptvue.jsclickdom-eventsiview

Server experienced 405 error during production usage, not during local testing

Upon testing my application on the live server, I encountered a 405 error when attempting to delete records: Request URL: http://ijsbrekerz.xxx/api/cards/10 Request Method: DELETE Status Code: 405 Method Not Allowed Remote Address: 185.xx.xx.xx:80 Referrer ...

laravelvue.jssql-delete

The error "500 window is not defined in Nuxt3 when using the composition API"

Is it possible to detect the user's preference for color scheme and set a data-mode attribute on the document root (html)? I've been struggling with this. In my app.vue code, I have the following: <template> <div> <NuxtLayout /> <Nuxt ...

javascriptnode.jsvue.jsvuejs3nuxtjs3

VueJS: Prevent users from selecting options in the list that have already been chosen

Currently, I am delving into Vue.js and experimenting with creating a simple list that matches country codes to tax rates in various countries. Although it may seem mundane, I believe this exercise will prove useful in my future projects. This is the sele ...

vue.js

Accessing method from child component in parent component in Vue.js is a common requirement that can be easily

Is there a way to access a method in the parent component from the child component? I attempted to use mixins but found that the function was returning null instead of the expected value. However, when emitting an object, it worked fine in the parent compo ...

vue.jsvuejs3vue-options-api

Tips for effectively sharing content on social media from your Vuejs application

I have been using the vue-social-sharing library to enable social media sharing on my website, and overall it's been working well. However, I am facing a problem where when I click the Facebook share button, it doesn't share the title, description, and i ...

javascriptvue.jsvuejs2facebook-social-plugins

Retrieve the state data from the store and convert it into a string using Vue.js

Dear friends, I need some help with incorporating state data from my Vuex store into a string in one of the axios calls within actions. Below is an excerpt from my store: export const store = new Vuex.Store ({ state: { participants: [], filterTa ...

stringvue.jsaxiosvuex

Add custom scripts to individual components within a Vue.js application

After extensive searching, I still can't seem to find a solution to my current issue. My focus is on a Vue project with vue-cli, where I need to inject various scripts into different pages (leveraging vue-router). Here are more specific details: This is ...

javascriptvue.jsvue-cli

Including a "Placeholder" image in my <img> tag (VUE)

In a specific section of my website, I allow users to upload their own profile picture. However, if they choose not to upload one, I want to display a default image instead. After some research, I discovered that I can achieve this by using the following ...

vue.jsvuejs2vue-component

The v-navigation-drawer component in Vuetify 2 is not reappearing after setting dialog to false

I am utilizing the navigation drawer to display my data list in a dialog box. Everything works fine when I initially open it, however, upon reopening the dialog, the entire navigation drawer vanishes. The data GET operation is functioning correctly with no ...

vue.jsvuejs2vuetify.jsnavigation-drawer

Configuring the baseUrl for Axios in a Vue.js application triggers the sending of a request

I have encountered an issue in my app where Axios automatically makes a request to the baseUrl without me explicitly making one. This occurs even when the app is loaded in the browser. In my main.js file, I have set the baseUrl using: axios.defaults.baseU ...

javascriptvue.jsaxios

Vue.js Asynchronous while loop (continuously checking backend until task completion)

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 ...

vue.jsasync-awaitvuejs2vuex

"The Vue component's data is successfully updating within a method using setInterval(), however, the changes are not reflected in the DOM

I have a function in my methods that gets triggered with a @click in the view. The function starts a timer, and although it seems to work fine in the DevTools, the timer only updates in the DevTools when I refresh the page. Moreover, in the view, the time ...

javascriptvue.jssetintervalvue-reactivity

Need to import Vue component TWICE

My question is simple: why do I need to import the components twice in the code below for it to function properly? In my current restricted environment, I am unable to utilize Webpack, .vue Single File Components, or npm. Despite these limitations, I mana ...

asp.net-mvctypescriptvue.jsrequire

Having trouble with Laracast Video(Push Events to the Client) error?

After following a video tutorial on event handling, everything was working perfectly until the last minute when I tried to display the user name in real time on a list view. Although I could see each object in my console using console.log('users'), there ...

laravelvue.js

At random intervals, a ReferenceError is triggered stating that Vue is not defined

While working on an application that uses templates rendered by Apache Velocity, I encountered the error "Uncaught ReferenceError: Vue is not defined" when trying to incorporate vue.js components. Oddly enough, this error is not consistent - it occurs most ...

javascriptvue.jsvelocityapache-velocity

What is the best way to reference getter functions in Vue that have the same name?

...mapGetters('player', ['messages']), ...mapGetters('coach', ['chatMessages']), In a scenario where two getters share the same name, one solution is to access them using unique identifiers. For example, 'this.messages' may not work due to duplicate n ...

vue.js

What's the best way to organize a list while implementing List Rendering in VueJS?

Currently, I am working on List Rendering in Vue2. The list is rendering correctly, but it appears ordered based on the data arrangement in the array. For better organization, I need to sort each item alphabetically by title. However, I am facing difficult ...

javascriptvue.jsvuejs2

Unexpectedly, the npm watch command ceased functioning on WSL

I have a Symfony and Vue project that I develop locally using WSL 2. Lately, when I run npm run watch, it executes encore dev --watch successfully but does not update when I make changes to the code. It was working fine before, so I suspect it stopped work ...

vue.jsnpmwindows-subsystem-for-linux

Why is TinyMCE removing my custom MPDF HTML elements?

I have a Vue application with a Symfony backend. I am using TinyMCE to edit documents that are generated by mpdf. In the mpdf twig content, I need to add a page footer on certain pages and exclude it on others. To achieve this, I have created custom HTML t ...

symfonyvue.jstinymcempdf

Making changes to an input field can impact other elements when using the v-model directive

I am facing an issue with a cart setup where the quantity of all products are being updated when I increase the quantity of one product. How can I prevent this and only update the quantity of the selected product? <div v-for="(product, index) in cartPr ...

javascriptvue.js

Is there a way to access data dynamically during rendering and display the outcome?

Upon rendering the object below, I am able to implement something similar to: <div v-for="(card, groupIndex) in cards" v-bind:key="card.id"> <div> {{cards[groupIndex].group.length}} </div> </div> This code snippet provides a cou ...

vue.js

Encountering an error when trying to access this.$store.state in a basic Vuex

Encountered an error with return this.$store.state.counter: The property '$store' does not exist on the type 'CreateComponentPublicInstance<{}, {}, {}, { counter(): any; }, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, ...

typescriptvue.jsvuexthisvetur

Harness the power of Vue.js by implementing plugin methods in your code

For my first attempt at building a SPA with Vue, I decided to re-use a few functions but encountered some issues. The error message "this.ExperienceToLevel is not a function" kept popping up and it left me puzzled. Furthermore, I'm contemplating if c ...

javascriptvue.js

Remove the most recently played sound from an array of sound using Vue.js

I've been trying to figure out how to randomize the sounds that play when a button is clicked, but I also want to avoid repeating the last played sound. It just doesn't sound right if the same sound plays repeatedly in quick succession. I'm ...

javascriptvue.jsaudiovuejs3

Horizontal alignment of buttons within a textfield in Vuetify 2

I'm currently working with vuetify 2 and I am attempting to create a unique text field that includes 2 or more buttons as an inner append. I recently came across a snippet showcasing something similar here: https://www.reddit.com/r/vuetifyjs/comments/mb36s ...

vue.jsvuejs2vuetify.js

Launching a Component Using the Menu Feature in VueJS 3

I'm not particularly versed in frontend development, but I'm facing a bit of a challenge. I have a menu with an option labeled "VIEW PROFILE," and I want it to open another vue file I created with user information when clicked. The slide-out func ...

vue.jsvuejs3tailwind-css

Are the frameworks Vue, Angular, and React known for

During a conversation, I came across an interesting viewpoint criticizing popular frameworks such as Angular, Vue, and React. It was argued that these frameworks have a significant disadvantage: apart from the API part that interacts with the server's da ...

javascriptangularreactjsvue.js

When setting up Vue.js for unit testing, the default installation may show a message stating that

Recently set up a fresh Vue project on Windows 7 using the VueJS UI utility. Unit testing with Jest enabled and added babel to the mix. However, when running "npm test" in the command line, an error is returned stating 'Error: no test specified' ...

javascriptnode.jsunit-testingvue.jsbabeljs

If I only use a data property for determining its existence, will a computed property still rely on it for its calculation?

Here is the Vue component in question: export default { data: function() { return { editor: new Editor({ //some options }), } }, computed: { doc(){ // <--------------------- pay ...

vue.js

Signaling events from components to router-view – a red flag in the code base

As I delve into Vue Router, I'm detecting a peculiar odor. Before proceeding further, I feel the need to seek advice from the community to ensure that I am on the right track. Prior to Vue Router, I had a parent component receiving an event from its child ...

vue.jsvue-router

Vue.js: Exploring the issue of filtering using v-if and v-for

I'm encountering an issue with a computed property in Vue.js that is being used in a v-if statement. I've been struggling to find a solution or refactor the code. Any guidance on this matter would be greatly appreciated. Situation: Currently, I am display ...

vue.jsvue-directives

The condition is not established by the Firestore where clause

I'm working on a function that includes two where clauses. My objective is to verify the existence of a document based on the presence of two specific IDs. However, when I execute the function, it retrieves all the records in the collection instead. Can ...

javascriptfirebasevue.jsgoogle-cloud-firestore

Is it possible to set up Vite/Rollup in a way that only triggers vue-tsc for dependencies that are utilized by the entrypoints?

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 ...

vue.jsvuejs2vuejs3viterollupjs

The thread_id_key value must not be 0x7777 in order to execute the function find_thread_id_key, as specified in the ../src/coroutine.cc

I am currently working on a Vue project and encountered an issue after running npm run serve. The error message I received is as follows: 66% building 670/715 modules 45 active /Users/bytedance/go/src/code.byted.org/ad/omega_fe/node_modules/echarts/lib/cha ...

node.jsvue.jsnpmvue-component

In what ways can I align the ESLint rules of my Node.js server with those of my Vue.js frontend?

I am looking to ensure that my Node.js server-side files follow the same ESLint rules as my Vue.js frontend. The .eslintrc.js file in my Vue project is structured as follows: module.exports = { root: true, env: { node: true }, extends: ["plugin ...

node.jsvue.jseslintprettierprettier-eslint

Verify whether a variable includes the tag name "img."

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 ...

javascriptvue.jsvuejs2

Storybook is pulling fonts from an incorrect location on the server

Regrettably, I am facing an issue where the fonts do not load when accessing a page with Quasar integration. In the Developer Tools, it shows a path error like this: http://localhost:6006/undefined/node_modules/@quasar/extras/roboto-font/web-font/KFOmCnqEu ...

vue.jsvitestorybookquasar-framework

Navigating Vue 3's slot attributes: A step-by-step guide

Currently, I am facing an issue with a Vue component named MediaVisual. This component contains a slot. The problem arises when attempting to retrieve the src attribute of the slot element that is passed in. Surprisingly, this.$slots.default shows up as u ...

javascriptvue.js

Is there a way for me to adjust the font size across the entire page?

Most CSS classes come with a fixed font-size value already set. For instance: font-size: 16px font-size: 14px etc. Is there a way to increase the font size of the entire page by 110%? For example, font-size: 16px -> 17.6 font-size: 14px -> 15.4 ...

javascriptcssvue.jssass

Using Vuetify to submit form data using Axios

Utilizing Vuetify in my VueJs application, I am trying to send data from a form that includes file (CSV) uploads and various number inputs. My goal is to achieve this using Axios. Despite several attempts, I keep encountering a 404 error. This snippet sh ...

formsvue.jsaxiosvuetify.js

Best practice for incorporating Bootstrap into Webpack

Greetings everyone, I've been experimenting with Bootstrap for Webpack, but I've hit a roadblock. After reading numerous blog articles, I found that they either rely on the outdated 'bootstrap-webpack' plugin from 7 months ago (which doesn't work out of t ...

javascripttwitter-bootstrapwebpackvue.jsbabeljs

Upon reinstalling the node_modules in my Nuxt.js project, I encountered the error message "Must use import to load ES Module:~"

After reinstalling node_modules, I encountered an issue where ufo and node-fetch were missing. Upon adding them back in, running npm run dev resulted in an error when opening localhost in a browser. This same error persisted when cloning the project onto ...

node.jsvue.jsnpmwebpacknuxt.js

Implementing a change event upon setting a value to an input element using JavaScript

My plan is to develop a Chrome extension that can automatically fill passwords. The code for this functionality looks like the following: //get the account document.querySelector("input[type=text]").addEventListener('input', () => { fillPa ...

javascriptvue.js

Vue Single Page Application - invoking methods across all components

I am currently developing a notification feature that can be triggered from any component. It utilizes a straightforward Vuetify v-snackbar. Within App.vue <router-view :key="$route.fullPath"></router-view> <v-snackbar :valu ...

javascriptvue.jsvue-router

Setting the role attribute as "status" dynamically using VueJS

I'm searching for a method to define the role="status" attribute with vue.js. For instance: :role="{'status': isStatus}" <span class="result-total" role="status"> <span class="result-number"> ...

vue.js

What are the steps to set up a MEVN project to run on an intranet using nginx?

As a newcomer to the world of Vue, Node, Express, and MongoDB API while using Nginx, I have a question about where to place the port configuration. Can anyone provide insight on this? My project consists of a "client" folder and a "server" folder, both co ...

node.jsexpressnginxvue.js

Error: Combining objects that are not defined is not allowed

While running $ quasar dev on my Vue project, I encountered the following error: ~/project/node_modules/webpack-merge/dist/index.js:63 throw new TypeError("Merging undefined is not supported"); ^ [ TypeError: Mer ...

vue.jsnode-modulesquasar-frameworkquasarwebpack-merge

I'm trying to create a transparent v-card, but for some reason it's not turning out the way I want

How can I make the v-card transparent while keeping its content opaque using CSS? card.vue <v-card class="cardColor"> <v-card-text> TEXT </v-card-text> <v-card-actions> <v-btn color="prima ...

javascriptcssvue.jsvuetify.js

In the Vue framework, the navbar is capable of selecting two drawers simultaneously in the event that one path is

I am working on a Vue.js application that includes a sidebar. Within the v-list-item component, in the path :to="link.route", I'm utilizing route names like: { name: "dashboard" }. An issue arises when one link's path is contained wit ...

vue.jsroutesnavigationsidebar

Discovering ways to access deeply nested JSON data in Vue JS

i am dealing with JSON data that includes payment information. I am facing issues retrieving the paid_amount and date for both cash_payment and installment_payment. { "response": [ { "status": "sold", "price": "1000 ...

javascriptvue.js

Issue: Module 'C:viteinvite.js' not found while setting up vue.js in Laravel project

Decided to dive into learning Laravel and Vue.js, so I followed a tutorial for installation found here: Everything was going smoothly until I reached the npm run dev command... Below are the commands I executed in the Laravel project terminal (as shown i ...

node.jslaravelvisual-studiovue.jsvisual-studio-code

Looking to access XML file data using Vue.js on the server side?

I am trying to access an XML file located in a specific path on the server side using VueJS without using jQuery. Can you provide me with some ideas or advice? Scenario: 1. The file is stored at /static/label/custom-label.xml. 2. I need to read this file ...

javascriptxmlvue.jsfilereader

Utilizing EsLint with the airbnb-base configuration to ensure no unresolved imports in

I recently created a project using Vue-cli and decided to include a lint configuration by default. However, I am encountering an issue when running the lint command: error: Unable to resolve path to module '@/components/HelloWorld.vue' (import ...

vue.jseslinteslint-config-airbnb

Vue2 Component not displaying changes in data updates

I'm facing an issue where a Vue 2 component fails to render upon updating its data: Vue.component('image-slider', { data: function() { return { name : "Image1", src : "https://via.placeholder.com/250" } }, ...

vue.jsvuejs2vue-component

Tips for efficiently utilizing mapActions in vue with Typescript class components!

Can someone please provide guidance on the correct way to use ...mapActions([]) within a Typescript vue class component? This is my current approach: <script lang="ts"> import { Component, Prop, Vue } from "vue-property-decorator"; import { mapActi ...

typescriptvue.jsvuejs2vue-componentvuex

Using app.js in a blade file can cause jQuery functions and libraries to malfunction

In my Laravel application, I am facing an issue with my vue.js component of Pusher notification system and the installation of tinymce for blog posts. Adding js/app.js in my main layout blade file causes my tinymce and other jQuery functions to stop workin ...

javascriptphpjquerylaravelvue.js

Set up global variables for components to access

Currently, I am working on a Laravel 8 project with vue-sweetalert2 integration. My goal is to set up the Toast behavior once and then be able to call it within various components. At the moment, my code looks like this: /js/components/Mypage.vue <scr ...

javascriptvue.jslaravel-8

The Vite build tool creates unique CSS module classes for each component

Is it possible to set the CSS module class name in the index.js file generated during the Vite build process? I am developing with multiple themes and a single-entry JS file. Currently, this is the output I get when trying to build the project: Index.js & ...

htmlcssvue.jsvitecss-modules

Vetur is experiencing issues with template functionality, such as not properly checking data and methods

I have incorporated the vetur extension into my Visual Studio Code for a Vue project using TypeScript. I recently discovered that vetur has the capability to perform type checks within the template tag for props, methods, and even variables. However, in ...

typescriptvue.jsvetur

How can you extract path information from an SVG file and utilize it as a marker on Google Maps?

I want to implement a custom SVG icon as a marker on Google Maps. I have obtained this SVG file: <svg xmlns="http://www.w3.org/2000/svg" width="510px" height="510px" viewBox="0 0 510 510"> <g stroke="black" stroke-width="10" ...

javascriptgoogle-mapsvue.jssvg

"Troubleshooting: PrimeVue DataTable Not Displaying Proper

Attempting to utilize PrimeVue and implement the DataTable Component, but it is not appearing. It seems to be an issue related to $slots error? The Button component is rendering and functioning as expected. Table.vue <template> <div> ...

vue.jsprimevue

The view named 'HelloWorld' could not be found within the servlet named 'dispatcherServlet'

I have recently started learning Spring Boot. My goal is to display an HTML page, but unfortunately I am facing some issues. When I change HelloWorld.html to HelloWorld.ftl, I am able to display the FTL page. However, the vue.js file is not being resolve ...

springspring-bootvue.js

Heroku Woes: Vue-CLI Deployment Woes

I have been facing persistent challenges while trying to deploy my Node.js application with a Vue.js frontend on Heroku. Despite numerous attempts and different configurations, my builds consistently fail due to module resolution errors. Application Infor ...

vue.jsherokupackage.jsonvue-cliheroku-postgres

The act of rendering appears duplicated in the Codesandbox interface

While I am accustomed to using Codesandbox, I am facing an issue where the rendering is showing up twice for the first time, which has me puzzled about how to resolve it. Take for example the Contact component - the title and button are being displayed t ...

vue.jsvuejs3renderingvue-routercodesandbox

The mounted() lifecycle hook in Vue3 is getting invoked multiple times

Recently, I set up a vue template to display a table rendering all items from an array. Here's a snippet of what it looks like: <template> <thead> my table heads... </thead> <tr v-for="item in items" ...

vue.jsasynchronousvite

The results are positive in Postman, however, the browser does not display the same success

My website has a form that uses the v-model directive for data binding. It serves as a default login page. However, when attempting to log in, I receive a 401 unauthorized error. Interestingly, when testing the same credentials using Postman, I am able t ...

restvue.jsaxios

Displaying various pop-up notifications upon clicking a table element

I am completely new to VueJS and I'm currently working on populating a table with various columns, one of which contains a button that triggers the opening of a modal. There are three different types of modals that can be opened based on certain conditions ...

vue.jsbootstrap-vue