Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Porque não usar um método ?

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>
1 resposta

Fala ai Márcio, tudo bem? Vamos lá:

Visto que caso usássemos um método que retornasse um objeto com essas propriedades vazias , já resolveria

Sim, apenas retornar um objeto já seria o suficiente.

Criar um objeto para resolver não seria "matar formiga com bazuca" ?

Não, seria mais algo relacionado a padrões de projeto, em OO essa classe é o modelo, poderíamos dizer que seria um Model Pattern. A ideia é que no modelo tenha as regras de negócio da foto (para esse cenário).

Imagine que você queira pegar a extensão da foto selecionada, em vez de implementar isso em todo lugar, bastaria criar um método dentro do modelo e utilizá-lo onde for necessário, caso o mesmo um dia mude, a mudança seria feita apenas na classe e o resto da aplicação iria continuar funcionando.

Sendo assim, dentro do modelo encapsulamos as regras e funções do domino da foto.

Espero ter ajudado.