I can not show data with the vue js

Question

I can not show data with the vue js

Navigation

#1 by (0 votes)

1

I can not show data with vue js, in my html I have:

<div class="panel">
     <div class="panel-body">
         <div class="col-md-3"><img src="../images/aeracao/produto.png" alt=""></div>
         <div class="col-md-9"><b>{{ response.views[1].produto }}</b><br>
          <span class="st-label-info">Produto</span></div>
     </div>
</div>

And the vue code:

var vm = new Vue({
        el: '#aeracaoApp',
        data: {
            response: [],
            currentGrupoArco: 1,
            mensagem: '',
            showModal: false,
            historico: []
        },
        methods : {
            update: function () {
                this.$http.get(URL_ALL).then((response) => {
                    this.response = response.data;
                }, (response) => {
                     //console.log('erro')
                });
            },

...

I tried to show only the variable {{response}} and then it shows:

{"views":{"1":{"aeracao_id":129,"motor_id":1,"motor_ligado":true,"seq_motor_cont":1,"produto":"Teste"}}}

vue.js

asked by anonymous 27.09.2017 / 20:44

1 answer

2-way printing Jaspersoft Studio Display a blob image in JS

score 0 · Answer 1

vue has a native method called update , so you should not use a method called update .

Before this ajax you have to have a secure rendering method. That is when response is still empty. In data I suggest you have {} because it is what you will receive, not [] .

Then you can do this:

const futureResponse = {
  views: {
    '1': {
      aeracao_id: 129,
      motor_id: 1,
      motor_ligado: true,
      seq_motor_cont: 1,
      produto: 'Teste'
    }
  }
};

new Vue({
  el: '#aeracaoApp',
  data() {
    return {
      response: {},
      currentGrupoArco: 1,
      mensagem: '',
      showModal: false,
      historico: []
    }
  },
  methods: {
    getData: function() {
      setTimeout(() => {
        this.response = futureResponse;
      }, 1500);
    },
    getProp(key) {
      return this.response.views && this.response.views[1] && this.response.views[1][key];
    }
  },
  created() {
    this.getData();
  }
});

<script src="https://unpkg.com/vue/dist/vue.min.js"></script><divid="aeracaoApp">
  <div class="panel">
    <div class="panel-body">
      <div class="col-md-3"><img src="../images/aeracao/produto.png" alt=""></div>
      <div class="col-md-9"><b>{{ getProp('produto') }}</b><br>
        <span class="st-label-info">Produto</span></div>
    </div>
  </div>
</div>