programadorabordo · July 9, 2020 14:18
diff --git a/locadora-vue-raiz.html b/locadora-vue-raiz.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Locadora Vue Raiz | JS Raiz | Programador a Bordo</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

 </head>
 <body>
  <div id="app" class="container-fluid"></div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const filmes = [
      {
        id: '001',
        titulo: 'Filme XPTO',
        imagem: 'http://lorempixel.com/300/150',
        categorias: ['001', '003'],
      },
      {
        id: '002',
        titulo: 'Filme XYZ',
        imagem: 'http://lorempixel.com/300/150?2',
        categorias: ['001', '003', '004'],
      },
      {
        id: '003',
        titulo: 'Filme Raiz',
        imagem: 'http://lorempixel.com/300/150?3',
        categorias: ['003', '004']
      },
      {
        id: '004',
          titulo: 'Filme A Bordo',
          imagem: 'http://lorempixel.com/300/150?4',
          categorias: ['002', '003', '004']
      },
      {
        titulo: 'Filme TOP',
        imagem: 'http://lorempixel.com/300/150?5',
        categorias: ['001', '002', '003', '004']
      }
    ];

    const categorias = [
      { id: '001', titulo: 'Drama' },
      { id: '002', titulo: 'Suspense' },
      { id: '003', titulo: 'Nacionais' },
      { id: '004', titulo: 'Documentário' },
    ];
    

    const CardComponent = {
      props: ['imagem', 'titulo', 'categorias'],
      template: `
        <div class="card">
          <img class="card-img-top" :src="imagem" alt="">
          <div class="card-body">
            <h3 class="card-title">{{titulo}}</h3>
            <p class="card-text">
              <a v-for="categoria in categorias" href="#" class="badge badge-secondary">{{ categoria }}</a>
            </p>
          </div>
        </div>
      `
    }

    const FormComponent = {
      props: ['categorias'],
      template: `
        <form id="formulario_filme" v-on:submit.prevent="adicionaFilme">
          <div class="form-group">
            <label for="titulo">Título</label>
            <input type="text" v-model="titulo" name="titulo" class="form-control" id="titulo" />
          </div>

          <div class="form-group">
            <label for="imagem">Foto</label>
            <input type="text" v-model="imagem" name="imagem" class="form-control" id="imagem" />
          </div>

          <div class="form-group">
            <label for="categoria">Categoria</label>
            <select v-model="categoriasField" name="categorias" class="form-control" multiple>
              <option v-for="categoria in categorias" :value="categoria.id">{{categoria.titulo}}</option>
            </select>
          </div>
          
          <button type="submit" class="btn btn-primary">Cadastrar</button>
        </form>
      `,
      data() {
        return {
          titulo: '',
          imagem: '',
          categoriasField: []
        }
      },
      methods: {
        adicionaFilme() {
          this.$emit('add-filme', {
            titulo: this.titulo,
            imagem: this.imagem,
            categorias: this.categoriasField
          })
        }
      }
    };

    new Vue({
      el: '#app',
      components: {
        FormComponent,
        CardComponent
      },
      data() {
        return {
          filmes,
          categorias
        }
      },
      template: `
        <div class="row">
          <div class="col-sm-12 col-md-3">
            <h2>Cadastro de filme</h2>
            <FormComponent v-on:add-filme="adicionaFilme" :categorias="categorias" />
          </div>
          <div class="col-sm-12 col-md-9">
            <div id="cards_container" class="card-columns">

              <CardComponent v-for="filme in filmesNormalizados" v-bind:titulo="filme.titulo" v-bind:imagem="filme.imagem" v-bind:categorias="filme.categorias" v-bind:key="filme.id" />
            </div>
          </div>
        </div>
      `,
      methods: {
        adicionaFilme(filme) {
          this.filmes = [
            ...this.filmes,
            filme
          ]
        }
      },
      computed: {
        filmesNormalizados: function() {
          return this.filmes.map(function(filme) {
            return {
              ...filme,
              categorias: filme.categorias.map(function(catId) {
                return categorias.find(function(categoria) {
                  return categoria.id === catId
                })?.titulo
              })
            }
          })
        }
      }
    })
  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Locadora Vue Raiz \| JS Raiz \| Programador a Bordo</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

	</head>
	<body>
	<div id="app" class="container-fluid"></div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
	const filmes = [
	{
	id: '001',
	titulo: 'Filme XPTO',
	imagem: 'http://lorempixel.com/300/150',
	categorias: ['001', '003'],
	},
	{
	id: '002',
	titulo: 'Filme XYZ',
	imagem: 'http://lorempixel.com/300/150?2',
	categorias: ['001', '003', '004'],
	},
	{
	id: '003',
	titulo: 'Filme Raiz',
	imagem: 'http://lorempixel.com/300/150?3',
	categorias: ['003', '004']
	},
	{
	id: '004',
	titulo: 'Filme A Bordo',
	imagem: 'http://lorempixel.com/300/150?4',
	categorias: ['002', '003', '004']
	},
	{
	titulo: 'Filme TOP',
	imagem: 'http://lorempixel.com/300/150?5',
	categorias: ['001', '002', '003', '004']
	}
	];

	const categorias = [
	{ id: '001', titulo: 'Drama' },
	{ id: '002', titulo: 'Suspense' },
	{ id: '003', titulo: 'Nacionais' },
	{ id: '004', titulo: 'Documentário' },
	];


	const CardComponent = {
	props: ['imagem', 'titulo', 'categorias'],
	template: `
	<div class="card">
	<img class="card-img-top" :src="imagem" alt="">
	<div class="card-body">
	<h3 class="card-title">{{titulo}}</h3>
	<p class="card-text">
	<a v-for="categoria in categorias" href="#" class="badge badge-secondary">{{ categoria }}</a>
	</p>
	</div>
	</div>
	`
	}

	const FormComponent = {
	props: ['categorias'],
	template: `
	<form id="formulario_filme" v-on:submit.prevent="adicionaFilme">
	<div class="form-group">
	<label for="titulo">Título</label>
	<input type="text" v-model="titulo" name="titulo" class="form-control" id="titulo" />
	</div>

	<div class="form-group">
	<label for="imagem">Foto</label>
	<input type="text" v-model="imagem" name="imagem" class="form-control" id="imagem" />
	</div>

	<div class="form-group">
	<label for="categoria">Categoria</label>
	<select v-model="categoriasField" name="categorias" class="form-control" multiple>
	<option v-for="categoria in categorias" :value="categoria.id">{{categoria.titulo}}</option>
	</select>
	</div>

	<button type="submit" class="btn btn-primary">Cadastrar</button>
	</form>
	`,
	data() {
	return {
	titulo: '',
	imagem: '',
	categoriasField: []
	}
	},
	methods: {
	adicionaFilme() {
	this.$emit('add-filme', {
	titulo: this.titulo,
	imagem: this.imagem,
	categorias: this.categoriasField
	})
	}
	}
	};

	new Vue({
	el: '#app',
	components: {
	FormComponent,
	CardComponent
	},
	data() {
	return {
	filmes,
	categorias
	}
	},
	template: `
	<div class="row">
	<div class="col-sm-12 col-md-3">
	<h2>Cadastro de filme</h2>
	<FormComponent v-on:add-filme="adicionaFilme" :categorias="categorias" />
	</div>
	<div class="col-sm-12 col-md-9">
	<div id="cards_container" class="card-columns">

	<CardComponent v-for="filme in filmesNormalizados" v-bind:titulo="filme.titulo" v-bind:imagem="filme.imagem" v-bind:categorias="filme.categorias" v-bind:key="filme.id" />
	</div>
	</div>
	</div>
	`,
	methods: {
	adicionaFilme(filme) {
	this.filmes = [
	...this.filmes,
	filme
	]
	}
	},
	computed: {
	filmesNormalizados: function() {
	return this.filmes.map(function(filme) {
	return {
	...filme,
	categorias: filme.categorias.map(function(catId) {
	return categorias.find(function(categoria) {
	return categoria.id === catId
	})?.titulo
	})
	}
	})
	}
	}
	})
	</script>
	</body>
	</html>