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.

Help with Vue.js App Deployed on Heroku: How to Fix "Cannot GET /" Error?

When I try to access the URL for my Vue.js application (), it correctly takes me to the homepage. However, clicking on the 'Start' button, which should redirect me to '/test', gives me an error message saying 'Cannot GET /test'. I am uncertain about what ...

laravelapivue.jsherokudeployment

A guide on transferring JSON data from a Django view to Vue.js instance methods

Looking for assistance with Vue.js - I'm new to it. How can JSON data be passed from a Django view to a Vue instance (method)? Views.py def articles(request): model = News.objects.all() # getting News objects list random_generator = random.ran ...

pythonjsondjangotemplatesvue.js

Sending information to a VueJS component

Hey there! I have a challenge in VueJS where I need to transfer Firebase Authentication user data (JSON) from the App.vue component to another component named Details.vue. The goal is to display the name of the logged-in user on Details.vue. In App.vue: ...

javascriptvue.jsfirebase-authenticationvue-component

Vue3's transition behavior sets it apart from Vue2. It introduces new functionalities when managing templates outside of the transition

I recently made the leap from Vue2 to Vue3, but I'm encountering some challenges with the transition behavior. Here is the original Vue2 code: https://codesandbox.io/p/sandbox/silent-surf-yth66k?file=%2Fsrc%2FApp.vue <template> <div id="a ...

vue.jsvuejs3vuejs-transition

Attempting to delete a request using FormData resulted in a 500 error response

Currently, I am working on deleting an attachment by sending a request with form data containing a URL through an API path along with an ID. deleteAttachment(id, url) { const formData = new FormData(); formData.append('url', url); const conf ...

javascriptvue.jsaxiosmultipartform-datamultipart

Is it possible to invoke the created() function in Vue from another method?

Currently, I am developing an application in Vue. Upon loading the page, a cookie containing the user's zip code is retrieved and used to perform a search. However, users should also have the ability to change their zip code if it is incorrect. I would l ...

javascriptvue.jsjavascript-framework

What is the best way to retrieve the modelValue from within a Vue 3 directive?

Here is a question: How can I access and update el.modelValue from a custom directive? directives: { currency: { mounted(el, binding, vnode, prevVnode) { console.log(vnode, prevVnode) el.oninput = (e) => { if (Numb ...

vue.jsvuejs3

Vue's inability to compare an object property with a string leads to failure

Conclusion: It was a typo. I am facing an issue in Vue where I cannot seem to compare two values properly. I have an id and an object, but when I loop through the object properties to check if the ids match, it always returns false even though they appear ...

vue.jsvuejs2vuex

The Spring Boot application is having trouble retrieving static files

I started a fresh springboot project and organized the directory structure as follows: view image description here The yml configuration is outlined below: server: port: 8783 servlet: context-path: /spring-demo spring: scan : com.example appli ...

htmlspring-bootvue.js

There are no errors in the HTML markup, however, there is an issue where the client-side rendered virtual DOM tree does not align with the

I can't seem to figure out why I keep getting this error message: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, such as nesting block-level elements inside <p>, ...

vue.jsserver-side-rendering

Tips for efficiently passing TypeScript constants to Vue templates without triggering excessive reactivity

I'm curious about the most efficient way to pass a constant value to a template. Currently, I am using the data property in Vue, but I believe that is better suited for state that changes over time as Vue adds event listeners to data properties. The cons ...

typescripttemplatesvue.jsconstants

When the state changes, initiate the animation

Currently, I am working with Vue.js and need to animate a navigation menu. My goal is to display two li elements when a user hovers over one of the navigation buttons. At the moment, I have set the data type showActivities to false by default and changed ...

javascriptcssvue.jsanimationvue-data

The event in Vue.js does not trigger for items that have been filtered out of the list

I currently have a list of items, each with a "complete" flag. Depending on the value of this flag, the item is displayed in either view A or view B. These items are fetched through an API request and then filtered client-side using a computed method based ...

vue.jseventsfilterclient

Incorporating additional rows into a SQL Table according to user-provided information

My application features editable table rows using Vue, which pull data from a database. Currently, there is a button (add line) that inserts a row into the database when clicked. Is it possible to automatically add a specified number of lines based on user ...

sql-servervue.js

"Enhance your Vue 3 experience with a stylish Instagram Feed featuring

Struggling to retrieve the most recent Instagram posts from a feed using Vue 3 and Axios due to Instagram's strict-origin-when-cross-origin policy causing constant blocks. All access tokens are properly configured. The Instagram Basic Display API guide is ...

javascriptvue.jsaxioscors

What are the steps to analyze all attributes of a Vue.js state object using the Chrome Devtools console?

Every time I try to inspect live data on a Vue instance in Chrome, I find myself having to click into the object just to see any data because of how all the values have been converted to getters and setters. This image illustrates my frustration. After cl ...

vue.jsgoogle-chrome-devtools

Vue: Completely replacing the data object in Vue instances?

When it comes to adding a property to a data object in Vue, I know that Vue.set() is the way to go. In my case, I used this method within the created() lifecycle hook to add a new field to the myObject. But what if I need to fetch data from an API and co ...

vue.jsvuejs2

Vue - Error Message from Eslint Regarding Absence of Variable in Setup Function

Interestingly, the Vue.js documentation strongly recommends using the <script setup> syntax of the Composition API. The issue with this recommendation is that the documentation lacks depth and it conflicts with other tools (like eslint). Here is an e ...

javascriptvue.jsbabeljseslintvue-script-setup

Adjusting the height of a vertical slider in Vuetify2 is not customizable

I've been trying to adjust the height of a vertical slider in vuetify2, but setting it to "800px" or using style="height:800px" doesn't seem to work as intended. Even though the box within my grid expands, the height of the slider remains unchanged. This ...

javascriptcssvue.jsvuetify.js

Webpack is having trouble resolving the Vue package within the node_modules directory, specifically with vue-template-compiler

I have a basic Typescript project that includes the following code: import { parseComponent, compile as compileTemplate, ASTElement, } from "vue-template-compiler"; ... To compile this code, I use tsc with the following configuration: &quo ...

vue.jswebpack

Guide on accessing a nested array within a JSON object using JavaScript

I'm currently faced with a json object that contains nested arrays and names with spaces like Account ID. My goal is to only display the Account ID's within my Vue.js application. While I can access the entire response.data json object, I'm unsure of how t ...

javascriptjsonvue.jsaxios

You are unable to assign mutations in Vuex

Dealing with a peculiar problem where "val" and "ok" can be used within "console.log()", but for some reason, state.user cannot be assigned any value. However, state.user does display 'ok' on the website. export const state = () => ({ user: 'ok' }) e ...

javascriptvue.jsvuexnuxt.js

Tips on altering the Vue state upon clicking the checkbox

I am currently in the process of developing a To-Do Application utilizing Vue.js, Express.js, and MongoDB. My goal is to modify the status of the items displayed using v-for through the checkbox functionality. The desired outcome is to alter the state of ...

mongodbexpressvue.js

Guide on implementing router view in VUEJS3 for a google chrome extension within a production build

I've been working on creating a Chromium extension using VueJS3 and everything looks great locally. However, when I export it as a Chrome extension, only the first component in my App.js is displayed. What could be causing this issue? ❤︎ Here is ...

vue.jsgoogle-chrome-extensionvue-routervuejs3browser-extension

Error with Vimeo SDK: Mysterious Player Issue Post Setup (VueJS)

I have a requirement to showcase multiple videos on a Vue-powered website using a Vimeo player. To achieve this, I have developed a VideoPlayer component specifically designed for each video: <template> <div class="video-element__containe ...

javascriptvue.jsvimeo

Having trouble getting Vue.js data to show up on the screen. I'm attempting to show a list of todos, but all that

I'm currently working on my App.vue file where I have set up the data for a todo list. However, despite creating an array of todos and attempting to display them, nothing is showing up on the screen. I'm at a standstill and could really use some ...

javascriptvue.js

Is there a way to programmatically select an option value in a v-select component using vue.js 2?

I'm attempting to designate the option with a value of 1 as selected, but I am encountering difficulties when using the v-select component from Vue.js. This is how I have attempted to achieve it - <v-select name="branchid" v-model="branchid" ...

laravelvue.jsjquery-select2vue-selectv-select

What is the best way to trigger a Quasar dialog from an outside component?

Currently, I am working with Vue.js 2.x + Quasar 1.x using http-vue-loader (no build tools required). I have placed a q-dialog in a separate component named MyComponent. However, when I try to include it in a parent component like this: <my-component&g ...

javascriptvue.jsvuejs2frontendquasar-framework

Creating a Commentary System in VueJS Similar to Medium

One feature that I admire in Medium is their commenting interface, which allows users to highlight specific portions of an article and leave comments. I am interested in integrating a similar commenting feature into a VueJS application. While researching ...

javascriptvue.jscomments

How to flip the value in v-model using VueJS

Below is the code snippet that I am working with: <input v-model="comb.inactive" type="checkbox" @click="setInactive(comb.id_base_product_combination)" > I am looking to apply the opposite value of comb.inactive to the v-model. Here are m ...

javascriptvue.jsbooleanv-model

Having trouble choosing a subitem from a dropdown menu in Vuejs?

An example can be found at https://jsfiddle.net/79epsrmw/. However, the issue arises when targeting the item1 sub-menu in VS Code even after assigning a unique id. var app = new Vue({ el: '#app', data: { menuItems: [ { ...

javascriptvue.js

Ensuring Element-UI table column sizes accommodate content without causing text to wrap to the next line

Is there a way to adjust the column size of an Element-UI table without causing words to break onto the next line? If you take a look at the address column in this example: https://codepen.io/rameezcubet/pen/QWLoMbr I've tried using min-width="100", exp ...

vue.jselement-ui

Axios failing to include Content-Type in header

I have set up an Odoo instance in the backend and developed a custom module that includes a web controller. Here is the code for the web controller: Web Controller # -*- coding: utf-8 -*- from odoo import http import odoo from odoo.http import Response, ...

javascriptvue.jsnginxaxiosodoo

What is the most efficient approach to completing everyday tasks directly in a Vuex store?

Currently, I am working on making API calls from within a Vuex store action object. Here's an example of one of my actions: /** * Check an account activation token * */ [CHECK_ACTIVATION_TOKEN] ({commit}, payload) { Api.checkActivationToken(payl ...

javascriptapivue.jsvuex

Laravel VueJS Vuetable-2 without user authentication

Initially, I attempted all the solutions provided here and on other websites. What I have experimented with: Vuetable-2 not working with Laravel Passport Unable to retrieve data from using vuetable-2, in Vuejs 2 The Issue: I was working on a project (L ...

node.jslaravelvue.jslaravel-passport

The 'style' property is not found within the 'EventTarget' type

Currently, I am utilizing Vue and TypeScript in an attempt to adjust the style of an element. let changeStyle = (event: MouseEvent) => { if (event.target) { event.target.style.opacity = 1; Although the code is functional, TypeScript consist ...

typescriptvue.js

What is the best way to retrieve Vuex state in a separate JavaScript/TypeScript file that is not a part of a Vue component

We strive to separate business logic from UI logic by setting up a Typescript service class that can interact with a Node Module API and update the Vuex state of our app. This approach allows us to keep Vue components free from direct involvement in this b ...

vue.jsvuejs2vuex

The functionality of Vue slot-scope seems to be restricted when used within nested child components

Here is the component configuration being discussed: Vue.component('myComponent', { data () { return { msg: 'Hello', } }, template: ` <div class="my-component"> <slot :ms ...

javascriptvue.js

How should one go about creating an npm package out of a vuejs component and testing it locally?

Initially, I created a vuejs project as a test container using vue-cli. Next, I developed an npm package named "vue-npm-example" from a Vuejs component in my local environment and then imported it into the aforementioned testing project. Within the packag ...

javascriptnpmvue.jsvuejs2vue-component

Using VueLoaderPlugin() results in an 'undefined error for 'findIndex' function

Currently, I am in the process of integrating a Vue CLI app into another web project that we are actively developing. The Vue app functions without any issues when utilizing the development server bundled with Vue CLI. Due to the presence of .vue files wi ...

javascriptvue.jswebpack

How to disable swipe back feature in IOS on an Ionic 5 Vue application

In the past, I successfully implemented global swipe back disabling for an entire app using Ionic Angular with: IonicModule.forRoot({ swipeBackEnabled: false }) Alternatively, for a single page, I achieved this by injecting IonRouterOutlet: this.routerOut ...

vue.jsionic-frameworkvue-router

Issue with video.js text track memory leakage (WebVTT/VTT)

I am utilizing Video Text Tracks to showcase advanced live information on top of the video. A new video is loaded every few minutes, each with its own .webvtt file (consisting of 2-3k lines). Although everything is functioning properly, there is a persis ...

javascriptvue.jsmemory-leaksgarbage-collectionvideo.js

Exploring Vue through algorithm testing with Jest

I'm working with a component that has the following structure. How can I create a Vue Jest test that meets these specific requirements? <template> <div align="center"> <button @click="Tests()">Tests</button& ...

unit-testingvue.jsjestjs

How to retrieve the data variable in Vue JS script

I recently started using vue.js and I'm working with version 2.5.13. In my component file script, I am trying to access a data variable but it keeps returning as undefined. The id attribute in the component is displaying the correct value, however when a ...

javascriptvue.jsvuejs2

Concealing the label for a specific component in Vue/Nuxt JS

I have developed a reusable input component that includes a label. However, I need the label to be hidden in certain instances (without taking up space, similar to using display:none in CSS), while remaining visible in others. Below is the code for my inp ...

vue.jsnuxt.js

Vue.js event handlers

I am in the process of creating a basic app that will include a few listeners. However, I am struggling to determine the best approach for organizing the logic behind it. Here is an example of the HTML: <div id="playerProgressBar"> <div id=" ...

javascriptvue.js

Discover how to fetch data within Vue component using data access object in Vue 3

I am in the process of utilizing a data access object (dao) named Todos.js to fetch necessary data for a Vue3 component called List.vue. Below, you will find snippets from my code as an example. Upon initializing the application, the data is successfully ...

vue.jsvuejs3daovue-reactivity

What is the best way to incorporate a vanilla javascript function into a vue.js application?

Consider a vanilla JavaScript function like this: if (window.devicePixelRatio >= 2) { document.querySelectorAll('img.retina').forEach(function (e) { let parts = e.src.split('.'); let ext = parts.pop(); i ...

javascriptvue.js

Using Node.js in conjunction with Nuxt.js: a beginner's guide

I have a server.js file located in the "Server" directory, which is connected to Nuxt.js server.js const express = require('express'); const app = express(); app.get('/api/data', (req, res) => { res.json({ message: 'Hello fr ...

node.jsvue.jsvuejs3nuxt.jsnuxtjs3

Utilizing Axios for Vue Multiselect on select/enter Event

I have successfully implemented a Vue Multiselect feature that retrieves options from my database using an axios call. This functionality works great as it allows users to select existing options or add new ones to create tags. While this setup is working ...

javascriptvue.jsaxiosmulti-select

The dichotomy between public and private methods within a Vue.js component

Within a component, I have two functions defined. One is foo(), which is defined within <script>, and the other is fooExported(), which is defined in the body of export default {}. My understanding is that functions inside export default {} can be a ...

javascriptvue.js

My Vue component seems to be missing in my Vue.js project

Here is the code for my header.vue component: <template> <div> <h2>this is header h2</h2> </div> </template> <script> export default { name: 'Header', data () { return { data: 'this i ...

vue.js

Leverage the ternary operator within an object to establish its property

Can a property in an object be dynamically defined based on a condition? For instance: props="{ 'prop1': {label: 'Prop1'}, hasProp2 ? '(prop2': {label: 'Prop2'}) : ('prop3': {label: 'Prop3' ...

vue.js

Exploring the world of computed properties in Vue.js

Currently working on implementing a dynamic category feature in Vue.js My project involves four input fields: Team, Gender, Age, Grade I want the text on the screen to update every time one of these inputs changes, indicating the selected category. Init ...

vue.js

What is the best way to retrieve component data within the mapState() function?

When the prop buttonType has a certain value, I need to access different store variables: ...mapState({ backgroundColor: state => this.buttonType === 'primary' ? state.primary_button.background_color : state.secondary_button.backgrou ...

vue.jsarrow-functions

disable any other active toggle in a vue component

Exploring JavaScript and how to accomplish the following tasks Snapshot The issue I am facing is that if I click on a product, and then click on settings, both are open. However, I want only the currently clicked toggle to be open. For instance, if I cl ...

javascriptlaravel-5vue.js

When a new VueJS project is created, it failed to automatically install the necessary basic HTML files and folders

Hey there, I am completely new to Vue.js. Just recently, I installed the Vue.js/CLI and created a brand new project using vue create test. This prompted me to choose from three options: > Default ([Vue 2] babel, eslint) Default (Vue 3 Preview) ([Vue 3 ...

javascripthtmlvue.jsvue-clijavascript-framework

maintaining connections does not store components

I am encountering a problem with the keep-alive functionality not actually keeping components alive. The component that is being rendered in the router-view has asynchronous fetching after the component is mounted. My issue arises when, after the first ti ...

vue.jsvue-router

What is the best way to mix up the middle letters within certain positions of a word?

Here is what I have managed to achieve so far: mounted() { const randomVariants = [...Array(3)].map(() => this.baseWord .split('') .sort(() => 0.5 - Math.random()) .join('') ) const variantsWithoutIniti ...

javascriptvue.jsnuxt.js

I configured a double YAxis, but it seems to be ignoring the specified directions (left, right) and datasets

I'm trying to set up a double yAxis, and this is how I structured the code: const data = { labels: ['a', 'b', 'c', 'd', 'e'], datasets: [ { type: 'bar', label: this.$t('numberOfBuilding'), data: ...

vue.jschartschart.jsvuejs3axis

How can I implement a personalized Transformer in Gridsome?

One challenge I'm facing is incorporating a proprietary file format into my Gridsome website, where each file will create a new page. A Transformer typically handles this task, but unfortunately, there is no existing plugin for the specific file type ...

vue.jsgridsomegridsome-plugin

Issue with displaying Buefy Material Design icons when using the b-icon component

This is my first time using Buefy I encountered an issue with the b-icon component, Rather than displaying the icon, I saw an empty block element which was confusing. Switching to a different icon pack did not resolve the problem either. ...

vue.jsmaterial-designbuefymaterial-design-icons

What could be the reason for the Laravel middleware CORS not functioning properly in conjunction with Vue

Currently, I am working with Laravel 5.7 as the backend and Vue.js as the frontend. To send HTTP requests from Vue to the Laravel backend, I decided to use the Laravel CORS package, which can be found at this GitHub link: https://github.com/barryvdh/larave ...

laravelvue.jscors

Exploring the dynamic data loading feature in Vue 3 by fetching data from the server and displaying it using a v-for

I am encountering an issue where I want to display data dynamically from a database using a v-for loop. However, when I attempt to push new data into the array, they show correctly in a console.log() but do not reflect any changes in the template. I have ...

javascriptvue.jsvuejs3v-for

Enhance accessibility: Improving screen reader and tab focus behavior with vue-router

It seems that focus resetting and screen readers detecting route changes are not integrated into vue-router. I understand why Vue might have omitted this feature, considering the varying use cases, but I am surprised by the lack of information on accessib ...

vue.jsvue-router

Tips for effectively invoking a method in a Vue component

As a Vue2 beginner, I am currently working with the Vue CLI and following the structure generated from it. My goal is to submit form data, but I keep encountering a warning and error: [Vue warn]: Property or method "onSubmit" is not defined on the insta ...

javascriptformsvue.js

Utilizing a dropdown selection feature in VueJS to dynamically adjust text color

I need to implement a feature that changes the color of text based on the selection from a drop-down menu in my TODO List project. The drop-down menu consists of three options: High Urgency (text turns red), Medium Urgency (text turns yellow), and Low Ur ...

vue.jsdrop-down-menuvuejs2vue-cli

Invoke a function from a different vue.js component using the this.$refs property

I'm facing an issue with triggering a sibling element. What I've tried so far <b-img @click="callFileLoader"/> <b-file type="file" ref="fileUploader"></b-file> ... methods:{ callFileLoader () { this.$refs.fileUploader.c ...

javascriptvue.jsvuejs2vue-componentbootstrap-vue

display different vue component based on screen size

I am in search of a method to implement responsive components in Vue.js (Nuxt). I have developed this mix-in but encountering an error: export const mediaQuery = { data() { return { breakpoints: { sm: 576, md: 768, lg: ...

javascriptvue.jsresponsive-designnuxt.js

In order to properly set up an AutoNumeric object, it is essential to have at least one valid parameter provided

I've been working with the AutoNumeric library in my Vue js V2 application and keep encountering a specific error message in the console Issue with mounted hook: "Error: At least one valid parameter is needed to initialize an AutoNumeric object" ...

javascriptvue.jsvuejs2

The v-select menu in Vuetify conceals the text-field input

How can I prevent the menu from covering the input box in Vuetify version 2.3.18? I came across a potential solution here, but it didn't work for me: https://codepen.io/jrast/pen/NwMaZE?editors=1010 I also found an issue on the Vuetify github page t ...

javascriptcssvue.jsvuejs2vuetify.js

What is the best way to show a datepicker when a button is clicked in vuetify?

Here is the structure of my script: ===========--=========--=============--=============== <template> <v-card max-width="1200" class="mx-auto" > <v-row> <v-col cols="12" sm="6" md="4"> <v-me ...

vue.jsdatepickervue-componentvuetify.js

What is the process for creating a versatile component in Vue that can be specialized for specific models?

A dialog window Vue component has been created without a model, with slots for the title, center content, and buttons. Now the goal is to fill this dialog with a form that will have specific details unique to the form itself, such as the model data and be ...

vue.jsvuejs2

Issue with importing Bootstrap-vue components when importing an npm package locally

Maybe I'm overcomplicating things, but here's the issue I'm facing: When I publish my project (my-navigation) to the npm registry and then npm install it in another project (my-vue-app), everything works perfectly. However, if I try to npm install my-nav ...

vue.jsnpmbootstrap-vue

Turn off all VuetifyJS transitions

Is there a way to completely turn off all transitions, such as the slide-x-transition or dialog modal scale transition, in VuetifyJS? ...

javascriptvue.jstransitionvuetify.js