我正在使用 vuetify，我想使用“is”指令来加载动态组件。
当我用动态组件加载验证对话框时，问题就发生了。
如果我将“objectcomp”设置如下，我不会收到警告：
this.objectcomp = { id: 1, nome: '' } // => problem is here, if don't set it I get an warn
但是当动态组件更改为其他时，我需要将此对象重置为 null 或 {}。
我的问题是我在使用 vuetify 自动完成时遇到错误：
[Vue warn]: Invalid prop: type check failed for prop "searchInput". Expected String, got Object
found in
---> <VAutocomplete>
<ProfissionalApagar> at components/ProfissionalApagar.vue
<VCard>
<VThemeProvider>
<VDialog>
<ContasAReceber>
<Nuxt>
<VMain>
<VApp>
<App> at layouts/default.vue
<Root>
// parent component
<template>
<v-container class="mt-5" fluid tag="section">
<v-dialog v-model="diagContasAReceber" width="70vw" persistent>
<v-card>
<v-card-text class="mt-5">
<v-row>
<v-col cols="12" md="6">
<component
:is="componentId"
:object-comp.sync="objectcomp"
></component>
</v-col>
</v-row>
</v-card>
</v-dialog>
<v-select
v-model="editedContasAreceber.tipo_destino_rec"
:items="tipos_destino_pag"
item-text="nome"
item-value="id"
label="Tipo"
menu-props="auto"
persistent-hint
@change="onChangeTipoDestinoRec"
></v-select>
</v-container>
</template>
<script>
export default {
name: 'ContasAReceber',
data: () => ({
options: {},
totalAreceber: 0,
editedItensContasAreceber: {
id: -1,
tipo_destino_rec:1,
},
tipos_destino_pag: [
{ id: 1, nome: 'Profissional' },
{ id: 2, nome: 'Paciente' },
{ id: 3, nome: 'Profissional Externo' },
{ id: 4, nome: 'Convênio' },
{ id: 5, nome: 'Fornecedor' },
],
}),
computed: {
componentId() {
switch (this.editedContasAreceber.tipo_destino_rec) {
case 1: {
return 'ProfissionalApagar'
}
case 2: {
return 'other comp'
}
default:
return ''
}
},
},
methods: {
onChangeTipoDestinoRec() {
this.objectcomp = {}
},
adicionarConta() {
this.objectcomp = { id: 1, nome: '' } // => problem is here, if don't set it I get an warn
this.editedContasAreceber = Object.assign({}, this.defaultContasAreceber)
this.diagContasAReceber = true
},
},
}
</script>
// ProfissionalApagar component
<template>
<div>
<v-autocomplete
v-model="localPropComp"
:loading="loading"
:items="items"
:search-input.sync="searchItems"
item-text="nome"
item-value="id"
flat
clearable
hide-no-data
label="Profissional"
return-object
required
></v-autocomplete>
</div>
</template>
<script>
export default {
name: 'ProfissionalApagar',
props: {
objectComp: { type: Object, default: () => {} },
},
data: () => ({
loading: false,
items: [],
searchItems: null,
}),
computed: {
localPropComp: {
get() {
return { ...this.objectComp }
},
set(value) {
this.$emit('update:objectComp', value)
},
},
},
watch: {
searchItems(val) {
val && val !== this.localPropComp?.nome && this.queryitems(val)
},
},
mounted() {
this.items = [this.localPropComp]
},
methods: {
async queryitems(v) {
this.items = async get data
},
},
}
</script>
<style></style>