Questions tagged [vue.js]

Vue.js is an open-source JavaScript framework for building interactive web interfaces. It creates data-driven user interfaces with a simple and flexible API.

Filter by
Sorted by
Tagged with
-1
votes
1answer
15 views

How do I distinguish the difference in naming and file structure between components and mobile components in React? [closed]

Here is my example structure: . ├── App.jsx ├── index.js └── src └── components ├── Button.jsx └── Header └── Header.jsx Question: ...
6
votes
1answer
59 views

Improving product configurator “algoritm”

I have created a product configurator in VueJS and the whole functionality of it runs on one single function. I've put the word algoritm in the title in quotes because I don't really know if it is ...
0
votes
0answers
23 views

Draw shapes using the Html5 Canvas api

A while ago I decided to start working on a project that will keep me busy for a while and will help me sharpen my programming skills. I do not underestimate the work behind apps like adobe xd, sketch....
2
votes
1answer
190 views

To-do app front-end in Vue 3

I have put together a To-do Application with the Slim framework on the back-end (API) and a Vue 3 front-end. I added a demo on my YouTube channel. In the main App.vue file I have: ...
4
votes
2answers
428 views

Vue.js checkout stepper

I have made this small checkout stepper with Vue (v 2.x.x): ...
1
vote
1answer
83 views

Vue.js todo app

I am working on a small to-do app with Vue (v 2.x.x). I list 5 todos from jsonplaceholder initially. I can add more todos, delete them or mark them as done. ...
2
votes
1answer
54 views

Iterating through a list to generate calendars

I'm iterating through a list to generate calendars, the issue is each generator function has the same this.addToCalendar() function. I'd like to know how I could ...
0
votes
0answers
41 views

What's the best way to make props reusable across many components in Vue.js 3?

In option API (Vue 2 syntax which is still available in version 3) we could extract some repeated pieces inside many components and define them as mixin that could be reusable like : ...
2
votes
1answer
164 views

Smooth sidebar toggle animation with vuejs and tailwind

I'm making a slide sidebar with vuejs and tailwind. It works but feels kind of sluggish. Is there a way to make it smoother ? working example: https://codepen.io/tuturu1014/pen/oNzRXeW ...
1
vote
0answers
30 views

Passing value/data from a page to another page using Vue.js and Typescript

I have a markdown editor in View A which is showing the result in the current View. I'm trying to pass a result to another page which is View B. In the View A, a button exist to share the markdown ...
2
votes
2answers
67 views

Currency Convertor in VueJs

I have created this simple currency convertor to learn VueJs more. Any code review/comment on coding standard and best practice for Vue? Thanks in advance. ...
1
vote
0answers
59 views

vuejs: best practices with vuex when you call multiple actions

I am working on a project in which I am using vue js 2 and electron , to manage the state I use vuex , I have at least 20 actions to call ...
2
votes
0answers
39 views

Vue 3 composition API typescript using ref in Object

Hi I using Vue 3 with Typescript. In my code I have variable: ...
5
votes
1answer
445 views

Best way to do unknown number of nested v-for loops, or how to do while loops in VueJs (is there a “v-while”?)

I want to recursively use a Vue component for each item in a multidimensional array, which is a list of topics. For example, Topic 1 can have subtopics 1.1, 1.1.1 and 1.1.2, but topic 2 might have no ...
5
votes
2answers
90 views

Very basic Vue todo list viewer

Problem I keep trying to use various todo lists. But I keep coming back to the same situation; not having an active todo list. This can come in two forms: I don't have a habit to open bespoke ...
2
votes
1answer
40 views

Multiple audio player - arrow keys & space

I am creating a VueJS component of an audio player. I am having some difficulties in finding the ideal way to get the arrow keys and space bar to work. I have found a solution, however I think it is ...
2
votes
2answers
123 views

Structuring code logic for events on laravel controller

The code below will store a base64 image on another website and create an event to display the image on a Vue page in real time. It works fine and all. My question is, is this a good way of doing it ...
6
votes
1answer
72 views

Team scrambler VueJs

I wanted to do a very little project of a team scrambler. There are two teams of 5 players. Each player has a unique color (in his team) from a limited pool. You can use 2 actions : Scramble the ...
5
votes
2answers
451 views

Implementing Laravel old data in Vuejs

Users input their pin-code which is checked against the database and returned with the locality, district and state associated with that pin-code. Multiple localities may be returned so the options ...
2
votes
1answer
46 views

Vue.js dynamically passing in functions [closed]

I have a jsonArray.js file ...
2
votes
1answer
54 views

Client side authorization when retrieving from server

I have an endpoint to retrieve the user's authorization based on Joseph Silber's Bouncer. I have a global can() function. It creates a unique key based on the ...
2
votes
0answers
206 views

Vuejs Dynamic inputs and displaying data

I am accepting dynamic input from the user if they have any i.e - Children/Siblings/Previous Employement etc through Vue Components. A form is created and they input their data which is validated and ...
2
votes
1answer
79 views

Using setInterval() to make data reactive

I have a video component passing data from an async GET request to a child component: ...
-3
votes
1answer
74 views

Is there a means to combine the similar chunks of Vuejs code shown below? [closed]

I am currently working on a project and very recently came across Vuejs. I used it to create a dynamic form on my frontend, however, the approach I took does not seem right to me. Could someone take a ...
12
votes
5answers
2k views

Vue.js search functionality

In my BlogList.vue component I made a search input field: ...
4
votes
1answer
48 views

Protecting Vue page based on the API response

If the user/visitor has access to the API route, then the status code will 200, else 401. I know that I can user Vue navigation guards, but I will need to use Vuex. This way is much simpler and faster,...
2
votes
0answers
18 views

Localization of multi style text element in Vue

After following up this question, I'm thinking if there's a better/shorter way to write this text element that has part with different style, while allowing localizations: ...
0
votes
0answers
56 views

Vue.js in legacy web application

I'm working on modernizing legacy ASP.NET WebForms site which heavily relies on doing AJAX request for client-side rendering. Without the use of vue-cli compiling <...
1
vote
1answer
21 views

Loop Vue2 tag with keyup + modifier and click

I have following code but wonder if I can loop it instead of copy-pasting. calculator.ts ...
2
votes
0answers
33 views

Progressive bar service in Vue

I am learning Vue after working for some time with Angular and I'd like to hear experienced programmers concerning the implementation of my Progressive Bar service (in Vue it's called Plugin). The ...
2
votes
1answer
129 views

Array of random values that changes over time

I had a project with repetitive HTML, JS code blocks in which should be ten fields (A, B, C...) with certain functionality. Three fields are already implemented, but I don't want to copy and paste ...
-2
votes
1answer
35 views

Missing header in the UI - Vue.js [closed]

I need my h1 to show below my for my checkbox. It is inside of the div. Should I maybe put it outside of the . The missing is below the Organization Fields header. It is suppose to display below ...
0
votes
1answer
152 views

Vue.js v-if for a checkbox selection of data from a csv [closed]

I'm creating an option checkbox for an Organization data only if they have Organization data to submit from their CSV. I am creating a <div> and my ...
6
votes
1answer
229 views

Vue component for Game Die (dice)

As part of learning Vue and Vue Test Utils I develop some simple games. I made a simple version of craps. Because in many other games a die (or dice) is used, I decided to create a reusable component <...
3
votes
1answer
70 views

How to make this code for efficient and better looking?

I know that if you are using too many if else statements there is a better way, I hope. Please help me learn, thank you everyone. I tried to think of a better way but just couldnt come up with ...
1
vote
0answers
21 views

Editable Data Table for Assigning Helpers to Drivers

I am just learning Vuejs and I am implementing it in a 'legacy' environment where jQuery, Bootstrap 3, among other libraries are loaded by default. In my implementation I try to keep it simple with ...
2
votes
0answers
66 views

Ecommerce site shipping data

I have REST API written on laravel and front end on vue.js. It is a dashboard for an ecommerce store where you can connect to post shipment service API to upload order shipment data and get tracking ...
10
votes
0answers
137 views

Resizable containers with VueJS

Some time ago I reviewed the code in Resizable split DIVs Vue.js, suggesting that the OP use computed properties and bound styles to simplify the code (at least reducing the need to use ...
6
votes
1answer
193 views

Resizable split DIVs Vue.js

I just started Developing Web App (Vue.js) for my company for around 1-2 months. Therefore, my knowledge and experience in HTML, CSS and Javascript is kinda shallow. I've created a custom resizable ...
3
votes
2answers
97 views

Health Test App, It Returns a Score Based on the Answers Given

Here is my parent component: App.vue. I was wondering what improvements I could make to the code here. Application Description This application was built off the Vue.js framework and utilizes a ...
-1
votes
1answer
355 views

Try-catch-finally snippet [closed]

Using visual studio I created a snippet which helps me surround my already written or new code into a try-catch-finally block. I use axios for REST so there had to be separate error handling method so ...
4
votes
1answer
275 views

Grid layout component for VueJS

I'm working on a vue.js / nuxt.js project, applying the Atomic Design methodology, I need to do one to set the grid layout and using CSS Grid Layout. I already did the component, but I think I did ...
0
votes
1answer
37 views

Repetitive then/catch method on Javascript [closed]

I have this function and looks ugly because there are a lot of "catch" doing the same. Any idea how to make it better? ...
2
votes
1answer
62 views

Rendering JSON arrays of unequal length as a table

I have a website where my users can create "table-like" layout dynamically. So imagine that my users can upload a text document, and then append columns to the document, and the output will then be ...
4
votes
0answers
134 views

Vuejs - input validation

I'm in a project that's currently using vue. I'm at the moment developing validations for the inputs and in a way to make them more flexible, my idea was to create an intermediate component "Group ...
1
vote
0answers
165 views

vuejs vuex element-ui used to toggle a login dialog but req

I have a login dialog working in vue js with typescript. I want to trigger the open via a button on page, but also by toggling a value in the vuex store. It is working by 2 watchers: Watching the ...
0
votes
1answer
41 views

Function that checks two objects with same fields and assigns old non-null values to new object if new values are empty or null

I have a function that checks two reference objects. They both have the same properties. The purpose of this method is to ensure that any non-null old values are not overwritten with null or empty ...
1
vote
1answer
41 views

Remove excessive recurrent code from store and computed

I have three getters in my store: ...
2
votes
0answers
56 views

Vue.js Computed Property Filtering [closed]

I have a Vue.js computed property as follows. ...
1
vote
3answers
183 views

Class constructor with async properties set from poke-api

So, this is for a clicker game I'm trying to build with Pokémon data drawn from the PokéAPI. Since I'm using Vue.js for the project, ...