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.

Having trouble testing a basic Vue example component in Laravel 5.4

I recently installed Laravel 5.4 and after running npm install, I tested a vue component example but nothing happened as expected. After running npm run dev in my project directory, the compilation was successful. However, when I ran php artisan serve, al ...

vue.jslaravel-5.4

Working with Vue.js: accessing nested data from child components within a v-for loop

When working with a v-for loop, my goal is to group every 4 results retrieved from the API into a single row. <div v-for="(item, index) in this.info.length/4" :key="item"> <el-col v-for="thing in this.info" :key="thing"> {{ thing }} ...

vue.jsvuejs2element-ui

Align the text field value with the corresponding tooltip content in Vuetify

<v-col class="d-flex align-center"> <v-tooltip bottom> <template v-slot:activator="{ on }"> <v-text-field v-on="on" :value="info.payeeNo" den ...

htmlvue.jsvuejs2vuetify.js

Every time I switch views using the router in vue.js, my three.js canvas gets replicated

After creating a Vue.js integrated with three.js application, I encountered an issue with the canvas getting duplicated every time I opened the view containing the three.js application. The canvas remained visible below the new view, as shown in this image ...

javascriptvue.jsvuejs2three.jsvue-router

Having trouble incorporating an API module into a nested component in Vue

I have encountered a perplexing issue when attempting to import an API module into a nested component within a Vue application. After simplifying the problem as much as possible, I created a codesandbox example to demonstrate it. The problem arises when ...

javascriptvue.jsvuejs3

What could be the source of the error message: "Error: .eslintrc.js: The environment key 'vue/setup-compiler-macros' is not recognized

I am currently working on a sample application using Vue 3 and Typescript. Specifically, I have opted for the new Vue v3.2 setup option within the section of the Vue SFC. Following the guidance from the Vue documentation, I included "vue/setup-compiler-ma ...

vue.jseslinteslintrc

Can you please tell me the event that is triggered when an option is unselected in Vue.Drag

I am trying to figure out the event for selecting an item since I already know about the "choose" event. However, I am uncertain about what to use for un-selecting an item. In my particular case, I am unable to utilize the @end event. <draggable :list= ...

javascriptvue.jsvuejs2rubaxa-sortablevue.draggable

Collaborating with Ladda button functionality

I have a button with ladda functionality, shown below. <button class="btn btn-primary btn-xs ladda-button" data-style="slide-left" data-size="xs" v-on:click="refreshPage()">Refresh</button> The onClick event is triggered by VueJs. When the b ...

javascriptjqueryvue.js

Displaying the information fetched using axios on the screen using node.js

Is there a way to display the information from the input boxes in the image on the screen using node js? ...

javascriptnode.jsvue.jsexpressaxios

Vue component lifecycle hook to fetch data from Firebase

Looking for a solution with Vue 2 component that utilizes Vuefire to connect declaratively with a Firebase real-time database: import { db } from '../firebase/db' export default { data: () => ({ cats: [] }), firebase: { cats: ...

javascriptfirebasevue.jsfirebase-realtime-databasevuefire

"Combining Node.js, MongoDB, and Vue.js to create a dynamic dependent select dropdown: a step-by-step

Seeking guidance on setting up a dynamic dependent dropdown list using node js, mongoDB and Vue js. As a newcomer to this concept, I'm unsure where to begin. Here is the scenario I am facing: I need assistance in creating 2 dropdown menus for country and ...

node.jsmongodbvue.jsexpress

receiving a response within an HTML tag using Vue.js

Could someone assist me with retrieving data in an HTML tag similar to how I can do it with console.log? I am trying to get the value console.log(this.likeDes[0].like_dislike) to display within a <span class="fa fa-heart-o"></span> ...

laravelvue.jsvuejs2laravel-vue

Closing a Vue modal with a button

Utilizing the bootstrap-vue framework for my modal, I encountered an issue. Upon clicking the button labeled OPEN MODAL, the modal opens with footer buttons OK and CANCEL, which work as expected to close the modal as per bootstrap-vue's default behavior. ...

twitter-bootstrapvue.jsbootstrap-vue

Having trouble with a method that isn't providing values during interpolation in Nuxt.js/Vue

Within the static folder of my nuxtjs application, there exists a file named data.json Utilizing this data within my component is done as follows: <script> import data from '~/static/data.json'; export default { data ({ params }) { retu ...

vue.jsvuejs2nuxt.js

How do you trim a string and display the final 3 characters?

When dealing with a list of objects, I want to ensure that the chain of tasks does not become too long and break the table or appear aesthetically unpleasing. Therefore, my goal is to trim the tasks and display only the last 3. In the image below, multiple ...

javascriptvue.jsvuejs2

Managing active dropdown menus in VueJS

I'm having trouble figuring out why my navigation menu and method to open subitems on click are not working correctly. [![dropdown_menu][1]][1] new Vue({ el: '#app', data: { //menu "menu_title": "a", "child_routes": [{ ...

javascripthtmlcssvue.jsvuejs2

Encountering CORS issue while trying to connect frontend with microservice API in a production environment

I am encountering CORS issues in my production environment with a microservice-based application that functions smoothly in development. Whenever my frontend attempts to send a request to the ApiGateway, I encounter the following error: Access to XMLHttpRe ...

c#.netvue.jsnginxcors

Ways to stop user authentication in Firebase/Vue.js PRIOR to email verification

I am currently working on a Vue.js and Firebase authentication interface with an email verification feature. The setup is such that the user cannot log in until they click the verification link sent to the email address provided during the login process. ...

javascriptvue.jsfirebase-authenticationvuex

Can you help me understand how to reverse the direction of headers using Vuetify?

Most of the information is already included in the title. Vuetify's documentation demonstrates how to create a table with multiple objects sharing the same properties. You can find an example at this link: headers: [ { text: 'Dessert ( ...

vue.jsvuetify.js

"Encountering an issue in Vue.js 3 where the property cannot be

Inside my Something.vue: <template> <p>{{ codes }}</p> </template> export default { data() { return { codes: 'test' } }, name: 'Functions', props: { msg: String }, setup() { this.codes = 'does it wor ...

vue.jsvuejs3

Troubleshooting: Vue.js Component template not displaying items with v-for loop

I recently implemented a method that calls an AJAX request to my API and the response that it returns is being assigned to an array. In the template section, I am using the v-for directive to display the data. Surprisingly, it only renders once after I mak ...

javascripthtmlvue.jsvuejs2vue-component

What could be causing my CSS code to not function properly within Vue.js?

Having trouble with css in VueJs. I can't seem to figure out what I'm doing wrong. Generally, my scoped style css works fine in vuejs, I can target ids and classes without any issues. The problem arises when trying to change the internal css values of el ...

cssvue.jsquill

When a Javascript function marked as async is executed, it will return an object

Async function is returning [object Promise] instead of the desired real value. Interestingly, I can see the value in the console log. It seems like this behavior is expected from the function, but I'm unsure how to fix my code. This code snippet is ...

javascriptvue.jspromiseelectron-vue

What is the best way to access a component's data within its method using Vue and Typescript?

Starting a Vue.js project with TypeScript and using single file components instead of class-styled ones has been my goal. However, I have encountered a recurring issue where I get error TS2339 when trying to reference my components' data using the "th ...

typescriptvue.js

Add an item with a combination of different data types (such as objects and arrays) to a Mongo database, but encountering

I am currently working on posting an item to MongoDB using a combination of Node.js, Express, Mongoose, and Vue.js. The item I am trying to post consists of a mix of objects and arrays. Although the object post is successful in generating an ID, the data i ...

node.jsmongodbexpressvue.jsmongoose

The Npm generate script is failing to create the necessary routes

I've integrated vue-router into my nuxt project, but I encountered an issue when running npm run generate - it generates everything except for my pages. I suspect the problem lies with the router implementation as I didn't face any issues before incorporat ...

javascriptvue.jsnpmnuxt.jsvue-router

How can I prevent scrolling in a Vue mobile menu?

In this scenario, the toggle for the menu is controlled by a checkbox with the id "check" below. I attempted to bind v-bind:class="[{'antiscroll': checkboxValue}]" to the body in HTML, and also in the main App.vue file, but it did not work as expected. H ...

htmlcssvue.js

having trouble displaying array data in a table using vuejs

Hey everyone, I'm encountering an issue with this table not displaying the data. It seems like axios is fetching the data correctly and logging it in the console, but for some reason, it's not showing up in the table. <table id="app"> <tbody& ...

vue.jsaxios

Having difficulties with vue installation

Whenever I take a break from using certain packages, I typically opt for fresh re-installs. However, when I recently attempted to do a fresh install of Vue.js and vue-cli by running vue init on a new project, I encountered an error stating that Vue was not ...

node.jsnpmvue.jsvuejs2

"Using Vuejs to pass data from Parent to Child component through v-for loop

I'm experiencing an issue with my Bootstrap Collapse and Vuejs integration. I seem to be having trouble accessing item data in the child component. Any assistance would be greatly appreciated. Here is the HTML code snippet: <div class="panel-group"> ...

vue.js

Tips for resetting input and select values in VUE

In my VUE application, I have an input and a select that are displayed based on the selection of a previous input. When I enter values and change the initial input selection, I hide the second input and select to reset the form. However, even after resetti ...

vue.jsselectinputreset

Changing the information entered into a form within a subcomponent will result in all other fields being reset

I encountered an issue with my application that involves a form contained within a child component. The parent passes a prop (wizardData) to the child component. If the form is being used to input new data, the field values in the prop will be null; but if ...

vue.js

Customize Vue or Nuxt by including a highly detailed tag in the <head> section

Trying to generate static page templates using Vue/Nuxt but struggling to find a way to insert a very specific tag into the head section of each generated page. It's not a meta, script, style, or link tag, and it appears that the options in nuxt.confi ...

vue.jsnuxt.js

Utilizing Vue Components as the initial entry point rather than main.js

Currently, I am utilizing a Java backend along with Jersey and I am interested in implementing multiple small page applications. My plan involves creating a frontend module with a directory named /apps. Within the /apps folder, there will be various Vue ...

vue.jsvue-component

Having trouble with the Quasar File Picker feature not functioning as expected in an Android

I am facing issues with selecting a file using this component in an android build. It was functioning properly on the web, but after building for android, it seems to be malfunctioning. <q-file v-model="file" label="Change Profile Picture" u ...

vue.jsquasar-framework

can a computed property be delayed in its calculation?

Within the code snippet below, we can see that in the compPropsIsBtnDigitizePolygonDisabled function, it initially checks if the digitizePolygonInteractions variable is initialized. If it is not initialized, an error will be triggered. During execution, w ...

javascriptvue.jsvuejs2vuejs3vue-component

Error: The options object provided for CSS Loader is not valid and does not match the API schema. Please make sure to provide the correct options when

Summary My Nuxt.js project was created using the command yarn create nuxt-app in SPA mode. However, I encountered an error after installing Storybook where running yarn dev resulted in failure to start the demo page. ERROR Failed to compile with 1 errors ...

javascriptvue.jswebpacknuxt.js

Create a loop in Vue.js 3 without the need for a query

Can someone help me understand how to fetch data using a loop in Vue.js version 3 when working with queries? I am trying to retrieve an object based on its id, which is obtained from the URL. However, I seem to be facing some difficulties. Any guidance wou ...

javascriptarraysloopsvue.js

Optimal method for managing user session data in Vue with the power of Laravel and Inertia

I am creating an application that features a dynamic menu using Laravel, Vue, and Inertia. To transmit the session details about the menu items to be displayed (such as icons) and user information (like avatar and name), I currently rely on the HandleIner ...

laravelvue.jsinertiajs

Working with dynamic checkbox values in VueJS 2

In my project using VueJS 2 and Vuetify, I am creating a subscription form. The form is dynamic and fetches all the preferences related to a subscription from the server. In the example below, the preferences shown are specifically for a digital magazine s ...

javascriptvue.jsvuetify.jsnuxt.js

Combine all of Nuxt.js into one output file

Currently, I am working with a basic Nuxt.js application and I am curious to know if it is feasible to compile the output into a single file, combining all the .js and .css files altogether? I came across a solution for achieving this using just Vue.js as ...

vue.jsnuxt.js

Guide to creating a dynamic import feature in Nuxt

Within my nuxt component, I am eager to integrate the ace editor: import Ace from "ace-builds/src-noconflict/ace" Upon mounting the component, I execute the following: this.editor = Ace.edit... It is evident that the window is not defined on th ...

vue.jsnuxt.jsserver-side-renderingace-editor

The dataset remains undefined within the context of Vue.js

I am attempting to utilize the dataset property in Vue to retrieve the data-attribute of an element. Here is how I am implementing it: <ul id="filter"> <li><a class="filter-item" v-on:click="filterItems" data-letter="a" href="#"> ...

javascriptvue.js

What is the best way to add a dynamic URL in <router-link> using VueJS?

I am currently utilizing the v-for directive to retrieve URL names. However, I am encountering difficulties in properly passing the value obtained from an instance of v-for as the URL name. <template> <v-list-tile class="pl-5" v-for="choice i ...

vue.jsvue-router

The v-autocomplete component's watcher is not functioning as intended

Despite numerous attempts, I have been unable to get my watcher to work properly with the v-autocomplete component. <template> <v-app id="inspire"> <v-content> <v-form ref="form" v-model="valid" :lazy-validation="lazy"> ...

vue.jsvuetify.js

Vue JS: Uncaught TypeError - Unable to access property 'preventDefault' as it is undefined

When using v-model in my input field, I encountered an error stating preventDefault of undefined. What could be causing this issue? This is the code snippet from my AddUser component: <template> <form @submit="onSubmit()"> ...

vue.js

V-Calendar is not displaying the accurate dates

https://i.stack.imgur.com/zk4h7.png The image displays dates starting on June 1, 2022, which should be a Wednesday but appears as a Sunday on the calendar. This issue affects all months as they start on a Sunday instead of their respective weekdays. The p ...

javascriptvue.jsnuxt.jsvcalendarv-calendar.io

Updating $data within a VueJS directiveIs there something else you

We have a component and a directive. The structure of our component data is as follows: { langs: [ { title: '', content: '' }, { title: '', content: ...

javascriptdirectivevuejs2vue.js

Created JSON object providing the number as a string value

I am currently facing an issue with a Vue method where it generates a JSON object from user input values before making an axios put request. The problem I'm encountering is that the JSON object generated converts numbers into strings, causing issues with t ...

javascriptarraysjsonvue.jsmethods

The challenge with custom events in Vue.js

I've been grappling with this issue for an extended period of time and I am at a loss as to what exactly is causing the problem with my vue custom events. <!-- within the vue template: main element --> <!-- not functioning <button @click= ...

eventsvue.js

"The JavaScript code included in the index.html file is not functioning as expected when called in the main.js file within a

Here is the index.html code for a simple VueJS app that includes a widget from netvibes.com. The widget code is added in the html file and functioning properly. <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC " ...

javascripthtmlvue.jsjspwidget

Obtain information stored locally when an internet connection is established

I'm currently facing an issue with my Local Storage data retrieval process in Vuejs while being online. My ToDo app setup consists of Vuejs, Laravel, and MySQL. When the internet connection is available, I store data in localStorage. The ToDo app has been ...

javascriptmysqlvue.jsvuejs2

Obtaining the heatmapInstance in heatmap-vue: A Step-by-Step Guide

I am currently utilizing the Vue-Wrapper for heatmap.js, which can be found at this link. However, I am encountering an issue where I am unable to call the heatmapInstance "h337" in my Vue-Component. While I can utilize the functionality, I am struggling w ...

vue.js

The process of mounting a Vue component involves removing the surrounding div element

I am facing an issue while mounting a component on a function. Everything seems to be working fine initially. However, I have configured it to destroy the div after a certain number of seconds. The problem arises when I attempt to add the component again; ...

vue.jsvue-component

Experiencing difficulties while utilizing the event bus for transmitting data?

Need help with sharing data between two components? Here's the code for the first component: <template> <div class="row"> <label id="chatRoom">{{chatRoom}} <input type="text" id="chatInput" v-model="chatRoomVal"></label&g ...

vue.jsvuejs2vue-component

Tips for resolving the "semicolon expected" alerts in your CSS code (css-semicolonexpected)

Having some trouble with using the Tailwindcss @apply directive within a <style> tag in a Nuxt.js Vue file. It seems to be working fine, but those annoying red squiggly lines keep popping up. Any help would be greatly appreciated! Thank you! Take a ...

vue.jsvuejs2nuxt.jstailwind-css

How can Nuxt 3's useHead method be utilized to replace body classes instead of just adding to them?

Currently, I am developing a Nuxt 3 project and my goal is to update the body class whenever there is a route change by utilizing the useHead hook. Specifically, my plan is to employ useFetch to fetch data for the current page, and once that data is retrie ...

vue.jsnuxt.jsserver-side-renderingnuxt3

The use of <router-view> inside <transition> is no longer supported

Here's the code snippet I am using: <template> <main> <component :is="$route.meta.layout || 'div'"> <Transition appear> <RouterView /> </Transition> </component> </main& ...

vue.jsvuejs3

Ways to share data between components in Vue.js

Currently, I am looking to search for products and my data is organized within the categories container. The project's structure has been attached here. I am wondering how exactly the searchItem function retrieves the necessary information from the categor ...

vue.jscomponents

Tips for extracting a computed property value and storing it in an array variable

In my project, I have implemented a computed property function named Total. This function is responsible for calculating the total value of name + value pairs from an array called prices. It is utilized in a quotation form where the running total is displa ...

vue.jsvuejs2nuxt.js

navigating to the assets directory using nginx and vite

My setup involves using nginx and vite to docker vue.js, but I'm facing an issue when setting the base path where the browser screen goes blank. The /test/index HTML page loads fine, but the /test/assets/something.js and CSS files return as HTML. How can I ...

vue.jsnginxvite

Importing dynamic components in Vue with Vite is a seamless

Currently in the process of migrating an existing Laravel inertia project from Mix to Vite. Followed all the steps in the migration guide and everything is functioning properly except for one issue. I have a component that receives a prop containing an a ...

laravelvue.jsvuejs3viteinertiajs

Vuetify vueJS dialog with elevated design

Is there a way to completely remove the elevation of a v-dialog so that it has no shadow at all? The elevation property in the v-dialog itself and using the class as Class = "elevation-0" have not worked for me. Here is the link to the component ...

htmlcssvue.jssassvuetify.js

An issue occurred in the callback function for the watcher "get_settings": "A TypeError was raised because the property 'general' cannot be read

I'm really struggling with handling this error in Vue, especially since I'm new to it. Here's what's happening: I fetch data from the server using a vuex store action. In my component, I access that data using a getter in a computed property and then try t ...

vue.jsvuejs2vuex

An unconventional web address was created when utilizing window.location.hostname

I've encountered an issue while trying to concatenate a URL, resulting in unexpected output. Below you'll find the code I tested along with its results. As I am currently testing on a local server, the desired request URL is http://127.0.0.1:800 ...

javascriptlaravelvue.js

Is there a feature in Vue.js similar to AngularJS' `ng-repeat-start` directive?

After going through vue.js documentation, I couldn't find any reference to a feature similar to ng-repeat-start / ng-repeat-end Is there a way to achieve something like this? <table> <tr class="weather_warning top" ng-repeat-start="warning in ...

vue.js

Error: Unable to locate font in the VueJS build

Within my config/index.js file, I have the following setup: ... build: { index: path.resolve(__dirname, 'dist/client.html'), assetsRoot: path.resolve(__dirname, 'dist'), assetsSubDirectory: 'static', assetsPublicPath: '', ... As for my Ap ...

javascriptwebpackvue.jsbuildcore-ui

Vue Method always executed (regardless of click event)

I'm fairly new to vue and still getting a grasp on the fundamentals of my code. Currently, I am facing an issue with a Method. It should only trigger when the user clicks on the button, but it seems to be triggered all the time. I even tried adding ...

javascriptvue.jsmethods

Why is my Vue element being titled incorrectly by default?

I recently converted a Vue component to class syntax, following the same process I used for three other components in my project. However, after reducing the code to just the problematic section, I encountered this issue: <template> <v-container ...

vue.jsvue-componentvue-property-decorator

Dealing with CORS policy or 404 errors when using Vue.js and socket.io in conjunction with the npm run serve command

I'm currently working on developing my project locally. Running on my local machine is a simple socket.io server: const io = require('socket.io')(); io.listen(3000); In my Vue.js application, I aim to establish a connection with a socket ...

vue.jswebpacksocket.iocorsvue-cli-3

Create a grid layout using Bootstrap and Vue that features responsive columns which resemble a snake pattern. The alternate rows should be displayed in reverse order for a visually dynamic

Having a bit of a tricky situation here, hoping someone can provide some insight. I am currently working on a project using Laravel, Vue, and Bootstrap where I need to loop through some objects and display them in a specific pattern. 1 2 3 6 5 4 7 8 9 Th ...

twitter-bootstrapvue.jslayout

Identify when the Vue page changes and execute the appropriate function

Issue with Map Focus Within my application, there are two main tabs - Home and Map. The map functionality is implemented using OpenLayers. When navigating from the Home tab to the Map tab, a specific feature on the map should be focused on. However, if th ...

javascripttypescriptvue.jsionic-frameworkvuejs3

Utilizing Vue.js keep-alive to optimize performance by excluding Ionic components

The components from a specific library are not compatible with Vue.js' keep-alive feature. I have attempted to exclude them using exclude="/^ion-*./", but it has not been successful. These components do not have a designated name. Is there a way to preven ...

vue.js

Opt for utilizing v-model over the name attribute when implementing Vee-Validate

Recently, I've embarked on a journey to learn how to create Single Page Applications using Vue. Today, my focus is on Vee-Validate. When working with Vee-Validate, the validation requires the name attribute to be filled in. Otherwise, a warning messa ...

vue.jsvuejs2vee-validate

Disable the outer div scrolling in VueJS, but re-enable it once the inner div has reached the bottom of

I am currently working on a webpage that contains multiple divs stacked vertically. Here is the concept I am working with: Once the scrollbar reaches the bottom of the first div, the outer scrollbar will be disabled and the inner scrollbar will be enabled ...

javascripthtmlcssvue.js