Untitled

<!doctype html>
<html lang="pt-br">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B"
    crossorigin="anonymous">


  <title>Condominios</title>
</head>

<body>
  <nav class="  navbar navbar-expand-sm navbar-dark bg-dark">
    <div class="container">
      <a href="#" class="navbar-brand">AudiCond</a>
      <button type="button" class="navbar-toggler">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class=" row justify-content-end collapse navbar-collapse " id="">
        <ul class=" navbar-nav mr-left">
          <ul class=" navbar-nav mr-auto">
            <li class="nav-item ">
              <a href="home.html" class="nav-link">Home</a>
            </li>
            <li class=" nav-item active">
              <a href="Condominios.html" class="nav-link">Condominios</a>
            </li>
            <li class=" nav-item ">
              <a href="CtaPagar.html" class="nav-link">Contas Pagar</a>
            </li>
          </ul>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container" id="cadastro">
    <div class="row">
    </div>
    <div class="row">

      <div class="container">
        <div class="row justify-content-left justify-content-md-start">
          <!--tela super peq 12, small(peq) 8, media 4-->
          <div class="col-12 col-sm-8 col-md-4">
            <form action="">
            </form>
          </div>
          <div class=" justify-content-left col-md-6">
            <form action="">

              <div class="form-row">
                <label for="">Nome</label>
                <input type="text" class="form-control" id="nome" v-model="nome" aria-describedby="nome" placeholder="">
              </div>


              <div class="form-group">
                <label for="">CNPJ</label>
                <input type="text" class="form-control" id="cnpj" v-model="cnpj" aria-describedby="cnpj" placeholder="">
              </div>

              <div class="form-group">
                <label for="">Contato</label>
                <input type="text" class="form-control" id="contato" v-model="contato" aria-describedby="contato" placeholder="">
              </div>


              <button type="button" class=" btn btn-primary  btn-block" @Click.prevent="addItem">Gravar</button>
            </form>
          </div>
        </div>
      </div>
    </div>

  <table class="table">
    <thead>
      <tr>
        <th scope="col">Nome</th>
        <th scope="col">CNPJ</th>
        <th scope="col">Contato</th>
        <th scope="col">Ações</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="p,index in cadastro">
        <td>{{ p.nome }}</td>
        <td>{{ p.cnpj }}</td>
        <td>{{ p.contato }}</td>
        <td>

          <td>
            <button class="btn btn-success" @click.prevent="editItem(index)">Editar</button>
          </td>
      </tr>
    </tbody>
  </table>
</div>
  <footer>
    <div class="fixed-bottom bg-dark text-white">
      <p class="text-center">Curso de TI - Fundatec @ 2019</p>
    </div>
  </footer>


  <!-- Foi colocado no final para a página carregar mais rápido -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
    crossorigin="anonymous"></script>
  <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="http://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="c.json"></script>

  <script>
    const app = new Vue({

      el: '#cadastro',
      data: {
        cadastro: [], //Array
        //dadosiniciais: json,
        condominio: {},  //Objetos
        nome: '',
        cnpj: '',
        contato: ''

      },
      methods: {

        addItem() {
          this.condominio = {
            "nome": this.nome,
            "cnpj": this.cnpj,
            "contato": this.contato

          };
          this.cadastro.push(this.condominio);
          this.condominio = {};
          this.nome = '';
          this.cnpj = '';
          this.contato = '';

        },


        editItem(index) {
          this.nome = this.cadastro[index].nome;
          this.cnpj = this.cadastro[index].cnpj;
          this.contato = this.cadastro[index].contato;
          this.cadastro.splice(index, 1);

        },

      getCondominio() {
          // Este código serve APENAS para ler o arquivo JSON
          let tam = dad.length;
          console.log(tam);
          for(let i=0; i<tam ; i++){
              console.log(dad[i]);
              this.cadastro.push(dad[i]);

            }
        // Este códig serve para acessar a sua API -> USE ESTE AQUI NO TCC
          //let url = "http://localhost.......";
          //axios.get(url).then((response) => {
          //  const dados = response.data;
          //  console.log(dados);
          //}).catch((error) => {
          //  console.log('ERR: ' + error);
          //}); // axios

        }
    },
      mounted() {
        this.getCondominio();
      }
    });


  </script>
</body>

</html>