Questions tagged [vuejs2]
Use this tag for questions specific to version 2 of Vue.js, an open-source, progressive JavaScript framework for building user interfaces. Consider also using the main [vue.js] tag in addition to this one.
26,418
questions
1
vote
1
answer
14
views
Vue Js 2 provide cannot be updated in Parent
I'm trying to use the provide functions in Vue.js 2.7 and i want to update one of the props through an async function but it doesn't update the injection in the children
Parent.vue
<template>
...
0
votes
0
answers
8
views
How to use @stomp/stompjs in vue2
I tried to solve it on my own, but it wasn't easy.
I'm working on a vue2 project.
I installed the @stomp/stompjs library to communicate with an external websocket API.
And this WebSocket API requires ...
-1
votes
0
answers
14
views
Display Variant Products Using The VueJS Variant Component
I am trying to display an array of products using the Shopware 6 variant component. Attached is the code from Shopware core. Here is the code in Github
{% block ...
0
votes
0
answers
9
views
Element UI Datetime Picker disable hour and minute before current time
I'm using element-ui 2.15.7. How can i disable hour and minute before current time. For example, current time is 27/11/2023 1:41 pm, so i want the date picker to disable 0 -> 12 in hour (only show ...
0
votes
0
answers
21
views
How to test the DOM of an inner <template> in vuejs with vitest?
I couldn't find a way to test that the following amazingTitle is getting rendered:
<template>
<b-toast
... all the b-toast props
>
<template #toast-title>
<...
0
votes
1
answer
28
views
How to set 2 fixed decimal places for number in Vue 2
I am using v-model.number to bind data properties, here is the snippet
new Vue({
el: "#app",
data: {
entries: [{
text: "Rate 1",
rate: 1.7
},
{
text: "...
-1
votes
0
answers
15
views
v-moden not working on v-autocomplete in vuetifyjs as input and typing field in POS App as search
I'm new on vuetify please guid what I missing?
facing an issue with the v-model on the v-autocomplete component in pos app itemselector.vue file but on v-text-field component it was working fine.
but ...
0
votes
1
answer
17
views
Why the behaviour of $emit with asnyc in vue2 is not same with the normal function?
For easy to reproduce, I use openpen to demo it.
function foo() {
return new Promise(resolve => {
setTimeout(resolve, 3000);
});
}
Vue.component('child', {
template: '<div @...
0
votes
2
answers
71
views
how to trigger a watcher even when assigned to the same newVal
i am using vue3 with options api
as shown in the following stackbiltz link here
i have a child-component that contains a button that when clicked, the method refresh should be invoked. the refresh() ...
0
votes
0
answers
11
views
Change vee-validate message in runtime
I'm trying to change my vee-validate messages in runtime
I have two files with languages: pt.json and en.json
I have an i18n.js file:
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(...
0
votes
0
answers
24
views
Javascript + Vuex issue: how to access a Vuex boolean in a `v-if`
While working in a team project, my teammates wish me to display a div only when a certain boolean is true. However, I do not know how to access said boolean in the html.
App.vue:
<template>
&...
-2
votes
0
answers
74
views
How to pass this function in Java to javaScrip? [closed]
I don't know much about java but I have to translate a function to javaScript to use it in vue 2, to filter a list that comes from an api in a selector, and I tried to pass it to javaScript, it gives ...
0
votes
1
answer
24
views
popup menu Opens the cursor
Help me to make a popup menu. I can't do it. I don't have time to hover over the menu and it disappears. I have already tried everything, the cursor disappears. It should open and close when hovering ...
0
votes
0
answers
11
views
How can I change the autocomplete input value from outside the component?
I'm working on a project that use the package @trevoreyre/autocomplete-vue (v2.4).
It's a laravel 7.3 project using Vue 2.6
I have an autocomplete input in a Vue component :
<label for="...
0
votes
1
answer
57
views
Removing value from dropdown when adding a new value in vue application
I am trying to create date filter in my vue project. so for this, the view is:
<div class="dropdown-item d-flex flex-column">
<div
...
1
vote
1
answer
35
views
Vuejs 3 how to get component instance properties programmatically
I have function which is written in vue 2 and I need to modifiy for vue 3. there is component named Modal which is a confirmation box with lots of props and option. in codebase it call showPrompt ...
1
vote
1
answer
50
views
Stop page refresh when submitting form
<template lang="">
<div class='food-detail'>
<NavbarTab />
<div class="container">
<!-- <h1>Food Detail :{{ $route....
0
votes
1
answer
95
views
Installing vueuse on Nuxt 2 gives an error "command not found" when you try to npm run dev
CODESANDBOX link
Their guide outlines these steps
Step 1: Install vueuse core and vueuse nuxt packages
npm i -D u/vueuse/nuxt u/vueuse/core
Step 2: Modify nuxt.config.js to add this line under ...
1
vote
0
answers
25
views
problem with currency masking with v-mask
buddy,
I use v-mask and text-mask-addons plugins. When I make currency settings, the input deletes the value after 6 digits. But when I add a prefix, there is no such problem. an infinite number of ...
0
votes
1
answer
28
views
Vue2 validation "this.$v.userData.lastName.$error" leads to "Maximum call stack size exceeded"
I have a problem in my project on Vue2 using Vuelidate.I need to implement data validation and in theory "this.$v.userData.lastName.$error" should return true or false, but in result i get ...
0
votes
0
answers
16
views
Vue.draggable Drag and Drop Outside to a div
I am creating a Kanban board task viewer. In this kanban, I have many tasks and a date. I can drag and drop this into a group. I have a div outside of the draggable component. When I drag a task item ...
0
votes
0
answers
21
views
How can I pass form data from a nested component to a outer component using Vue2 and Nuxt2
I am fairly new to view and learning as I go. I am trying to get data from a form that is built in different components. The flow is outer component calls inner component calls nested component. I ...
0
votes
0
answers
16
views
How to enable fill-handle, copy-paste a whole dataset ( drag and drop ), multi select cells in vue-excel-editor for vue 2?
I'm currently working on a project using Vue 2 and the vue-excel-editor component. I'm seeking guidance on enabling the fill-handle, copy-paste a whole dataset ( drag and drop ) & multi select ...
0
votes
0
answers
9
views
Import vue2-ace-ditor modes list
I want to list the available modes (i.e languages) for vue2-ace-editor.
My end goal is to let the user choose the syntax highlight mode they want in a drop-down list.
I think I can get the list I'm ...
0
votes
1
answer
48
views
Javascript + Vue error: cannot update value of slider
I have two integer variables:
$globalData.y defined as a vue observable in main.js, and
x defined in App.vue.
I have a slider in App.vue bound to x (i.e. v-model="x") and I wish for the ...
0
votes
1
answer
30
views
Javascript + Vue error: array.filter not working as expected
I have two arrays:
$globalData.dishes defined in main.js as ['Salad', 'Burger', 'Cake'].
dishes defined in App.vue as an empty array.
The code I've written should list all dishes in $globalData....
1
vote
0
answers
13
views
pinia composition api 'this' type problem
I am using Nuxt 2 with Pinia Composition API. Through a plugin, I have added axios instances, etc., into PiniaCustomProperties.
const piniaPlugin = ({ $pinia, app }: { $pinia: any; app: any }): void =&...
0
votes
0
answers
33
views
Vuetify VDatePicker menu bug
I have a project (vue2 + vuetify2) with a component v date picker, which attribute active picker = "YEAR" and a list of years from 2000 to 2100, the problem is that sometimes the component ...
2
votes
0
answers
17
views
Cypress test not loading data inside Nuxt component on CI
I have some Cypress tests in my project that were until recently running absolutely fine, but over the past week have started failing. I can see the issue is my Contentful data isn't pulling through ...
0
votes
0
answers
42
views
"Object object" bug when trying to render stepper PrimeVue in razor .cshtml
I installed PrimeVue library for my Vue.js app that it's inside of a .NET solution, and when I try to render the Steps component from PrimeVue v2 text, the Object Object error appears
Tag used for ...
0
votes
2
answers
53
views
Fire API call only when a Vue Router child route is hit
I am using Vue2 and vue router 3x. How can I execute a store action whenever a specific child route is hit regardless if it is hit through a button press or the browser back/forward buttons?
I need to ...
0
votes
0
answers
14
views
How to add new route dynamically in Nuxt2?
I have routes, which depend on domain of the site.
Previously I used extendRoutes. Now, I can't use it, because I use the one copy for different domains.
I have tried use router.addRoute in ...
1
vote
1
answer
34
views
How do I center v-menu on the selected item? (Vuetify, Vue2)
I have a long list of selectable items using v-menu. I want to center the list on the selected item using v-list-item-group. However when using the the prop "auto" on v-menu adjusting the ...
-1
votes
2
answers
58
views
justify center not in center position
i am creating a simple stepper component in vue. I have been able to achieve desired fucntionality but the alignment goes to left even after applying justify-content: center
below is my code
https://...
0
votes
0
answers
54
views
How to call function onload in nuxtjs
I have an app in Nuxtjs 2. I'm using nuxt-facebook-pixel-module to track user activity on my websites. I add Facebook conversion API to it. I created an API endpoint which calls the Facebook ...
1
vote
1
answer
41
views
Vuejs: Should I split views into small components?
I have a project that has 2 folders for components - 1) src/components/ and 2) src/views. In the first one I store general components such as a drawer or nav, and in the second I store pages (views).
...
0
votes
0
answers
21
views
VueI18n Translation warnings
On my project we are using VueI18n package for translation purpouose.
But through application's console I am constantly getting warnings similar to this one :
[vue-i18n] Cannot translate the value of ...
0
votes
0
answers
20
views
Global Observable "is not defined on the instance but referenced during render"
I have the following code in main.js:
Vue.prototype.$globalData = Vue.observable({
count: 0
});
I try to access such observable in a different component via
<template>
<div>
{{ $...
0
votes
2
answers
43
views
How to use Vue 2.0 reactivity using objects?
I have a parent component with certain data:
data: function() {
return {
initialItem: { name: "item", size: 10, description: "some text" }
currentItem:...
0
votes
0
answers
19
views
Nuxt 2 SSG 404 page returns 200 from server
I generated my website with Nuxt 2 SSG.
I created my error page in layout/error.vue as specified in documentation
<template>
<div>
<h1>Error page</h1>
</div>
</...
-1
votes
0
answers
43
views
Vue doesn't reactive computed with forEach
Why Vue doesn't reactive render although vue devtool change (not automatically, I have to click to component in vue devtool to change). By any chance, forEach() method caused this issue?
in my parent ...
0
votes
0
answers
48
views
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js) webpack5 vue2
When building with Webpack 5, I encounter CSS-related errors.
Below are the versions of the packages and the Webpack configuration I have set up.
ERROR in ./src/style/index.scss (./src/style/index....
0
votes
0
answers
19
views
The V-calendar gives out a template or the rendering function is not defined in Laravel Vue, what should I do?
I imported v-kalendare, registered it in the components property and registered it in the blade template, but it gives me the error " [Vue warn]: Failed to mount component: template or render ...
0
votes
0
answers
19
views
Vue router complaining about route guard if navigation is done programmatically
Working with Vue 2.7, and Vue Router 3.0.0 (currently updating from router 2.x.x, it's a pretty old codebase).
I have a generic sidebar nav component that handles navigation in several places across ...
0
votes
1
answer
18
views
Vue2 extend alternative in vue3
import Vue from "vue";
const rootVeComp = Vue.extend(VueGlobalCart);
this.vueMiniCart = new rootVueComp({
el: this.selector,
Data: {
...
0
votes
1
answer
42
views
Bit compatible with Vue 2?
Is there a way to generate a component with Vue 2 using Bit? Right now, seems like creating a component comes with Vue 3 as a peerDependency (which is fine since Vue 2 is going to be out of support by ...
0
votes
1
answer
46
views
Separate Laravel Vue to **only** Vue 2
Basically we already use: API for the routes, and auth-sanctum to login (so I guess it won't be a problem).
How to separate this to backend and frontend?
I already tested this with express (probably ...
0
votes
0
answers
49
views
Ways around the Vue 2 restriction on single-root templates
I'm trying to modify a Vue component that's based on an HTML template tag. The trouble is that the parent page places this component inside an <li> tag:
<li>
<my-custom-vue-...
1
vote
0
answers
25
views
My computed property is not re-evaluating based on its reactive dependencies. It on re-evaluates when a method is ran and the page reloads
I have this computed property.
import { mapState } from 'vuex'
export default {
computed: {
...mapState('user/requestAcc', ['AccountValidation', 'selectedWorkload','AccountOnboarding','Regions','...
0
votes
0
answers
18
views
Audio record saving differently on different node versions
I have exactly same code in two correlated project. The difference is one uses node 16.16.0 and vue3. And the other uses node 14.7.0 and vue2. If I record voice in vue3 project then i cant get audio ...