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);
Related
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.
I want to render a DetailsList with all items in that list preselected. I pass a Selection prop to the DetailsList, but calling setAllSelected() on the Selection from the component's constructor won't render all items as selected.
Though, calling setAllSelected() from an event handler would select all items as expected.
I have tried to call setAllSelected() from componentDidMount(), but without success.
I suppose items must be internally created (wrt the DetailsList component) before the Selection can select them, but I have no idea how to force this.
I have added a CodePen.
You need to set the items on the selection first like so:
this._selection.setItems(this.state.items, false)
I adjusted your codepen here to demo this. Hope this helps.
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 writing my first dijit control for EPiServer. In my template I am using the dijit.form.ComboBox.
I have attached an event handler to the "onChange" event like so:
postCreate: function () {
// call base implementation
this.inherited(arguments);
// Init textarea and bind event
this.inputWidget.set("intermediateChanges", this.intermediateChanges);
this.inputWidget.set("store", this.store);
this.connect(this.inputWidget, "onChange", this._onInputWidgetChanged);
},
Then in my event handler I have:
_onInputWidgetChanged: function (e) {
alert(e.id);
this._updateValue(value);
},
My issue is that as with a typical dropdown list, I want to store the Value rather than the Text. The options in my combobox look like so:
Value | Text
1 | "Test"
2 | "A different test"
The problem is that the value passed into the _onInputWidgetChanged handler is always the text value of the combobox i.e. "Test" or "A different test"
How can I get access to the Value instead? As I said, this is the first time I have ever worked with dojo and dijit so I may be missing something fundamental here.
Thanks in advance
Al
The thing about ComboBox is that its value is not required to be an entry in the drop-down menu (and thus, not guaranteed to be one either). Think of it as a textbox with autosuggest - users can use the menu to expedite the process, but the value of the textbox is freeform and is reported as whatever the user types into it.
If you want users to be required to choose an entry from the menu, you should be using FilteringSelect instead, which will report the associated store item's ID (or associated option tag's value) as its value. As opposed to the free-form nature of ComboBox, FilteringSelect can be thought of as a menu with type-ahead functionality.
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.