I'm currently working on storing an API response in the async method of my Nuxt js application within a variable called info. However, I keep encountering this error message: Property 'info' does not exist on type 'Vue'. Interestingly, when I move the Axio ...
{ url: '/About', title: 'About', content: About, subpages: [{ url: '/AddNewDetail', title: 'Add New Detail', component: AddNewDetail, }] }, <router-link to=&quo ...
In my quest to configure Axios globally with authentication in NuxtJS - VueJS (primarily NUXTJS), I am facing a challenge. What I aim for is pretty straightforward: If a user is logged in and has a token in $store, I want Axios to use this token. If the u ...
I have been working on a web application that allows me to upload a JSON file, make changes to it, and then download it. However, the resulting JSON is not valid because certain characters seem to change during the process. Even when I simply upload and do ...
Recently, I encountered an issue with a routing problem in my web application. Initially, the route was set as: http://localhost:8080/user/reset Everything worked fine during development. However, after building the project and placing it in the loca ...
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 ...
I'm brand new to Vuejs and I'm attempting to set an interval for a function, but unfortunately it's not working as expected. Instead, I am encountering the following error: Uncaught TypeError: Cannot read property 'unshift' of u ...
In the v-for loop, I want to populate some input fields with predetermined text without attaching them to the object. My current attempt looks like: <div v-for="item in allItems"> <input type="text" class="header-title" value="item.name">< ...
I am struggling to fetch and display data from an API in my Vue.js application. Although the API seems to be functioning correctly when I check using console.log(), I am unable to populate the table with the retrieved data. Since I am new to Vue.js, I am u ...
I'm facing an issue with a Vue plugin that I have. The code for the plugin is as follows: import _Vue from "vue"; import particles from "./Particles.vue"; const VueParticles = (Vue: typeof _Vue, options: unknown) => { _Vue. ...
My Vue gallery component includes a lightbox feature defined by the following code: <div id="lightbox" class="modal" v-if="photo !== null" v-show="showModal" @click.self="closeModal"> <div clas ...
Within my VueJS 2 component showcased below, I have succeeded in assigning the imgdata property to each question within the area.questions array. Although it appears to be functioning as expected - revealing values through the console.log, the challenge ...
I'm currently working with nuxtjs and I am trying to figure out how to redirect the user after they have logged in. I've been having trouble getting the redirect() method to work within my function: loginUser: function () { if (this.isValid) { ...
I am currently facing an issue and I am seeking assistance. My goal is to implement file chunk upload using axios, where each chunk is sent to the server sequentially. However, the requests are not being sent in order as expected. Below is a snippet of m ...
This is the code for my store.js file: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { isLoggedIn: !!localStorage.getItem('token'), isLog : !!localStorage.getItem('situation') ...
While working with VueJS framework v-for, I encountered a problem when trying to loop through lists of items. Each item index was supposed to be assigned to a variable, but the v-bind click event wasn't being attached properly inside the v-for element ...
My objective: I am working on implementing filters that will be displayed on a page to filter the products shown. For mobile devices, I want to hide these filters behind a button which, upon being clicked, will reveal the filters in a side-slide menu. Alt ...
I'm currently working on developing a unique VUE component preview feature, reminiscent of JSFiddle or CodePen, within the VUE framework. The specific VUE container responsible for previewing the components is outlined as follows: <quickpreview v-html= ...
I've been exploring the vue-cropperjs library, but every time I execute the code, I encounter error messages: Uncaught TypeError: Cannot read property 'getCroppedCanvas' of undefined Uncaught TypeError: Cannot read property 'replace' of undefined The sni ...
I am using vue js to display a graph with chartjs. I have implemented an onClick function on the graph to emit an event in the parent component and retrieve data. However, the event is not working as expected. Can you help me identify the issue? Component ...
I am having an issue with conditional rendering in Vue.js. When I click on the button, the span does not render as it should. How can I resolve this issue? <v-btn icon @click="showInfo = !showInfo"> <v-icon>mdi-dots-vertical&l ...
Recently entering the realm of Vue, I'm in the process of achieving pristine eslint-plugin-vue outcomes on a trial project. However, when inspecting the test file named Home.vue displayed below, an alert is triggered: The "HelloWorld" component h ...
Currently, I am developing a custom administration module (plugin configuration) in Shopware 6 using Vue.js. An issue I am facing is the absence of an inherit wrapper that appears when there is a change in the sales channel. My goal is to replicate the s ...
Utilizing a v-for loop over an array of objects in graphicState, the rows of a table are dynamically generated. My goal is to implement a column of radio buttons that, when checked, will set graphicState[index].selected to true. I came across this insight ...
I am trying to modify a body property that includes usernames @username1 and @username2. Is it feasible to use regex to transform these nicknames into router links? The desired output should be like this (with the @ removed in the link profile) <router ...
I've configured the checkboxes as shown below: <label v-for="service in team.services"> <input type="checkbox" v-model="form.services" :id="service.name" :value="service.id"/> </label> Although they are displayed correctly, there se ...
A Vue application we've developed connects to a Web Service to retrieve data. However, the URL of the web service varies depending on the installation location of the app. Initially, we considered using .env files for configuration, but realized that thes ...
I have a scenario where I want to hide the dropdown menu for US states if a different country other than the US is selected. The code snippet I am using to achieve this functionality is shown below: <b-row v-for="demo in demographics" :key=&qu ...
I am encountering an issue with a Vuex getter that is supposed to return the state of courseData. Despite the getter being present and having values when I check it using console.log(this.$store.getters), I am unable to access the data. When I try to use c ...
Text fields in Vuetify come with a feature called rules, which can be used to add functions that return either true or an error message. Is it possible to make these rules asynchronous, allowing for server-side validation using XHR? For example: <v-te ...
I've been spending quite some time trying to come up with a solution for my dilemma. The issue arises because I'm not looking to use drag and drop functionality. https://i.stack.imgur.com/Nh1Db.png My goal is to have 3 divs named 1,2,3 as designated drop ...
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 ...
While attempting to compile my VueJS code using webpack, I encountered an error with the following code: <template> <v-app-bar app color="blue" flat height="100px"> <v-img class="mx-2" contain max-height="80" m ...
I've been facing a challenge in rendering multiple components using <component v-bind:is="..."> within a v-for loop. The rendering part works fine, but now I need to incorporate v-model within the loop. This is my current setup - an array ...
After creating a Vue repository using vue init webpack my-app My main.js file looks like this -- // The Vue build version to load with the import command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue fro ...
I am struggling to create a validation that prevents users from inputting numeric values into a textbox. I have tried using a native JavaScript solution, but it does not seem to be working on my end. In my textbox, I have set up this trigger v-on:keyup=" ...
I am utilizing VueStrap components that are based on the following link: Regrettably, I encounter an error when attempting to set the visibility for an alert within my code: HTML: <alert :show="showAlert" placement="top-right" :duration=3000 v-bind:t ...
In my component, I have a getter called defaultInternalAccountId that I am watching for changes. Whenever this property changes, the method fetchAccount is called. This method is also triggered when the component is mounted. My goal is to write a test that ...
I am currently utilizing Vue.js 2.3.3, Vue Resource 1.3.3, and Vue Router 2.5.3 in my project while trying to configure Vue-Auth. Unfortunately, I keep encountering a console error message that reads auth.js?b7de:487 Error (@websanova/vue-auth): vue-resour ...
In my Vue component using Vuetify data table, I have the following code: <template slot="body.append"> <tr> <th :colspan="6" class="text-right">Total:</th> </tr> < ...
First and foremost, let me provide some context: I am currently in the process of developing a minesweeper application using VueJS. The grid is structured as an object tree, where each Box object contains a 'neighbors' property that stores Box o ...
As a newcomer to VueJs, I am currently working with a Practice component that includes an ExerciseMC component. The parent component retrieves a question object (with a text property) from the backend through a request and passes it as a prop to the Exerci ...
Is there a way to suppress the default Vue warning [Vue-warn] when displaying a custom validator message on a prop? I am currently seeing both the custom error message and the Vue warning. This is what my prop looks like: props: { mode: String, defaul ...
One example scenario involves setting specific elements to have an active class by assigning the property "active" as true (using v-bind:class). This property is modified within a foreach loop, after certain conditions are met, through the method "handleSc ...
In my Vue component, I have a feature that displays a list of items. Each item can be flagged as "active" with a boolean value which is then saved to a database. For example, out of five total items, three could be marked as "active" while the remaining t ...
In my current project, I am working on creating a conditional select-box feature. The idea is to have two select-boxes where the value of the second box automatically changes and becomes disabled when the value of the first box changes. While I have succe ...
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" ...
I have a fairly simple component: <template> <div> <chart v-if="!loading" ref="priceGraph" constructor-type="stockChart" :options="chartData" ...
I have downloaded a component from npm It's called vue-3d-model To use it, I created a file at ~/plugins/ModelGltf.js import Vue from 'vue'; import { ModelGltf } from 'vue-3d-model'; Vue.use(ModelGltf) Then, I registered it i ...
After developing a Vue app as a reusable library and setting the global $brand-color variable in the SCSS file to define the main color theme of the app, I encountered an issue when trying to integrate it for a new client who required a different brand col ...
I have a specific computed property in my code that triggers an API request and retrieves the required data: async ingredients() { const url = "/api/ingredients"; const request = new Request(url, { method: "GET", credentials: "same-or ...
After following various guides on implementing authentication in my Vue application with a .NET Core API backend, I have some questions. You can check out this guide: https://medium.com/dev-bits/a-guide-for-adding-jwt-token-based-authentication-to-your-si ...
Combining vuex and vuejs 2 for the first time. I'm a beginner with vuex and I need to monitor changes in a store variable. Trying to implement the watch functionality within my vue component. This is my current code snippet: import Vue from 'vue'; impo ...
To showcase the issue, I have created a codepen: https://codepen.io/anon/pen/vzqgJB Within the Vuetify v-app, there is a router-view. <div id="app"> <v-app> <v-content> <v-container> {{$route.path}} &l ...
My goal is to retrieve a specific document from firebase using the auto-generated ID as my route parameter. However, I am not getting any data in return. I want to use the when() method to fetch a document with an auto-generated ID that matches my query, ...
When attempting to utilize three.js OBJLoader - (docs) with vue-threejs and Webpack, I encountered some challenges. var OBJLoader = require('three-obj-loader') OBJLoader(THREE) var loader = new THREE.OBJLoader() loader.load( require('./sphere.obj'), func ...
In my application, users can select values from a dropdown list and add them to an array by clicking the "add" button. The goal is to use the selected value's id as the index in the array. For example: List of Values 1 - Apple 3 - Bananas 8 - Pears ...
Issue with VUE-CLI configuration: internal/modules/cjs/loader.js:596 throw err; ^ Error: 'chalk' module not found at Function.Module._resolveFilename (internal/modules/cjs/loader.js:594:15) at Function.Module._load (internal/modules/cjs/lo ...
Whenever a user attempts to directly navigate and load a component URL, a HTTP call is initiated within my Vuex actions. This call will set a value in the state once it has been resolved. I am looking to prevent my component from loading until the HTTP ca ...
Is there a way to display a button only if two specific conditions are met? I attempted to use v-if with one condition at a time: v-if="editMode" v-if="$can('customersdelete')" When using only one condition at a time, the button displays. This ...
Hey there, I've heard that iterating and editing objects (not arrays) is not the best practice. Is there a more efficient way to do it as easily as it can be done with an array of objects? Check out this link for reference new Vue({ el: '#app', data: ...
I'm currently working on integrating HTML content into a Sweet Alert popup using this code snippet Link: https://www.npmjs.com/package/vue-swal this.$swal({ title: '<i>Custom HTML</i>', html:`This is an <em> em ...
I have a markdown editor in View A which is displaying the result in the current View. My goal is to share this result with another page, View B. In View A, there is a button that allows the user to share the markdown result with View B. I am using a texta ...
Is it possible to maintain separate HTML, JS, and CSS files while creating Vue.js components? I recently read the "Why Vue.js doesn't support templateURL" article which discusses this topic. "Proper modularization is a necessity if you want to build a ...
Our team is currently in the process of developing a highly intricate single page application similar to Excel using vue.js. This project consists of over 10,000 components, with each cell functioning as an individual component containing approximately 100 ...
I am currently working with multiple components: A, B, and C. In component A, there is an array that plays a crucial role in the flow of data. When an item is selected in component A: An emit event triggers a method in component B that displays the lengt ...
I am new to VueJS and I am having trouble retrieving the value of the selected date range. When I click the button, the console prints out a value of null. Can someone please assist me with this issue? Below is the code snippet: App.vue <template> ...
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 }} ...
In my Vue2 application, I have implemented a pair of data tables on one of the pages. Each table is placed behind a tab, allowing users to choose which one they want to view. The search bar, however, is not confined within a tab as I wanted to avoid duplic ...
Just dipping my toes into the world of Vue framework here. I managed to create a selectable table that stores data in an object. I want this function to run in the background, so I figured it should be in the computed section. The object structure is as fo ...
Having a component: Vue.component('repo-button', { template: "<div class='socialCircle-item success'><i class='fa fa-comment show_repo' data-check_in='{{ check_in_id }}' data-repo='{{ repo_id }}&ap ...
I am facing an issue with passing a prop in my component. The id is passed as a prop like this: <comments myId="1"></comments> In the comments component, I have defined the prop like this: props: [ 'myId', ], Within the commen ...
I need some help with my code setup. I want to make it so that the components "dataPart1' and "dataPart2" are not loaded by default, but only appear when a user presses a button to view the data. How can I achieve this functionality in Vue.js? var app = ...
Currently, I am utilizing Vuex for state management within my VueJS 2 application. Within the mounted property of a specific component, I trigger an action... mounted: function () { this.$store.dispatch({ type: 'LOAD_LOCATION', id: thi ...
I'm currently facing an issue with form validation in a table layout using element-ui. Specifically, I am struggling to pass a valid prop to the el-form-item component. The structure of my data model is as follows: form: { invoices: [ { ...