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.
106 questions
13
votes
5
answers
3k
views
12
votes
2
answers
641
views
Vue - It's the Royal Game of Ur
Background
After learning Kotlin for Advent of Code in December, I started looking into cross-compiling Kotlin for both the JVM and to JavaScript. Then I wrote a game server in Kotlin and also a ...
- 59.7k
12
votes
1
answer
528
views
Resizable containers with VueJS
A month 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 ...
- 29.6k
10
votes
1
answer
473
views
Card based computer game
This is a 2 player (Will soon have AI in it - I am not asking for help with AI) game with mechanics similar to the card game named Magic the Gathering.
Bear with me, this is a lot of code. If you ...
- 1,283
7
votes
1
answer
431
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 <...
- 262
6
votes
1
answer
2k
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 ...
- 233
6
votes
1
answer
258
views
v-for loop generating list items that will get rearranged based on an associated value (ranking system)
A counter gets incremented by a custom value.
Each increment value gets stored with its refcount that tracks how many times it occurred.
An ordered list shows all increment values entered so far by ...
- 75
6
votes
1
answer
122
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 ...
user211699
6
votes
1
answer
620
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 ...
6
votes
1
answer
97
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
2
answers
670
views
Display properties of a country, from online service
I'm currently learning Vue JS and I made a simple app that pulls information from API and displays facts about a country given a 2-letter country code. I'm looking for feedback on how to improve the ...
- 51
5
votes
1
answer
4k
views
Passing a callback to a component in Vue.js
I'm currently trying to teach myself Vue.js and I've just created my first small project: a simple todo list. While writing the component I discovered that you can't access methods from the parent ...
- 53
5
votes
2
answers
151
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 ...
- 44.6k
5
votes
2
answers
1k
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 ...
- 171
5
votes
1
answer
120
views
Showing events on a multi room scheduler
I write a web app that shows events on a multi room scheduler. I use VueJS for the first time on a real project.
Here, I loop through the events array every room column (two nested v-for). In jQuery ...
- 51
4
votes
2
answers
1k
views
4
votes
3
answers
223
views
fizzbu| - Fizzbuzz with dynamic height
Here is a variation on a theme: fizzbuzz. After providing this answer recently, I decided to practice some VueJS skills with outputting the values and conditionally applying styles based on the value. ...
- 29.6k
4
votes
2
answers
115
views
Vue.js - Sierpinski Triangle
Below is a Vue app I wrote to draw a Sierpinski Triangle given n iterations, which can be incremented/decremented via a HTML ...
- 519
4
votes
3
answers
179
views
Destructuring with map and assigning to a constant
I don't know exactly what to name this, but I was refactoring a code snippet and looking at this constant users I thought I'd do this destructuring:
Before:
...
- 441
4
votes
1
answer
2k
views
D3 Updating stacked bar chart
In my data there can be different number of bars in each chart.
Here is a picture:
When pressing the button labeled change bars layout the view of the charts toggles between horizontal and vertical ...
- 163
4
votes
1
answer
77
views
"Github contribution"-clone made with VueJs
I took a shoot at writing a Github contribution clone using Vuej, tippy.js and tailwindcss.
Githubs looks like this:
My working clone looks like this:
It is not an exact look-a-like but I'm getting ...
- 253
4
votes
1
answer
117
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 ...
- 149
4
votes
1
answer
66
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,...
- 91
4
votes
1
answer
646
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 ...
- 41
4
votes
1
answer
688
views
Vue + Vuex + Firebase serverless realtime chat
I am "discovering" Firebase and I'm trying create simple chat with Vue, Vuex and Firebase. But because I'm just starting out with Vue, I need code review or advices from more experienced programmers. ...
user145018
4
votes
1
answer
482
views
Databinding entire objects between child Vue components and the root Vue instance
I have a form in which I am collecting data from two applicants. In order to minimize HTML duplication I built an applicant Vue component that generates each applicant from a template.
Each applicant ...
- 41
4
votes
1
answer
2k
views
My first animated data grid with Vue.js
Because this is my very first attempt to create a data grid with Vue, I would like to know about all misconceptions used in my approach. Whomever points to the most important shortcoming / weakness in ...
user145018
4
votes
0
answers
72
views
Vue 2 to 3 upgrade: checkbox form field component
I have a checkbox form question component I made in Vue 2, and I'm migrating to Vue 3 so want to simplify it as much as possible and make sure I've taken advantage of all the new feature of Vue 3.
...
- 41
4
votes
0
answers
188
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 "...
- 171
3
votes
2
answers
136
views
group computed properties in vue component
I have the following vue component which all works fine
...
- 651
3
votes
1
answer
457
views
Display and search through a JSON's items in Vue.js
I have put together this small application which displays data from a JSON file known as "Users" in an HTML5 table.
I use Bootstrap 3, Axios and Vue.js 2 for this purpose.
Here is the code:
...
- 623
3
votes
1
answer
209
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 ...
- 171
3
votes
2
answers
151
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
...
- 147
3
votes
1
answer
329
views
Present table of data, acquired from an endpoint, with option to sort by different values
I have built a Vue app which fetches data from an endpoint and presents that data in a table with sortable columns.
The app is based on this React challenge which is to create a table of users and ...
- 1,322
3
votes
1
answer
113
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 ...
- 31
3
votes
1
answer
98
views
Vue component over-complication
I'm building a date range selector, and while this works, I feel like I'm making it more complicated than it needs to be. Is there a more elegant way of writing this?
Possibly using computed values ...
- 33
3
votes
1
answer
995
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
...
- 31
3
votes
1
answer
99
views
Using something other than form field's value in Vue
I have a form, I need to send untraslated values, but as well, I need to get translated ones from Vue to write them down in page.
For now, I ended up creating a 'shadow' property and changing it via ...
- 334
3
votes
1
answer
1k
views
A JS Tree Viewer in VueJS
To learn Vue.js I have made a tree viewer with the code below. Can anyone give me some advice on how to improve the code?
...
user123460
3
votes
0
answers
73
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 ...
- 171
2
votes
2
answers
1k
views
2
votes
2
answers
3k
views
Calling a global popup from nested vue components
I have tons of nested Vue components that need to be able to open a global modal. To avoid having tons of listeners and emitters snaking their way all through the app, I am using VueX. The main App ...
- 611
2
votes
2
answers
1k
views
Dynamic List Application as first Vue.js App
Task Description:
Create a div-element and take control over it using a Vue-Instance.
Print an array of hobbies into the div-element. Provide some default hobbies.
Add a 'New Hobby' button and a text-...
- 5,040
2
votes
2
answers
504
views
Infinite content loop carousel
I made this pretty simple content loop-carousel component, but
the code seems too "Iffy" but Im not sure how I could make it better.
I tried to use the Switch expression, which makes it a ...
- 123
2
votes
2
answers
233
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.
...
- 925
2
votes
2
answers
166
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 ...
- 21
2
votes
1
answer
958
views
Slots and Dynamic Components
It's an exercise from a Vue.js course I'm enrolled into. The aim is to get comfortable with the Vue.js features Slots and Dynamic components. By clicking on the buttons one shall be able to change the ...
- 5,040
2
votes
1
answer
601
views
Extracting data from vue-chartjs into an array of datasets
I have a function which returns an array of datasets for a chart written with vue-chartjs. The getter getChartData returns an array with three objects with nested ...
- 155
2
votes
1
answer
157
views
2
votes
1
answer
73
views
JS animated string builder
Today, I tried to write a simple function that would display the characters of my string one by one by iterating over a string containing the letters of the alphabet and showing the steps on the ...
- 23