CODEWITHSUNDEEP
vuetify.jsv-select
YUN0814
YUN0814

Reputation: 49

Weird Situation When Using "Clearable" on VSelect

This is the intended usage of the clearable property on my component:

  1. On parent component:
<v-row>
  <v-col>
    <Selector :clearable="true"/>
  </v-col>
</v-row>
  1. In the child component:
<v-select :clearable="clearable"/>

const props = defineProps({
  clearable: {
    type: Boolean,
    default: false,
  },
});

Although I do see the clear icon on my component, the console keeps reporting:

[Vue warn]: Invalid prop: type check failed for prop "clearable". Expected Boolean, got String with value "true".

So, I experimented with directly assigning the values in the child component:

<v-select :clearable="true"/>
<v-select :clearable="false"/> <!-- Even with "false", the clear icon still appears -->

But encountered the same error messages. It appears we can only use this approach to avoid error messages:

<v-select clearable/>

However, how can I properly pass clearable as a prop from the parent component to the child component?

Upvotes: 0

Views: 84

Answers (1)

YUN0814
YUN0814

Reputation: 49

I believe I resolved the issue by making a simple adjustment to the parent component:

<v-row>
  <v-col>
    <Selector :clearable="clearable"/>
  </v-col>
</v-row>

Where clearable is defined as:

const clearable = ref(true)

Upvotes: 0

Related Questions