How to change position of a table in the vuejs

Question

How to change position of a table in the vuejs

Navigation

#1 by (1 votes)

0

Currently it looks like this:

Infactitwastostaylikethis;

I'mhavingtrouble,cananyonehelpme,please?

Thisisthesourcecode.

<!DOCTYPEhtml><htmlxmlns="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><scriptsrc="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

asked by anonymous 19.03.2018 / 19:41

1 answer

how to block an action in a form Create expressions in strings [closed]

score 1 · Accepted Answer

In this case, I'll make the answer by what you said:

In fact it was to stay like this;

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

Then you should change the classes, follow the example below 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><linkrel="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>