I have two elements in two rows next to each other:
I have entered them all in an array of objects and called them through props to display them in the left one.
Now what I want to do is when I click on any channel from the left item, it shows in the right with the first item before it and after it in the array, so I am going to use $emit with #clicked function to get an event to call it on the app.vue. But I don't know what to do after to get it displayed.
I feel I should create a new component but I'm at a loss about the elements within.
Edit: Sorry I forgot to mention, the picture is the design not the result of my code, I could only create the left one "list of stations" and have a problem doing the right part based on a click of the left part
You can indeed create 2 components. 1 component having a list of all the stations. another component displaying the details of the radio station.
The moment you click a station in the list, it sends an event and updates a property in the vue.app. This could for example be called selectedStation.
your component that shows the detail of the radiostation just receives a prop with the details of the station.
Related
When a component data value ( which is array with objects ) changes the computed property is not affected.
In the example below, I have a table that is filled with some data ( it is tasks in different statuses with titles ). If you click on a task and you click the button 'CHANGE TASK INFO' it will change the current task selected to
{
Status = QA Review
Title = TEST
}
However if you comment the 99,100 lines and uncomment the 96 line the things are not the same anymore if you try to click the button with a different task selected the task is updated in the 'tasks' variable of the component but never rerendered by the computed prop.
Any ideas ?
SB
https://codesandbox.io/s/vue-table-test-enviroment-bx1sd?file=/src/components/HelloWorld.vue
Vue is not able to detect changes if you replace an array item by index (see Reactivity in Depth).
The solution is simple:
this.$set(this.tasks, indexOfUpdatedTask, test);
I am using vue-draggable and trying to drag player name. It contains two draggabale list where it can drag items from one to another.
From the first list when I drag items, it drags only one player name and that's correct.
But when I drag items from second list, it drags as a whole group. If the second list contains two player name as San and Kim. When I drag Kim , it drags San at the same time. Is there a way to make this second list teamByTime2 to drag only one name at one time, like as first list dataList3?
I have uploaded array objects on JSFiddle code as well. This is how my array looks for first and second item list.
Below is my code on JSFiddle
https://jsfiddle.net/ujjumaki/78vsbu3q/26/
All the list arrays need to have the same model.
Said otherwise, dataList3 and Reservation_people need to contain the same kind of objects.
If it's not the same as what you receive from the API then you'll have to transform the data model after fetching and before saving.
Here is a working example: https://codesandbox.io/s/admiring-ptolemy-1yg9w?file=/src/App.vue:1227-1245
I have a scenario where there are total of 150 items that we want to render, but server returns set of items - say 30 at a time.
We want to use DetailsList, however, we did not find any prop that can be used to update (add to) the list of items when user scrolls to the bottom of present list.
I see that DetailsList handles UI virtualization, however it seems we need to pass the entire set of items at the beginning only.
How do I show a spinner in a DetailsList? For instance, let's say I have the following items in a DetailsList:
list of items
On clicking the item with the name 'AdipiscingUt.onetoc', show a spinner on the rightmost side of that item (next to 125 KB). Please let me know if you have any suggestions on the same.
Thanks!
You can use selection attribute in <DetailsList> component to catch the selection events. Then create extra column with hidden spinner and display it via selection event.
At least I had the experience when I needed to display the icon status according to each item. I added unique id per each item (using onRender method for columns attribute in <DetailsList>) and use it for identification.
I'm putting together an app where a user can record information about like a sale of an unknown number of items in a business. My question is based on recording the quantity, name, individual price and total price of each item sold in a sale. I've already coded a java computer program where I have a table available on the GUI, the user records the information of one item in a table and if they need more rows there is a button which can be pressed each time a new row is needed. I'm wondering:
A) is there a table component I can use in Codenameone on the GUI and
B) can I have the same concept of pressing a button in order to add a new row to the table?
If this isn't possible, because I've had no luck while researching this topic, does anyone have any suggestions of how I can record an unknown number of items for a sale on one GUI page?
UPDATE:
Here is the code which is in the method that adds a new row to the table container.
protected void onSale_ButtonAction(Component c, ActionEvent event) {
Container tbl = findTbl(c);
TextField txt = new TextField();
ComboBox cmb = new ComboBox();
TextField txt2 = new TextField();
tbl.addComponent(txt);
tbl.addComponent(cmb);
tbl.addComponent(txt2);
tbl.animateLayout(300);
}
The button does add the new row but it changes the table layout by resizing all the components and some aren't visible on the screen. I have used the setWidth() method after declaring each component in hope of changing the size of the component but with no luck. How can I solve this problem, so that the new components are the same size as the very first row of components in the table?
And also, after a random number of rows have been filled in with information, i'd like to read this info and save it to a database. I've done this in a computer java program in a JTable and stored the data into a 2D array and then read from the array into the database. Is this method applicable for the container above?
There are "table components" specifically Table, TableLayout & GridLayout.
Adding a row to each of them is somewhat different, lets assume you use a TableLayout container with the container being tbl and having 2 columns:
tbl.addComponent(cmp1);
tbl.addComponent(cmp2);
tbl.animateLayout(300);
Adds both components and animates them into place.