This is the library that I'm using.
vue-select
And I have this kind of data
[
{ text: "AAA", value: 1 },
{ text: "BBB", value: 2 },
]
<v-select
id="modal-job_type"
:value="1" // v-model also doesnt work for me
item-value="value"
name="job_type"
:options="jobTypeOptions"
label="text"
/>
I expect to see "AAA" selected.
But instead I see "1" text.
What is wrong?
I guess you need to set a value of options to v-model, instead of the index. (Though, I couldn't find a page where it is clearly stated in the official document.)
It would look like;
const options = [
{ text: "AAA", value: 1 },
{ text: "BBB", value: 2 },
]
const selected = ref(options[1]) // Setting initial value
<v-select
v-model="selected"
label="text"
/>
Also, Vue Select does not have item-value property. It seems you are confused with Vuetify's v-select.
https://vuetifyjs.com/en/api/v-select/#props-item-value
Related
I know, Vue Select docs specify that options should be an array, but is there a way around it? I want to use object keys as values and object values as labels.
My data:
obj: {
value: 'en',
options: {
'ar': 'Arabic',
'ast': 'Asturian',
'en':' English'
}
}
<v-select
v-model="obj.value"
:options="Object.keys(obj.options)"
>
I know i can use keys as options that way, but I have no idea how to use values as labels. Any tips?
There are multiple ways you could do that but one options is:
<v-select v-model="obj.value" :options="obj.options" :reduce="val => val.code"/>
Only change to your data should be that the obj.options should look like below:
obj: {
value: "en",
options: [
{ label: "Arabic", code: "ar" },
{ label: "Asturian", code: "ast" },
{ label: "English", code: "en" }
]
}
Relevant documentation transforming-selections
I am generating comboboxes dynamically and I need to pass a different collection to the ng-repeat every time.How can I do that?
<div ng-repeat="choice in $ctrl.inputFilterRows">
<md-select ng-model="choice.name">
<md-option ng-repeat="filter in $ctrl.filters" value="{{filter.value}}" >
{{filter.value}}
</md-option>
</md-select>
</div>
Tried to set from the controller, but didnt work:
self.inputFilterRows[0].filters = [{ value: 'June' }, { value: 'July' }, { value: 'August' }];
An idea would be to use ng-if on several md-select elements and decide which one to enable based on a condition that suits you.
Another is to have a $scope variable that is linked to a single ng-repeat select, but you keep assigning new values to that $scope variable collection whenever you want. That would force a scope redraw and the ng-repeat would now use the new collection values.
Second one is probably cleaner.
EDIT:
Based on a better explanation provided in the comments below I now realise that you want a set of selects, each with their own set of options.
To achieve something like that I would suggest having an array of arrays, in which each object would represent a select, and then it's contents would be the options for that select.
$scope.selectArray = [
{ name: 'colours', filters: [{ value: 'black' }, { value: 'red' }, { value: 'blue' }] },
{ name: 'months', filters: [{ value: 'January' }, { value: 'February' }, { value: 'March' }] }
];
Now, you can have an ng-repeat iterating over selectArray (select in selectArrays) to create the selects, and then each one would contain another ng-repeat to iterate over the select.filters (filter in select.filters)
I am not going to write the exact code because you look like you know what you're doing and I'm sure you can put it together yourself very easily.
If you want to change the dataset of a specific select you can do something like:
$scope.selectArray[1].filters[0].value = 'December';
or
$scope.selectArray[1].filters = [{ value: 'June' }, { value: 'July' }, { value: 'August' }];
I have the following enum:
export enum Category {
SYSTEM = 0,
NAVIGATION = 1,
MESSAGING = 2,
MEDIA = 3
}
and a mapping to labels via:
export const CategoryMapping = [
{ value: Category.SYSTEM, label: 'System' },
{ value: Category.NAVIGATION, label: 'Navigation'},
{ value: Category.MESSAGING, label: 'Messaging'},
{ value: Category.MEDIA, label: 'Media'}
];
I also have an object that has the category as its field.
My goal is to display the categories in a select, bind it to the object's category field and display the current value by default when displaying:
<select class="form-control" id="category" [(ngModel)]="myObj.category">
<option
*ngFor="let category of categories"
[ngValue]="category.value"
[selected]="category.value == myObj.category">
{{ category.label }}
</option>
</select>
The categories I'm referring to is the mapping.
However, no value is selected by default. I know that the ngModel and the ngValue types have to be the same, but an enum implicitly is an integer, so I figured it works. Also the selected expression results to true for the matching category, but it's still not selected by default.
By default when you try to use enum value, they return their current index. I think you're assuming to get string value that you have written for enum.
You have to tweak a enum a bit, like instead of getting using enum value like Category.SYSTEM to Category[Category.SYSTEM] which will return a string.
export const [
{ value: Category[Category.SYSTEM], label: 'System' },
{ value: Category[Category.NAVIGATION], label: 'Navigation' },
{ value: Category[Category.MESSAGING], label: 'Messaging' },
{ value: Category[Category.MEDIA], label: 'Media' }
];
Demo Stackblitz
I'm currently learning AngularJS but I wasn't able to find a solution for this problem even though it seems trivial.
I have two lists / controllers that are getting created by factory service.
I want to remove an object from list 1 and add to list 2. When I display the object in the console after passing it, I can see it but it doesn't appear in my second list.
I have the code on GitHub - As you can see this is an assignment from coursera.
https://github.com/alaimoclaudia/assignment2_solution
I am not sure I am answering your question, but I have created a plunker based on your github code:
https://plnkr.co/edit/oNvezy5IQ9EBKMpwWq7j?p=preview
I see only one list of items in the code:
[{
name: "Milk",
quantity: "10"
}, {
name: "Donuts",
quantity: "10"
}, {
name: "Cookies",
quantity: "10"
}, {
name: "Chocolate",
quantity: "10"
}, {
name: "Apples",
quantity: "10"
}];
And it seems like the ui behaves as expected.
When I remove a comment on my HTML var {{selecionados}} selected from, and I click on the list of names is all fine, but when HTML retreat or comment on again no longer works.
<script async src="//jsfiddle.net/raphaelscunha/9cwztvzv/1/embed/"></script>
Vue.js will only update your view when a property within the data object is changed, not when a new property is added. (See Change Detection Caveats in the Vue.js guide)
If you want it to react when ativo is set to true, make sure the property exists beforehand.
Try something like this when you're initializing your Vue object:
atores: [
{ name: 'Chuck Norris', ativo: false},
{ name: 'Bruce Lee', ativo: false },
{ name: 'Jackie Chan', ativo: false },
{ name: 'Jet Li', ativo: false}
]
JSFiddle