CSelect component binding object instead of value
See original GitHub issueHi, I probably found a bug in CSelect component. While passing to options array of objects like in this example: https://coreui.io/vue/docs/components/form-components.html#cselect-api it fails to binding value when object value is 0 or false. Here is example code:
<template>
<div>
<CSelect
:value.sync="selectedValue"
label="Year"
:options="[{value: 0, label: 'zero'}, {value: false, label: 'false'}, {value: 1, label: 'one'}]"
/>
</div>
</template>
<script>
export default {
data() {
return {
selectedValue: null
}
}
}
Here is value of ‘selectedValue’ based on selected option: ‘zero’ selected -> {value: 0, label: ‘zero’} ‘false’ selected -> {value: false, label: ‘false’} ‘one’ selected -> 1
This throws errors in developer tools console while using ‘:value:sync=“selectedValue”’ or with ‘v-model=“selectedValue”’ - [Vue warn]: Invalid prop: type check failed for prop "value". Expected String, Number, Boolean, Array, got Object
In my case it makes to impossible to make proper body for request to API.
Issue Analytics
- State:
- Created 3 years ago
- Comments:5
Top Results From Across the Web
Binding select element to object in Angular - Stack Overflow
In this case, it appears that selectedValue would be a number -- the id of the selected item. However, I'd actually like to...
Read more >How to bind Select element to object in Angular with examples
To bind select element to object in angular use `[ngValue]` property.
Read more >Binding: Selects - Aurelia
Bind the select element's value attribute to a property. In "multiple" mode, the property should be an array. In singular mode it can...
Read more >The "value" binding - Knockout.js
The value binding links the associated DOM element's value with a property on your view model. This is typically useful with form elements...
Read more >Bindings / Select bindings • Svelte Tutorial
Note that the <option> values are objects rather than strings. Svelte doesn't mind. Because we haven't set an initial value of selected ,...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Thank you. Updating package solve the issue. Sorry for creating new issue, I just didn’t found any information about this bug.
sorry, how can i update this theme in my project?