I have this piece of code really confused me. I'm using typescript with vue (vuetify) and I'm still pretty new with typescript.
I have an array of objects that I want to load as items into a vuetify combobox.
Array =[
{
subject: 'science',
difficulty: 'medium'
}
{
subject: 'math',
difficulty: 'hard'
}]
with having the subject as the one visible on the dropdown and the difficulty will the the value hidden behind the combobox
i know it needs to look like this
items: [
{ text: 'science', value: 'medium' },
{ text: 'math', value: 'hard' }];
so i can load it on the v-combobox like this
<v-combobox :items="items" />
can anyone help me on how to achieve this? much appreciated!
I did not understand your issue but a typical combobox should be look like this:
(define selectedItem as an empty array in your data and call this.selectedItem.text)
<v-combobox
v-model="selectedItem"
:items="items"
item-value="value"
item-text="text"
:return-object="true"
label="Select an item.."
outlined
clearable
>
</v-combobox>
Yes for load the contents of array you set items props and also item-value et item-text props like #Aurora did. Because you an array of objects, and the component need to know what will be the value and the display field.
Related
I have been using the select from react-select for some time. So far, only with predefined options, without any functionality for adding any other option/s.
As far as I could read up and figure out, there is also something called creatable, which is exactly doing that. But it doesn’t allow my to predefined/static lists, as far as I could see.
I assume both have to be implemented to get either functionality, or is there a way or prop to just stick one of them?
Edit:
Maybe I didn’t emphasis to enough on the static part. Basically, I would like to have one component that has a prop like: “canAddOptions: bool”. To either allows to add values or not. As far as I can understand, I have to implement both to get this..?
I'm also using similar approach in my application, where I'm rendering static list as options and it should work as a creatable select.
As per the problem statement, you can use isValidNewOption={() => false} to make creatable as normal select.
Try something like below:
import CreatableSelect from 'react-select/creatable';
<CreatableSelect
isMulti
isValidNewOption={() => false} // You can apply condition here as per the prop you will get.
options={[
{ value: 'one', label: 'One' },
{ value: 'two', label: 'Two' },
{ value: 'three', label: 'Three' },
]}
/>
I have a status field, coming from my API. It has a value between 0-3.
my response looks like this:
{ status: 0 }
I can show the value in Edit with TextInput, it shows the value (in this case 0).
However I want it to show it with SelectInput, as in Edit mode I want to change the value of the status.
my SelectInput looks like this:
<SelectInput label="Status" source="status" choices={[
{ id: '0', name: 'elfogadásra vár' },
{ id: '1', name: 'aktív' },
{ id: '2', name: 'inaktív' },
{ id: '3', name: 'archív' },
]}
optionText="name"
optionValue="id"
/>
Unfortunately when I save this, and refresh my page, my Status does not show the current value (which is 0 in this case, it should show me 'elfogadasra var', but it's empty)
What do I do wrong?
The way i achieved this was in the following manner
<ReferenceInput label="Country" source='country.id' reference="Country" sort={{ field: 'name', order: 'ASC' }} alwaysOn>
<SelectInput optionText="name" optionValue="id" allowEmpty />
</ReferenceInput>
I needed to load my choices from that database though however the concept is the same... i suspect that what you are using for source is wrong.. Look in the redux dev tools.. under state --> form --> record-form --> values and you should see something like status.id that you should be using for source instead.. i have the same type of object in my form country {id: 2}... but that is not what you use to get the input to show your existing value...
Your solution may be as simple as calling a diff value in source, but you'll know what that should be by peeking into the state {status: 0} must have something in front of it in state like something --> {status: 0}
Not the real reason but in case somebody is tackling with the same issue it is worth checking:
I found out I was passing initialValues to the Form component on create and haven't skipped them on the edit mode. That's why it was always resetting the SelectInput's.
I am going through some React code while I am learning it. I have come across the shape method used in PropTypes, as I understood we use the shape method to validate if the given value is of certain shape, that we pass it as an argument. But, not sure what is it's purpose if we don't pass it any value that we want to validate, like in this example:
Field.propTypes = {
fields: PropTypes.shape().isRequired,
};
Can't we just have it like this:
Field.propTypes = {
fields: PropTypes.isRequired,
};
PropTypes is not for production usage it's used in the development environment and it's not the replacement of validation as some newbie people get it wrong.
For example, I had this dropdown component.
Dropdown.propTypes = {
// Notice this I define the shape of object here
item: PropTypes.shape({
value: PropTypes.string,
text: PropTypes.string,
}),
};
Developers who are supposed to use this component they are required to pass item object but the problem is this component will only work when the object has the particular shape like this.
{
value: "value1",
text: "text1",
},
So, what I did I defined the shape of the object that how item's object should be and if a someone pass wrong shaped object the component will throw the warning in console.
I have a JSFiddle below to explain my problem but basically I have an array called tiles which has a title. When the instance is created() I add a field to this array called active
I then output this array in an <li> element and loop through it outputting the title and active objects. My problem is as you can see in the fiddle when I run v-on:click="tile.active = true" nothing happens to the active state written in the <li> element
but if I run v-on:click="tile.title = 'test'" it seems to update the active object and the title object.
Its strange behaviour I can't seem to work out why. Does anyone have any ideas?
https://jsfiddle.net/jgb34dqo/
Thanks
It's to do with Vue not knowing about your properties, change your array to this:
tiles: [
{
title: 'tile one',
active: false
},
{
title: 'tile two',
active: false
},
{
title: 'tile three',
active: false
}
]
This allows Vue to know about the active property and in turn it knows to monitor that variable.
It's worth looking at this link about Vue Reactivity as it helps with understanding how and when data will change automagically.
If you must add the properties after
take a look at $set. It allows you to add props to an object that then get watched by vue. See this fiddle, notice the change:
this.tiles.forEach(function(tile) {
// Tell vue to add and monitor an `active` prop against the tile object
this.$set(tile, 'active', false);
}.bind(this))
I have a ui-grid bound to an object array called data like this:
$scope.grd = {
enableRowSelection: true,
multiSelect: true,
enableRowHeaderSelection: false,
columnDefs: [
{ field: 'id', name: 'ID' },
{ field: 'name', name: 'Name' },
{ field: 'tags', name: 'Tags' }
],
data: "data"
};
if I now replace an item in the array like this:
$scope.data[i] = replacementData;
the grid is updated correctly but the selection state is lost.
I guess the selection module simple doesn't support this though the core module does.
Is there a way to get the selection state of an item before replacing it?
I found this GridRow class in the docs of the selection module that has an isSelected property but no ideas how to get it...
Here is a Plunk that demonstrates the behavior - notice that the selectionCount is also wrong after the row is replaced, so there must be some kind of selected item info somewhere.
Update: It seems that replacing an item in the bound array doesn't remove the GridRow that ui-grid uses internally (that also is the reason why the selectedCount is wrong). Calling unSelectRow before replacing the item fixes the count but the GridRowstill exists...
Ended up copying all the properties from the replacementData over the old data object. That way the selection state is kept, and no new GridRow get's created.
Updated Plunk
angular.extend($scope.data[i], replacementData);