question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

CSelect component binding object instead of value

See original GitHub issue

Hi, 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:closed
  • Created 3 years ago
  • Comments:5

github_iconTop GitHub Comments

1reaction
miedzwincommented, May 19, 2020

Thank you. Updating package solve the issue. Sorry for creating new issue, I just didn’t found any information about this bug.

0reactions
sacdencommented, Jun 5, 2020

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?

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found