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.

Vuex was unable to locate the required dependency

Currently, I'm following an instructional video that incorporates Vuex. As shown in my package.json dependencies, I have installed Vuex: { "name": "blabla", "version": "1.0.0", "description": "blablaa", "author": "blabla", "private": true, "sc ...

javascriptnode.jsvue.jsvuexvuetify.js

Interact with parent function from child component using data attribute in Vue.js

I have a parent component called Waypoint that contains child elements. I want to be able to call functions on these child elements from the parent component. How can I achieve this? //coding example //template <Waypoint> <div :data-wp-cb ...

vue.js

Encountering an issue with launching npm serve on MacOS while using IntelliJ Ultimate for a Vue.js project

I can't seem to get npm serve to start in the Run/Debug Configuration within IntelliJ. However, when I run it separately in the Terminal within IntelliJ or on the regular console, it works just fine. Any idea what's causing this and how to fix it? Here ...

node.jsmacosvue.jsnpmintellij-idea

The Google Maps API allows all markers to be connected to a single infowindow

I've been grappling with this issue for some time now, but I just can't seem to find a solution! I'm retrieving data from a database in Laravel using Ajax and then attempting to display infowindows for each marker on Google Maps. The markers ...

javascriptjquerylaravelgoogle-maps-api-3vue.js

Switch out the image for a placeholder whenever the src is updated

I need to update an image with a dynamic src value <img :src="image.url"> Currently, when the image.url changes, the old image remains in place until the new one loads. This delay can create a strange effect as the text details change before the im ...

vue.js

Encountering issue with filtering in the Telerik VueJS grid causing errors

Encountered an error while trying to clear a set filter in vuejs (native) grid filtering implementation. The specific error message reads: [Vue warn]: Error in v-on handler: "RangeError: invalid array length" found in ---> <GridFilterCell> ...

vue.jskendo-uitelerik

Having trouble with the @keyup event not functioning properly in Vue?

I'm attempting to trigger a method when the enter key is pressed, but for some reason it's not working. Here's the code snippet: <template> <div> <button @click="callEvent" @keyup.enter="callEvent"> Click </button> </d ...

javascriptvue.js

Can we utilize v-bind:value or v-model for the data object retrieved from the network?

I am trying to make VueApp use either v-model or v-bind:value for the object received from the network API. For instance, if the Vue app fetches an object from the API in this format: { field1:value1, field2:value2, ......... , field100:value100 } ...

vue.jsvuejs2v-model

When using Vue 3 with Laravel Blade template, issues arise when trying to generate a production build

When working with Vue 3 SFC and trying to embed the template inside a Laravel Blade file, it can be a bit tricky. Take for example this usage scenario: Test.vue <script setup> import { ref} from 'vue'; const testValue = ref('Works&a ...

laravelvue.jsnpmvuejs3vite

Tips for retrieving console data in VueJS Data

Is there a way to review data from a form component in the console without vue taking any action? I need to receive external data and fill in the fields accordingly. I attempted to set a value using document.getElementsByName("nfe.codigo")[0].value = "000 ...

javascriptvue.jsvuejs2

Gridsome's createPages and createManagedPages functions do not generate pages that are viewable by users

Within my gridsome.server.js, the code snippet I have is as follows: api.createManagedPages(async ({ createPage }) => { const { data } = await axios.get('https://members-api.parliament.uk/api/Location/Constituency/Search?skip=0&take=20') ...

javascriptvue.jsvuejs2gridsome

Unlocking the Power of Select Options in Vue.js

I am currently learning how to use Vue.js. Below is an example of the Javascript code I have written: new Vue({ el: '#app', data: { classes: [] }, created: function () { var vm = this // Fetch API ...

javascriptvue.js

What is the best way to apply linkActiveClass in v-link based on the routerName or a combination of path and query

I am facing an issue with two v-links that look like this: '/accountList?accountType=1': { name: 'accountList1', component: require('./../views/finance/accountList.vue') }, '/accountList?accountType=2': { name: 'account ...

vue.jsvue-router

Mistakenly appearing at the top of the window instead of the bottom of the window

Utilizing Vue.js to fetch resources from a Laravel API periodically and paginate(), after retrieving the initial 10 instances, I aim to get the next 10. Here's how my method looks: scroll () { window.onscroll = () => { let bottomOf ...

javascriptvue.js

Troubleshooting Vue and Typescript: Understanding why my computed property is not refreshing the view

I'm struggling to understand why my computed property isn't updating the view as expected. The computed property is meant to calculate the total price of my items by combining their individual prices, but it's only showing me the initial price. I have an ...

typescriptvue.jsnuxt.js

using the newquestion variable later in the function

In the Vue.js code snippet below, there is a variable named newQuestion that is passed to the function getAnswer like this: this.getAnswer(newQuestion). Further down in the methods section, particularly at this line getAnswer: _.debounce(, I would like to ...

javascriptvue.js

Adding local JavaScript to a Vue component is a great way to enhance its functionality

I am currently working on integrating a homepage concept (Home.vue) into my project. The design is based on a template that I purchased, which includes CSS, HTML files, and custom JavaScript. While most of the CSS has been successfully imported, I am havin ...

javascriptvue.js

Arranging elements in an array based on two different properties

Trying to organize an array of elements (orders details). https://i.stack.imgur.com/T2DQe.png [{"id":"myid","base":{"brands":["KI", "SA"],"country":"BG","status":&qu ...

javascriptarraysvue.jsgroup-by

Total number of goals scored by a single team (extracted from JSON data)

My data consists of football games in a JSON file [ { "game_id":"258716", "game_date_start":"2016-08-15", "season": "2016", "team_1_id":"119", "team_2_id":"120", "team_1_goals_quantity":"2", "team_2_goals ...

javascriptjsonvue.js

There is no such property - Axios and TypeScript

I am attempting to retrieve data from a Google spreadsheet using axios in Vue3 & TypeScript for the first time. This is my initial experience with Vue3, as opposed to Vue2. Upon running the code, I encountered this error: Property 'items' does ...

typescriptvue.jsvuejs3

What could be causing transition to not be recognized as an element in HTML?

<template> <header> <nav class="container"> <div class="branding"> <router-link class="header" :to="{name : 'Home'}">>FireBlogs</router-link> </div> &l ...

javascriptcssvue.js

The Vue2 transition feature is not functioning properly when adding new elements

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

vue.jsvuejs2

How can we monitor the value of $route.params.someKey in Nuxt.js?

When working with Nuxt.js, I am trying to keep track of the value associated with a key called key1 in the $route.params. The values for key1 are determined using a function called someFunction(). Is there a way for me to monitor $route.params.key1 as a ...

javascriptvue.jsnuxt.js

What is the solution to the error message "A TypeError was encountered in the current module: e.parse is not a function"?

Can someone please help me resolve this Vue Js error I am encountering in Shopware 6 Administration? The issue pertains to selecting a column in the database table using a module. Note: Below is the complete code snippet. I am attempting to retrieve data ...

vue.jsshopware6shopware6-api

Struggling to access specific data within a JSON object? Wondering how to extract and display data from a JSON object in VUE?

Despite my extensive searching on Stack and the internet, I have not been able to find a solution to my problem. Currently, I am attempting to retrieve data from a JSON file located in the Vue src folder. The file contains three arrays with names that inc ...

javascriptarraysjsonvue.js

Experience the quick sort programming algorithm in action using Vue.js without the hassle of dealing with Promises

I am currently experimenting with the quicksort algorithm visualization using Vue.js for self-educational purposes. However, I am facing some difficulties with async/await implementation. Although array filling and shuffling seem to work fine (although I a ...

javascriptasynchronousvue.jsasync-await

Issue encountered when integrating vue2-google-maps into a project using vue.js and Laravel 5.6.12

I am currently utilizing Laravel 5.6.12 in combination with vue.js I am attempting to integrate Google Maps using the following GitHub link I am adhering to the instructions provided in the aforementioned link, as follows. Installation npm install vue2 ...

google-maps-api-3vue.jslaravel-5.6

Issue encountered while attempting to deactivate button until numerical data is entered in the OTP field using Vuejs

otp_value: '', isFadeout: false, verifyOtp() { this.disabled = true; this.otpBtnClicked = false; this.verified = true; }, <input class="otp-number- ...

javascriptvue.js

Using Axios to retrieve data from a MySQL database is a common practice in web development. By integrating Vue

I have developed another Vue.js admin page specifically for "writer" where I can display post data fetched from a MySQL database. The admin page called "admin" is functioning properly and responding with all the necessary data. The following code snippet ...

javascriptlaravelvue.jsaxios

What steps can be taken to ensure that the v-model input is not updated?

Typically, when a user enters a value in an input field, it automatically updates a model. However, I am looking to temporarily prevent this automatic update. In my application, I have a canvas where users can draw grids by entering lengths and widths in i ...

javascriptvue.js

How can I assign a distinct identifier to individual instances of Vue.js components?

I am looking to build a Vue.js component that includes a label and an input. Here is an example of the structure I have in mind: <label for="inputId">Label text</label> <input id="inputId" type="text" /> Is ...

vue.jsunique-id

Vue.js components may not always display the data that has been fetched

Within a Laravel view, there is a component where the data in the select tag sometimes doesn't show up. It's quite strange as it randomly displays the data and other times it doesn't. There are no errors being logged in the console or the vi ...

laravelvue.jsvue-componentlaravel-blade

"Using axios and async/await in VUE.JS to perform multiple asynchronous GET

Perhaps this is a somewhat basic inquiry, as I am still learning the ropes of vue.js and javascript. Please bear with me if my question is not well-articulated or if the solution is straightforward... I am facing an issue where I need to retrieve data from ...

javascriptapivue.jsaxios

Unable to include Buefy or Bulma in a Vuejs project

I am working on a Vue.js project and I would like to incorporate the Bulma framework and possibly Buefy as well. To start, I used the commands npm install bulma and npm install buefy In the main.js file, my setup looks like this: import Buefy from 'buef ...

vue.jsbulmabuefy

Unable to display data from vuex getters in the story

My MongoDB database contains: user:{ matchesList:[{ kdList:String, winsMatchesList:String }] After creating a Vuex.Store with some getters, I have: matchesList: state => state.matchesList, matchesListKD: state =&g ...

vue.jsvuexstore

Managing logout feature effectively in Vue.js/LaravelEnsuring proper logout functionality

I'm currently in the process of building a simple SPA with Vue and Laravel. So far, I've managed to set up user registration and login functionalities. However, one thing that's stumping me is how to implement a logout feature. Here's what my current set ...

phplaravelvue.jsvuejs2

Encountering the error message "Unable to access properties of undefined (specifically 'commit') in NUXT"

I'm encountering a roadblock as a newcomer to Vue. My goal is to capture user input data from a form and transfer it to a Vuex store. Once in the Vuex store, an action will trigger (fetching from an API) and I aim to retrieve that data back into my app and ...

vue.jsnuxt.jsvuexstorestate-management

Instead of using a computed getter/setter, make use of mapState and mapMutations to simplify

Currently, I am syncing a computed value to a component and using a computed setter when it syncs back from the component. I'm wondering if there is a more concise way to replace a computed getter/setter with mapState and mapMutations. How can this b ...

javascriptvue.jsvue-componentvuexcomputed-properties

Interactive v-card featuring a designated region that is not part of the v-menu

Currently utilizing Vuetify's v-card, I am looking to add click functionality by using the "to" property. Although it works well, there is an issue when incorporating a menu on the top-right side of the card. Clicking on the menu counts as clicking on ...

vue.jsvuetify.js

How can Vue.js update the displayed information when the selection option changes?

Ensuring the total weight of the products remains accurate when changing the unit of measurement is essential. Currently, although the data in the array is being updated, these changes are only reflected on the screen after clicking on other input fields. ...

vue.jsvuejs2

Establish a Vue application to run on Nginx at port 80 in Raspbian, paired with a Flask backend operating on port 8080

My setup involves Nginx running a Flask-based backend on port 8080 with the following configuration: server { listen 8080 default_server; listen [::]:8080; root /var/www/html; server_name _; location /static { alias /var/www ...

nginxvue.jsraspbian

Connecting two sets of data from a mongoDB database using vue.js

Hey there, I'm a newcomer to vue and mongodb. I've set up two collections - one for storing user details and the other for business details. When a business registers through a form, their information is saved in mongodb. Now, I've created a form for users ...

javascriptnode.jsmongodbvue.jsnpm

Configuring CSP in NUXT

Encountering CSP blocking with my local js files. Below is my nuxt.config.js: unsafeInlineCompatibility: true, policies: { 'default-src': ["'self'", 'delivly.com', 'localhost', '*.gstatic.com', '*.fontawesome.com'], 'script-src ...

vue.jsnuxt.jscontent-security-policy

Vue.Js for a Single Page Application utilizing Two Data Sources

Currently, I am working on developing a Single Page Application using vue.js. My project consists of 2 bundles of pages stored in separate S3 buckets - one public and one private. The public bundle is meant to be accessible to all users, while the private ...

javascriptvue.jslazy-loadingsingle-page-application

VueJS form validation does not account for empty inputs in both fields

One of the challenges I'm facing is generating a form with Vue.js using the input fields below: { name: 'first_name', type: 'text', label: 'First Name', placeholder: 'First Name', required: true, validation_message: 'Fi ...

javascriptvue.jsconditional-statements

Vue draggable component

I'm currently facing an issue while trying to integrate the Vue Draggable Component into my existing component. Everything works perfectly fine in my component without the draggable feature, but as soon as I add it, the entire content becomes blank. I susp ...

vue.jsvue-component

Passing arguments with $emit - Vue

Here is a simple method to handle alerts using $emit. But when passing arguments, it seems like the event is not being triggered at all. The goal is to update the value of alert with the result. Listening for the event on mount: this.$eventHub.$on(' ...

javascriptvue.js

What is the simplest way to incorporate Vue with Typescript, without the need for a complex build setup?

I've been spending the last couple of days experimenting with my basic ASP.NET Core website set up for Typescript 2.9, but unfortunately, I haven't made much progress. My main goal is to keep the front-end simple, with just single Vue apps on eac ...

typescriptasp.net-corevue.js

Vue.js has encountered a situation where the maximum call stack size has been exceeded

I have implemented a method called cartTotal that calculates the total price of my products along with any discounts applied, and I am trying to obtain the final value by subtracting the discount from the total. cartTotal() { var total = 0; var di ...

javascriptvue.js

The Vue Enter/Leave Transition feature may not function as intended when used in conjunction with opacity settings

Vue.js v2.2.1 JSFiddle: https://jsfiddle.net/loop_/59g7w1pa/8/ .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to { opacity: 0; } .fade-enter-to, .fade-leave { opacity: 0.5; } ".fade-enter-to, .fade-lea ...

vue.jsanimationcss-transitions

The VueJS component from a third-party source is not located in the node_modules directory

Utilizing vue-cli version 3 for a fresh vuejs project (I've been dedicating ample time to learning vuejs, but this marks my initial attempt at integrating a third-party component). I'm aiming to incorporate a visually appealing grid component. The specific ...

javascriptnode.jsvue.jsvue-component

CSS mismatch detected between production and development modes

Currently, I am utilizing the Vuetify framework coupled with custom CSS for a project developed using a webpack template. During development mode, my custom CSS modifications are successfully applied to HTML elements; however, in Production mode, these cha ...

cssvue.jswebpackproduction

Activate/Deactivate toggle using Vue.js

new Vue({ el: '#app', data: { terms: false, fullname: false, mobile: false, area: false, city: false, }, computed: { isDisabled: function(){ return !this.terms && !this.fullname && !this.mob ...

javascriptvue.js

When employing vue.set within Vuex, it seems that the state is not getting properly updated

Today, I encountered an issue while trying to add an object into a nested array. Despite successfully using similar code for other states, it does not seem to be working this time around. I can't help but wonder if the problem lies in the fact that i ...

vue.jsvuex

What is the best way to handle subfolders?

I have a question about serving different directories in my dist folder using vercel/serve. Click here to learn more How can I set it up so that localhost/foo will serve the build from the foo directory, and localhost/bar will serve the build from the bar ...

vue.jsserve

No entries found in the Nuxt/content module's array

<template> <div> <input v-model="searchQuery" type="search" autocomplete="off" placeholder="Search Articles" /> <ul v-if="articles.length"> ...

javascriptvue.jsnuxtjs

Delaying the activation of the code until the image upload is complete

I'm having trouble synchronizing code to upload an image using a vue composable, wait for the upload to finish, and then store the Firebase storage URL into a database. Despite getting the URL, the success code fires before the upload is complete. My atte ...

javascriptvue.jsgoogle-cloud-firestorefirebase-storage

ERESOLVE encountered issues resolving the dependency tree for a project using .NET Core 3.1 and Vue.js framework

I encountered an issue while trying to build my application. The error message is as follows: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email-protection" class ...

vue.jsnpmasp.net-core-3.1

VueJs encountered a fatal error when trying to promote young objects in the MarkCompactCollector, resulting in a failed allocation due to the JavaScript heap running

When I try to run the build command (npm run build) for my VueJs project, I encounter an error. package.json { "name": "acme-web", "version": "0.1.0", "private": true, "scripts": { ...

vue.jsnpmwebpacknpm-build

In Vue, reactivity does not extend to nested child objects

I am dealing with JSON data structured like this- items: { id: 1, children: [{ id: 2, parentId: 1, children: [{ id: 3, parentId: 2 }] }] } level-1 children represent parent items that all possess a parent_id of 1 (the roo ...

javascriptjsonvue.jsvuetify.js

Tips on managing a GET request sent using axios with special characters and accents

When constructing a web page using VUE.JS, a GET request is made with Axios. In the form fields, special characters and accents may be present depending on the user's input. For instance, if the surname entered in the form field is 'Ruíz' ...

javaspring-bootvue.jshttpaxios

Can anyone explain to me how to render attributes of a tag in Vue? I'm curious about how v-for interacts with HTML

<ul> <span class="tabs" :class="{ activeTab: selectedTab === tab }" v-for="(tab, index) in tabs" @click="selectedTab = tab" :key="tab"> {{ in ...

javascriptvue.js

Adjusting information using reactivity in VueJS

My goal is to decrement the value of a data property every second in Vue.js using the following code snippet: data() { return { timer: null } }, mounted() { this.timer = 50; window.setInterval(() => { this.$set(this, ...

vue.jsvuejs2

Leveraging unplugin-vue-components within a monorepository

Situation In my monorepo (Using Turborepo), I have multiple Vue3 apps and packages. Each app is built with Vite and uses unplugin-vue-components for importing components automatically from the specific app. Additionally, I need to include components from ...

vue.jsvue-componentvuejs3

Utilize data attributes in VueJS to dynamically style elements

Is there a way to utilize the data() values within the <style>..</style> section? I have experimented with different combinations (using/omitting this, with/without {{brackets}}, etc.) but haven't been successful. Interestingly, when I man ...

cssvue.jsstyles

Leverage the data from a local JSON file within a web application built with Vue CLI 4.2.3

I need to use a JSON file to store some data and utilize them in the components. [ { "heroTitle": [ "Banner image", "assets/images/banner/sunset.jpg", "sunset.jpg" ], } ] The above JSON is an example, and below is my compone ...

jsonvue.js

In Typescript with Vue.JS, the type 'Users[]' does not include the essential properties of type 'ArrayConstructor' such as isArray, prototype, from, of, and [Symbol.species]

Embarking on my journey with typescript and vuejs, I stumbled upon a perplexing error that has halted my progress for the past 48 hours. The error message reads as: Type 'Users[]' is missing the following properties from type 'ArrayConstruct ...

javascripttypescriptvue.jssupabase

The environment variable process.env.variable works perfectly fine during local development, however, it seems to malfunction once the application is deployed to Heroku within

Currently, I am utilizing nuxt.js and attempting to display images dynamically. To achieve this, I have implemented the BASE_URL variable within the .env file, allowing me to access image files based on the set BASE_URL in my local environment. .env file ...

vue.jsherokudeploymentweb-deploymentnuxt.js

Challenges with Filtering in MongoDB

I can't seem to figure out what's going wrong with my code. I've checked the documentation and it all appears to be correct. I've also gone through several posts and attempted various solutions. Code: router.get('/rank/:rank', async (req, res) => { ...

node.jsmongodbapivue.jsexpress

Understanding the separation and communication techniques in Vue.js components

I recently developed a small vuejs application and I find myself getting confused with the functioning of components. Here is the code snippet that I have been working on: <div id="app"> <div v-if="loggedIn"> <nav> <r ...

javascripthtmlvue.jsvue-component

Sending information between children components in VueORTransferring data between

So, I have a question regarding the Authentication section of my application. Within my application, I have various components and routes, including register and login. The register functionality is working properly with the API, storing both the usernam ...

javascriptauthenticationvue.jstokenregistration

Implement a Vue component using JSX and explore how to seamlessly bind events with the sync modifier

MyComponent Implementation props: ['visible'] methods: { update () { this.$emit('update:visible') } } When I use this component in JSX: <MyComponent visible={this.visible} {...{['on-update:visible']: console ...

eventsvue.jsjsx

Best practices for effectively implementing Vuex getters within the Nuxt Vue Composition API

I have been using @nuxtjs/composition-api(0.15.1), but I encountered some issues when trying to access Vuex getters within computed(). Below is the code snippet using composition API: import { computed, useContext, useFetch, reactive } from '@nuxtjs/compo ...

vue.jsvuejs2nuxt.jsvuejs3vue-composition-api

Displaying various Vue components within Laravel 6.x

After diving into Laravel and Vue, I managed to put together a navigation component as well as an article component. The problem I'm facing is that although my navigation vue component is visible, the article component seems to be missing. Reviewing my c ...

javascriptlaravelvue.jsvuejs2laravel-blade

What causes an error in a basic Vue2 <script setup> example?

I previously developed Vue2 components using the class-based style and am now looking to transition my codebase to utilize the composition API. According to the documentation, the composition API and the script setup method for writing single file componen ...

vue.jsvuejs2vue-composition-api