How to change position of a table in vuejs

Asked

Viewed 185 times

0

It is currently found like this:

inserir a descrição da imagem aqui

It was supposed to be like this;

inserir a descrição da imagem aqui

I’m having trouble, can someone help me, please?

This is the source code.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Desenvolvido por Wladimir Alves Bandeira</title>





<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" >
</head>
<div id="app">



<div class="table">
    <div >

        <table class="table">
            <thead>
              <tr>
                <th scope="col">Tipo de moeda</th>
                <th scope="col">Valor</th>
                <th scope="col">Referencia</th>
              </tr>
            </thead>
            <tbody>
              <tr v-if="bancodedados" v-for="(val, key) in bancodedados.valores" :key="key">
                <td> {{  val.nome }}  </td> 
                <td> {{  val.valor }}</td>
                <td>{{  val.fonte }}</td>
              </tr>
            </tbody>
          </table>


    </div>
</div>

</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.3.6/vue-resource.js"></script>


<script >

var app = new Vue({
  el: '#app',
  data: {
    bancodedados: [],
  },
  methods: {

  },
  created: function() {
    var self = this;
    self.$http.get('http://api.promasters.net.br/cotacao/v1/valores').then(function(response) {
      self.bancodedados = response.body;
    });
  },

});



</script>


<style>



</style>
</body>
</html>
html5

  • It’s the other way around because you’re inheriting all the classes in the Bootstrap 4 table. To solve this you’ll have to encapsulate your table inside a container and override the classes the way you want. If you want I can make a simple model for you.

  • show me a model please.

1 answer

1


In case, I will carry out the response upon what you said:

It was supposed to be like this;

I am saying this because the way information is inserted into the table as it stands for the way you want it, is distinct. If you want to bring only the coins in the header, just do the v-for in the th and another in td.

Then, you must change the classes, follow below example that was similar to the expected result in my view:

new Vue({
  el: '#app',  
  data() {
    return {
      bancodedados: [
        {
          nome: 'Dóla',
          valor: 32.889,
          fonte: 'azul'
        },
        {
          nome: 'Euro',
          valor: 40.605,
          fonte: 'azul'
        },
        {
          nome: 'Peso Argentino',
          valor: 0.1629,
          fonte: 'azul'
        },
        {
          nome: 'Libra Esterlina',
          valor: 4.615,
          fonte: 'azul'
        },
        {
          nome: 'Bitcoin',
          valor: 28050,
          fonte: 'azul'
        }
      ]            
    }
  }
});
.table th, .table td {
  border: 3px solid black !important;
  text-align: center;
}

.table th {
  font-weight: normal;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div id="app">
    <table class="table table-sm">
      <thead>
        <tr>
          <th scope="col" v-if="bancodedados" v-for="(val, key) in bancodedados" :key="key">{{ val.nome }}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td v-if="bancodedados" v-for="(val, key) in bancodedados" :key="key"> 
            {{  val.valor }}
          </td>
        </tr>
      </tbody>
    </table>
</div>

Browser other questions tagged html5

You are not signed in. Login or sign up in order to post.