I have a computed property: getRelatedItem () { return this.allItems.find((item) => { return item.id === this.currentSelectedItemId }) }, Here is an example of the output: relatedItem:Object -KQ1hiTWoqAU77hiKcBZ:true -KQ1tTqLrtUvGnBTsL-M:tr ...
I am currently working on creating a reusable modal and I need to pass the prop :loading="loading". However, I have encountered an issue where the loading property initialized in the data is not reactive. How can I make sure that the loading state in the p ...
In an attempt to create a messaging system that shows alerts of messages to different users, I have implemented Vue Socket Io from https://www.npmjs.com/package/vue-socket.io. However, the issue lies in the fact that the alerts are not being triggered as e ...
I am facing an issue with a simple flow in my application: First, I call a VueX action to store multiple cars on the backend side. Then, I call a mutation to store newly created cars. Finally, I declare a watcher that should be triggered whenever the arr ...
As a VueJs beginner working with Laravel, I am struggling to display categories dynamically when selecting a collection. I am making API calls using Axios, but I can't quite get it to work correctly. Any assistance would be greatly appreciated. <div cla ...
How can I make a button element with a .hover property trigger the hover animation as soon as the page loads? I want to apply a class to the button when the page is mounted and then remove it later. What is the best approach for this? I considered using a ...
While attempting to integrate Jest with VueJS, I encountered an issue: Cannot find module 'babel-core' at Object.<anonymous> (node_modules/vue-jest/lib/compilers/babel-compiler.js:1:15). To resolve this, I had to include "@babel/core": "^7.7.5", " ...
I'm currently developing a Vue website with multilingual support. The chosen language is stored in a Vuex store and accessed through the computed property lang, like so: lang(){ return this.$store.state.lang } I use this lang property in v-if cond ...
Can you take a look at this simple example? export default { data() { return { name: "Amy", age: 18, }; }, computed: { combinedDataForWatching() { return { name: this.name, age: this.age, ...
My current challenge is getting my App to render on a new page instead of the same page. Despite trying render: h => h(App), it still renders on the same page. This is the Vue file (Risks.vue) where the router will be linked: <router-link to="/risk ...
Each time I click on the Edit button, I want to be able to change the output in the column {{ test.result }} by turning it into an input element. This will allow me to update the numbers and then save them. Attached is a screenshot showing how the column ...
After using console.log(this.$refs['block' + row + column]);, I confirmed that I can successfully access the HTML element it refers to. https://i.stack.imgur.com/7KYqB.png However, when attempting to access the element's style using variou ...
Here is an example of how my json data is structured. I have multiple elements being displayed in a v-for loop, and when one is clicked, I want to show specific information from that element in a modal. [{ "id": 1, "companyNa ...
When working with Angular, you may come across a tag called ng-container which is used in the following way: <ng-container *ngIf="false">this won't be shown</ng-container> According to the Angular documentation: The Angular is a grouping ...
Currently, I am in the process of migrating from vue2 to vue3 and using the "Class Style Component". I have been utilizing vue-i18n. Will I be able to continue using vue-i18n with Vue3? Here is a snippet from my package.json: "dependencies": ...
After successfully moving selected treeview items to another parent, I have encountered an issue where the moved items are no longer selectable when clicking on their new parent node. To reproduce this issue, follow these steps: Select node2_item1 Click ...
I am currently working with vue-cropper 4.1 using cropperjs in combination with Nuxt 2.13. When my cropper loads, it displays a placeholder image. However, after choosing and uploading a new image, the cropper still shows the previously chosen image instea ...
I'm new to Vue.js and successfully built a basic table using the ui-element. The el-table element was utilized for constructing the table, with columns displayed using el-table-column and prop (see code below). Now, I want to incorporate images/avatars/thu ...
Looking to loop through rows in a table using a range? Most examples show how to do this for a fixed value, like: <div> <span v-for="n in 10">{{ n }} </span> </di But what if you want to achieve this with a variable like below? &l ...
I am venturing into the world of Vue.js for the first time. I have created an app that currently relies on manually added data within the script. Now, I am looking to enhance it by fetching data from a JSON file, but I'm unsure about how to proceed wi ...
Query What is the best way to generate a placeholder computed property that automatically triggers when there are changes in the model elements it relies on, eliminating the need to explicitly call the computed property? Context I have a parent componen ...
Is there a way to duplicate a Vue component instance after mounting it with new DOM? I am currently working on coding a template builder and I need to clone some blocks. Similar to the duplicate feature on this website ...
I'm working with an element that loops through all the objects using v-for and has a CSS class named top-class{}... I need to dynamically add the top-class to the first object (object[0]) and update it based on changes, removing the old top-class in the pr ...
While running Vue 2.6 in VSCode, I've noticed that my intellisense functions perfectly within js files. However, as soon as I switch to a vue file, all my intellisense capabilities disappear. I have the most up-to-date version of VSCode installed and ...
While I am currently on the second page of my pagination https://i.stack.imgur.com/xTYAU.png This is how my options are displayed https://i.stack.imgur.com/jPtNK.png After creating a record, I needed to make an API call to update the data in the table. ...
I've arranged a grid of divs in rows and columns, along with a transition group that looks like this: <div class="row" v-for="row in grid"> <div class="col-md-3" v-for="col in row"> <transition-group v-on:be ...
I am facing an issue with multiple sticky columns in my layout. When these columns are set as sticky, they tend to visually stack over each other, sometimes causing the left-most sticky column to "peek" out from under the next one. Is there a way to add m ...
I’ve encountered a troublesome behavior in my projects. Here is a simplified explanation of the issue at hand. I am eager to understand why this occurs and how I can prevent it. I have included Vue in the head section of my website: <script src="http ...
I am currently working on implementing a feature where a component reacts to data changes in a custom Vue plugin. To achieve this, the plugin creates a new instance of a Vue object in its constructor: this._vm = new Vue({ data: { obj: null, stat ...
My maps component initializes a Google map, adds markers based on props passed from the parent, and sets the correct bounds of the map. However, the markers are added through a computed property to make it reactive. Everything seems to be working fine, exc ...
According to the website: The v-if directive can only be attached to a single element. But what if you want to toggle multiple elements? In that case, using v-if on a template element as an invisible wrapper is the solution. The final rendered result wil ...
Currently, I am working on creating two HTML files as part of my project structure. This is how it looks: |- node_modules |- public | |- blog | | |- some-page.html | |- index.html |- src (contains all the Vue components) |- Blog.Vue |- Index.Vue ...
When attempting to access the site locally through on Chrome, I receive an error message stating "172.17.0.2 took too long to respond". To retrieve the IP address of the container, I used the inspect command. docker inspect -f '{{range .NetworkSettings. ...
One of my challenges involves a watcher calling a method: watch: { 'list.items' (n, o) { this.doSomething() } } Every time the page loads, new values are added to list.items like this: methods: { fetchLists(){ axios.get('/ ...
Being new to Vue.js, I am encountering an issue with a reactive variable isBtnDigitizePolygonClicked. In the code snippet below, I am trying to trigger certain lines of code as a side effect of the change in the value of isBtnDigitizePolygonClicked, utiliz ...
Currently working with Vue.js v2, I am facing an issue where I have a CSS stylesheet stored as a string in a variable. import sitePackCss from '!!raw-loader!sass-loader!../../app/javascript/styles/site.sass'; I am trying to generate a <style& ...
Currently, I am developing a feature where a <textarea> field starts to fade out as soon as the user begins typing using v-on:keydown. However, if the user continues typing, the fading effect resets to keep the opacity: 1. Unexpectedly, the behavior ...
I've encountered a problem while trying to integrate my API with Vue/Axios. The issue arises when I attempt to store the data retrieved by Axios into an empty variable within the data object of my component. It throws an "undefined at eval" error. Can an ...
I have a dashboard with a refresh button that I want to rotate 360 degrees every time it is clicked. How can I achieve this rotation effect on the image with each click of the refresh button? Below is the code snippet I have been working on, but it only r ...
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 ...
Creating a Vue project： vue init webpack-simple nedbtest Installing the Nedb database： npm i nedb -S Modifying App.vue ： <template> <div> <button @click="insert">Insert Data</button> <button @click="find">Find D ...
I'm trying to wrap my head around VueX, but I'm having trouble getting Axios to work with it. In my store.js file, I have the following setup: state: { cards: [], currentPage: 1, lastPage: 2, }, actions: { loadGradients(pageNumber) { ...
Encountering an issue with Vue.js's watched property. Despite the list being defined, I am receiving the error: Cannot read property 'list' of undefined. This occurs after the if check at the line var index ..... watch: { selectedRole: () => { i ...
Currently, I am developing a hybrid app using Cordova and Vue.js. One of the features I want to implement is integrating WhatsApp into my app so that users can easily send images from the app to WhatsApp. Can anyone share how this can be achieved? ...
After updating to Node.js v17.2.0, I am facing issues with running "vue ui" in my project. The error message I receive indicates a problem with node modules: at Object.readdirSync (node:fs:1390:3) at exports.readdir (/usr/local/lib/node_modules/@vu ...
After receiving a response from the server via a REST request in HTML format, I have saved it in a data:[] variable. When I log this data on the console, it appears as raw HTML code. This reply is currently stored as a String, and my challenge now is to co ...
My current setup involves a customer component that contains a child component with a vuetable 2. I am in need of a way to refresh the table whenever a new customer is created or updated in the parent component. I was considering using $emit on the parent ...
I am working on a Vue component called Portfolio.vue, which contains a child component called Category.vue. I am able to navigate to the Category.vue component using <router-link :to = "{ name: 'category', params: { id: id }}"> where Catego ...
I have a set of data that returns labels, and I need to use this data to create a component. The component is already constructed when passing the values. Now, I aim to use a for loop to continuously add entries and generate components as required. This ...
I've been trying to install mongodb through npm, but I keep encountering the error message "Cannot find module 'fs'." Here is a snippet of my code: <script> const MongoClient = require('mongodb').MongoClient; export defau ...
I currently have index.html with two Vue instances in different files: <!DOCTYPE html> <html lang="en"> <body> <div id="appOne"> </div> <div id="appTwo"> </div> </body> </html ...
I've encountered an issue while trying to navigate to other routes. The error I'm receiving is: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'push') at eval (JoinRoom.vue?bd9d:74:1) This is how I push if the operation ...
I'm having an issue with dynamically generating a table using VueJS. The problem arises when creating the <th> elements. In order to set them up, I have a Vue component that is called by the addRow function. This component uses templates with v ...
My task is to set up the style-loader in order to load import 'bootstrap-icons/font/bootstrap-icons.css'. However, when I run npm install style-loader, I encounter the following error message: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to re ...
I am currently trying to incorporate the V-Calendar library into my Vuetify application. Up until now, the app was working fine, but I seem to have hit a roadblock with the correct installation of the V-Calendar library. Although no error messages are bei ...
For my latest Vue.js project using the vue-cli, I attempted to import jQuery with expose-loader. Following the instructions in the official documentation, but unfortunately, I was not successful. Here are the steps I took: Installed jQuery and expose- ...
Check out this Codepen example. I am working with an SVG map that contains various paths holding data. My goal is to retrieve the state name when hovering over a specific path. Currently, I have added an event listener to the svg element and am trying to ...
I have a component form with select filter: <template> <div class="form-group"> <select name="" v-model="filterRev" @change="filterReviews(filterRev)" class="form-control" id=""> <option ...
In my development project, I am working with three key components: component-1, component-2, and an App component. Initially, I pass a Boolean prop from component-1 to component-2. Through the use of a @click event, I am able to toggle this prop value betw ...
I need help with passing an object into my component. Here is a snippet of the object's properties: { title: "myTitle", type: "myType" } However, when I define the prop in my component like this, I get a Vue runtime warning st ...
I recently developed a VUE JS application that consumes data from a News API endpoint. To achieve this, I utilized Axios for fetching the data as shown below: import axios from "axios"; let baseURL = `https://newsapi.org/v2`; let apiKey = process ...
How should static product information data be stored within a vue2 single page application? In the past, I have used an external JS file that contained a JSON with product attributes (such as name, weight, height, etc). I prefer not to load via AJAX beca ...
I am facing an issue in my vuejs application where I need to modify an array of items after the app has finished loading. My current setup looks like this: var n = 100; var myData = []; function loadMovies(n){ // async ajax requests // add items to ...
I am facing an issue with the following code. It generates buttons with different actions, and each button triggers a specific modal to display based on the modalTemplate property when clicked. The template content is then replaced through the slot. < ...
Yesterday I posed a question regarding the removal of a custom truncate filter in Vue. If you missed it, you can find the original question here: Deleting a Vue custom filter when mousing over However, what I failed to mention is that I am utilizing a v- ...
Currently studying the Vue.js v2 documentation and I'm noticing a difference in how data is structured. When looking at the official documentation, they demonstrate creating data like this: var data = { a: 1 } var vm = new Vue({ el: '#example', data: d ...
I need some assistance with creating a bootstrap modal window that provides a warning to the user before they take an action. The issue I am facing is that when I enter text into a field, close the modal, and then reopen it, the previous values are still t ...
As I work with JSON data, my current task involves formatting it using Vuetify's Data Tables. The official documentation provides guidance on defining table headers as shown below: import data from './data.json' export default { data ...
Recently, I've been experimenting with the implementation of the Toasted package in my project. However, I've run into some challenges trying to grasp its functionalities. In my project, I utilize a utility called TreatErrors.js designed to mana ...
Trying to implement a smooth transition when the toggle button is clicked. Successfully applied the transition effect on the slider, but struggling to animate the text inside the div.hello class upon sliding open. <transition name="slide"> <a ...
Here's the code snippet that is functioning correctly for me var Index = require('./theme/dir1/index.vue'); However, I would like to utilize it in this way instead, var path = './theme/'+variable+'/index.vue'; var Inde ...
In this codesandbox demo, the main component called home has a subcomponent called addItem. The parent component passes an array (as a prop) to the child component, allowing the child to add items to the parent's list. This is the typical way of passing da ...
Imagine having a versatile button component that is utilized in various other components. Instead of tying the child components to specific functionalities triggered by this button, you want to keep those logics flexible and customizable within each compon ...
Transitioning my project from vue-strap to bootstrap-vue has hit a snag for me. I'm having difficulty migrating the panel. Here's the current vue-strap code snippet: <div class="col-sm-3"> <panel is-open type="info"> < ...
There are two components in my code The first component, which is the parent component, looks like this : <template> <ul class="list-group"> <li v-for="item in invoices" class="list-group-item"> <div class="ro ...