JosephusPaye / Keen-UI

A lightweight Vue.js UI library with a simple API, inspired by Google's Material Design.
https://josephuspaye.github.io/Keen-UI/
MIT License
4.1k stars 437 forks source link

UiRadioGroup works but prints errors #465

Closed hyvyys closed 4 years ago

hyvyys commented 5 years ago

Issue

I'm using UiRadioGroup with Object options:

<template>
  <div id="app">
    <UiRadioGroup
      name="radio-1"
      v-model="value"
      :options="options"
    />
  </div>
</template>

<script>
import UiRadioGroup from "keen-ui/src/UiRadioGroup.vue";

export default {
  name: 'app',
  components: {
    UiRadioGroup
  },
  data() {
    return {
      value: "",
      options: [
        { value: "", label: "default" },
        { value: "a", label: "option a" },
        { value: "b", label: "option b" },
      ]
    };
  }
}
</script>

On page load and on each click on the radio I get tons of error messages complaining about invalid prop types for props value and truevalue of UiRadio as well as prop value for UiRadioGroup.

Invalid prop: type check failed for prop "trueValue". Expected Number, String, got Object

Despite the errors, the component works properly. This issue occurs for me using Vue-Cli and without it. Doesn't happen in a Codepen, though https://codepen.io/hyvyys/pen/NWKwRwW.

See error messages ``` [Vue warn]: Invalid prop: type check failed for prop "trueValue". Expected Number, String, got Object found in ---> at node_modules/keen-ui/src/UiRadio.vue at node_modules/keen-ui/src/UiRadioGroup.vue at src/App.vue VueJS 45 main.js:6 js app.js:2596 __webpack_require__ app.js:727 fn app.js:101 1 app.js:2610 __webpack_require__ app.js:727 app.js:794 app.js:797 ``` ``` [Vue warn]: Invalid prop: type check failed for prop "value". Expected Number, String, got Object found in ---> at node_modules/keen-ui/src/UiRadioGroup.vue at src/App.vue VueJS 16 run es6.promise.js:75 notify es6.promise.js:92 flush ``` ``` [Vue warn]: Invalid prop: type check failed for prop "value". Expected Number, String, got Object found in ---> at node_modules/keen-ui/src/UiRadio.vue at node_modules/keen-ui/src/UiRadioGroup.vue at src/App.vue VueJS 18 run es6.promise.js:75 notify es6.promise.js:92 flush ```

Reproduction

https://github.com/hyvyys/keen-ui-radio-test

JosephusPaye commented 5 years ago

Hi @hyvyys,

Thanks for the report and reproduction 👍.

There seems to be an issue with the way we pass an option's value from UiRadioGroup to UiRadio:

https://github.com/JosephusPaye/Keen-UI/blob/e83356772e861fbc73fbe50adfa305eed6c0a240/src/UiRadioGroup.vue#L20

The way it is setup now means option values that are falsy e.g. "" cause it to fallback to the using the entire option (assuming it's a string).

You can work around this for now by have setting a value for each options. In your case you might use default as the value for the default option.