Durante a aula, o Professor apresentou a criação de um objeto para resolver a criação do objeto foto só que tenho minhas dúvidas sobre a prática desse tipo de coisa. Criar um objeto para resolver não seria "matar formiga com bazuca" ? Visto que caso usássemos um método que retornasse um objeto com essas propriedades vazias , já resolveria. No caso o código abaixo funciona perfeitamente.
<template>
<div>
<h1 class="centralizado">Cadastro</h1>
<h2 class="centralizado"></h2>
<form @submit.prevent="gravar">
<div class="controle">
<label for="titulo">TÍTULO</label>
<input id="titulo" autocomplete="off" v-model.lazy="foto.titulo">
</div>
<div class="controle">
<label for="url">URL</label>
<input id="url" autocomplete="off" v-model.lazy="foto.url">
<imagem-responsiva v-show="foto.url" :url="foto.url" :titulo="foto.titulo"/>
</div>
<div class="controle">
<label for="descricao">DESCRIÇÃO</label>
<textarea id="descricao" autocomplete="off" v-model="foto.descricao"></textarea>
</div>
<div class="centralizado">
<meu-botao rotulo="GRAVAR" tipo="submit"/>
<router-link to="/"><meu-botao rotulo="VOLTAR" tipo="button"/></router-link>
</div>
</form>
</div>
</template>
<script>
import ImagemResponsiva from '../shared/imagem-responsiva/ImagemResponsiva.vue'
import Botao from '../shared/botao/Botao.vue';
export default {
data(){
return{
foto:this.fotoVazia()
}
},
components: {
'imagem-responsiva': ImagemResponsiva,
'meu-botao': Botao
},
methods:{
gravar(){
this.foto = this.fotoVazia();
},
fotoVazia(){
return{
titulo:'',
url:'',
descricao:''
}
}
},
}
</script>
<style scoped>
.centralizado {
text-align: center;
}
.controle {
font-size: 1.2em;
margin-bottom: 20px;
}
.controle label {
display: block;
font-weight: bold;
}
.controle label + input, .controle textarea {
width: 100%;
font-size: inherit;
border-radius: 5px
}
.centralizado {
text-align: center;
}
</style>