I can’t show data with Vue js

Asked

Viewed 62 times

1

I can’t 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 tbm only the variable {{ Response }} and then show:

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

1 answer

0

The vue has a native method called update, so you shouldn’t use a method called your update.

Before that ajax comes you have to have a method to render safe. That is when the response is still empty. No data suggest you have {} 'cause that’s what you’re gonna get, and not [].

Then you can do it like 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>
<div id="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>

Browser other questions tagged vue.js

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