【发布时间】：2020-10-08 21:57:50
【问题描述】：
我的“Estado”v-autocomplete 将文本 [object Object] 显示为初始值（占位符）。
但加载后（大约需要 4 秒），一切正常，占位符消失并显示状态。
我在前端使用 Vuetify，这是我的代码 sn-p：
<template>
<v-card
class="ma-3"
>
<div class="content">
<template>
<v-card
:class="{ 'card-success': cadastro, 'card-warn': !cadastro}"
style="min-height: 60vh"
>
<h4
v-if="!cadastro"
slot="header"
class="card-title text-center"
>
Edição de Agroindústria
</h4>
<h4
v-else
slot="header"
class="card-title text-center"
>
Cadastro de Agroindústria
</h4>
<div class="clearfix" />
<div
v-if="loading"
style="height: 60vh"
>
<v-row
class="fill-height ma-2 flex-column"
align="center"
justify="center"
>
<v-progress-circular
:size="70"
color="primary"
indeterminate
/>
</v-row>
</div>
<div v-if="!loading">
<v-form
id="form"
ref="form"
v-model="valid"
class="pa-3"
lazy-validation
@submit.prevent="updateProfile"
>
<v-card>
<v-list-item-content>
<v-card-title
class="headline mx-auto"
>
Dados Pessoais
</v-card-title>
<v-row
v-if="!loading"
class="pa-3"
>
<!-- <v-col
cols="12"
>
<v-text-field
v-model="form.Nome"
label="Nome *"
:rules="requiredRules"
/>
</v-col> -->
<v-col
cols="6"
>
<v-text-field
v-model="form.nomeFantasia"
label="Nome Fantasia *"
:rules="requiredRules"
/>
</v-col>
<v-col
cols="6"
>
<v-text-field
v-model="form.razaoSocial"
label="Razão Social *"
:rules="requiredRules"
/>
</v-col>
<v-col
cols="6"
>
<v-text-field
v-model="form.porte"
label="Porte *"
:rules="requiredRules"
/>
</v-col>
<v-col
cols="6"
>
<v-text-field
v-model="form.cnpj"
v-mask="maskCpf"
label="CNPJ *"
:rules="requiredRules"
return-masked-value
/>
</v-col>
<v-col
cols="6"
>
<v-autocomplete
v-model="form.estado"
label="Estado *"
:items="estado"
:rules="requiredRules" //HERE'S WHERE THE ISSUE COMPONENT
item-text="Nome"
item-value="CodEstado"
@change="changeCidade"
/>
</v-col>
<v-col
cols="6"
>
<v-autocomplete
v-model="form.cidade"
label="Cidade *"
:loading="loadingCidades"
:items="cidade"
:rules="requiredRules"
item-text="Nome"
item-value="CodCidade"
:disabled="disableCidade"
/>
</v-col>
<v-col
cols="4"
>
<v-text-field
v-model="form.logradouro"
label="Logradouro"
/>
</v-col>
<v-col
cols="2"
>
<v-text-field
v-model="form.numero"
label="Numero"
/>
</v-col>
<v-col
cols="6"
>
<v-text-field
v-model="form.bairro"
label="Bairro *"
:rules="requiredRules"
/>
</v-col>
<v-col
cols="6"
>
<v-text-field
v-model="form.complemento"
label="Complemento"
/>
</v-col>
<v-col
cols="6"
>
<v-text-field
v-model="form.cep"
v-mask="maskCep"
:rules="requiredRules"
label="CEP *"
/>
</v-col>
<v-col
cols="6"
>
<v-text-field
v-model="form.email"
:rules="emailRules"
label="E-mail"
type="email"
return-masked-value
/>
</v-col>
<v-col
cols="3"
>
<v-text-field
v-model="form.telRes"
v-mask="maskTelRes"
:rules="telRules"
label="Telefone Fixo"
type="tel"
return-masked-value
/>
</v-col>
<v-col
cols="3"
>
<v-text-field
v-model="form.telCel"
v-mask="maskTelCel"
:rules="telRules"
label="Telefone Celular"
type="tel"
return-masked-value
/>
</v-col>
</v-row>
</v-list-item-content>
</v-card>
<!-- <v-card>
<v-list-item-content>
<v-card-title
class="headline mx-auto"
>
Dados Técnicos
</v-card-title>
<v-row
v-if="!loading"
class="pa-3"
>
<v-col
cols="6"
>
<v-text-field
v-model="form.captacao"
label="Captação"
/>
</v-col>
<v-col
cols="6"
>
<v-text-field
v-model="form.fornecedores"
label="Fornecedores"
/>
</v-col>
</v-row>
</v-list-item-content>
</v-card> -->
<v-btn
type="submit"
:disabled="salvando"
:loading="salvando"
:color="!$route.params.CodPessoa ? 'success' : 'warning'"
form="form"
>
{{ btnNome }}
</v-btn>
<router-link
:disabled="salvando"
to="listar-agroindustrias"
>
<v-btn
:disabled="salvando"
color="error"
class="ml-3"
>
Cancelar
</v-btn>
</router-link>
</v-form>
</div>
</v-card>
</template>
</div>
</v-card>
</template>
<script>
export default {
data () {
return {
salvando: false,
loading: true,
loadingCidades: false,
maskCpf: '##.###.###/####-##',
maskTelRes: '(##) ####-####',
maskTelCel: '(##) # ####-####',
maskCep: '#####-###',
emailRules: [v => /.+@.+/.test(v) || 'E-mail invalido'],
telRules: [v => (!v || v.length === 0 || v.length >= 10) || '* Número inválido'],
requiredRules: [v => !!v || '* Obrigatório'],
valid: null,
disableCidade: true,
primeiroAcesso: '',
btnNome: !this.$route.params.CodPessoa ? 'Salvar' : 'Salvar Alterações',
form: {
codPessoa: null, // codigo da agroindústria
nomeFantasia: '',
razaoSocial: '',
porte: '',
cnpj: '',
estado: 0,
cidade: 0,
logradouro: '',
numero: '',
bairro: '',
complemento: '',
cep: '',
telRes: '',
telCel: '',
email: '',
// captacao: '',
// fornecedores: '',
},
estado: [{ nome: 'Carregando', CodEstado: 0 }],
cidade: [],
cadastro: this.$route.params.CodPessoa === 0 ? 1 : 0,
}
},
created () {
// console.log(this.$route.params.CodAgroindustria)
if (this.$route.params.CodPessoa === undefined) {
// console.log('Indefinido')
this.$router.push({ name: 'Listar Agroindustrias' })
} else if (this.$route.params.CodPessoa !== 0) {
// console.log('edicao')
this.form.codPessoa = this.$route.params.CodPessoa
this.formDados()
} else {
// console.log('cadastro')
this.loadNewForm()
}
},
methods: {
loadNewForm () {
if (this.$route.params.NomeFantasia !== 'undefined') {
this.form.nomeFantasia = this.$route.params.NomeFantasia
}
if (this.$route.params.Cnpj !== 'undefined') {
this.form.cnpj = this.$route.params.Cnpj
}
if (this.$route.params.primeiroAcesso === 1) {
this.primeiroAcesso = 1
} else {
this.primeiroAcesso = 0
}
this.loading = false
this.loadEstado()
},
updateProfile () {
this.$refs.form.validate()
if (!this.valid) {
this.Swal.fire('Atenção', 'Preencha os itens obrigatórios sinalizados com ("*").', 'warning')
} else {
this.salvando = true
if (this.form.codPessoa) { // ATUALIZAR DADOS AGROINDUSTRIA
this.alert = false
this.api.put('/agroindustria/attAgroindustria', this.form)
.then(response => {
this.salvando = false
if (response.data.error) {
let erros = ''
response.data.message.forEach((el) => {
erros += el + '<br/>'
})
this.Swal.fire({
title: 'Corrija os erros abaixo:',
icon: 'warning',
html: erros,
})
} else {
this.Swal.fire('Sucesso', 'Cadastro Realizado', 'success')
this.$router.push({ name: 'Listar Agroindustrias' })
}
}).catch(error => {
this.salvando = false
this.Swal.fire({
title: 'Atenção:',
icon: 'warning',
html: error,
})
})
} else { // CRIAR NOVA AGROINDUSTRIA
console.log(this.form)
this.api.post('/agroindustria/createAgroindustria', this.form, this.primeiroAcesso)
.then(response => {
this.salvando = false
if (response.data.error) {
let erros = ''
response.data.message.forEach((el) => {
erros += el + '<br/>'
})
this.Swal.fire({
title: 'Corrija os erros abaixo:',
icon: 'warning',
html: erros,
})
} else {
this.Swal.fire('Sucesso', 'Cadastro Realizado.', 'success')
this.$router.push({ name: 'Listar Agroindustrias' })
}
}).catch(error => {
console.log(error)
this.salvando = false
this.Swal.fire({
title: 'Atenção:',
icon: 'warning',
html: error + '<br/>Algo de errado não está certo.',
})
})
}
}
},
formDados () {
this.api('/agroindustria/', {
params: {
CodPessoa: this.form.codPessoa,
},
})
.then(response => {
this.form.nomeFantasia = response.data[0].NomeFantasia
this.form.razaoSocial = response.data[0].RazaoSocial
this.form.porte = response.data[0].Porte
this.form.cnpj = response.data[0].Cnpj
this.form.estado = response.data[0].estado
this.form.cidade = response.data[0].cidade
this.form.logradouro = response.data[0].Logradouro
this.form.numero = response.data[0].Numero
this.form.bairro = response.data[0].Bairro
this.form.cep = response.data[0].Cep
this.form.complemento = response.data[0].Complemento
this.form.telRes = response.data[0].TelRes
this.form.telCel = response.data[0].TelCel
this.form.email = response.data[0].email
this.loadEstadoEdit(response.data[0].estado, response.data[0].cidade)
}).catch(error => {
this.message = error
// console.log(this.message)
})
},
formTelefone (TelRes) {
for (let i = 0; i < TelRes.length; i++) {
switch (TelRes[i].CodTipoTelefone) {
case '1':
this.form.telCel = TelRes[i].DDD ? '' + TelRes[i].DDD + TelRes[i].Numero : null
break
case '2':
this.form.telCome = TelRes[i].DDD ? '' + TelRes[i].DDD + TelRes[i].Numero : null
break
default:
this.form.telReca = TelRes[i].DDD ? '' + TelRes[i].DDD + TelRes[i].Numero : null
break
}
}
},
loadEstado () {
this.api('/estado').then(response => {
// console.log(this.response.data.estado) //HERE'S WHERE THE ISSUE OCCURS
this.estado = response.data.estado
console.log(this.estado)
}).catch(error => {
this.message = error
// console.log(this.message)
})
},
loadCidade (CodEstado) {
this.loadingCidades = true
this.api('/cidade', {
params: {
CodEstado: CodEstado,
},
})
.then(response => {
this.cidade = response.data.cidade
this.disableCidade = false
this.loadingCidades = false
// console.log(this.cidade)
}).catch(error => {
this.message = error
// console.log(this.message)
})
},
loadEstadoEdit (CodEstado, CodCidade) {
this.api('/estado').then(response => {
this.estado = response.data.estado
this.form.estado = CodEstado
// this.form.estado = this.form.estado[CodEstado - 1]
this.loadCidadeEdit(CodCidade)
// console.log(response)
}).catch(error => {
this.message = error
// console.log(this.message)
})
},
loadCidadeEdit (CodCidade) {
this.api('/cidade', {
params: {
CodEstado: this.form.estado,
},
}).then(response => {
this.cidade = response.data.cidade
this.form.cidade = CodCidade
this.disableCidade = false
// this.form.cidade = this.cidade[CodCidade - 1]
}).catch(error => {
this.message = error
// console.log(this.message)
})
},
changeCidade () {
this.loadCidade(this.form.estado)
// console.log(this.company.estado)
},
},
}
</script>
【问题讨论】：
标签： javascript vue.js vuetify.js