Error showing data from an array of VueJS objects

Question

Error showing data from an array of VueJS objects

Navigation

#1 by (0 votes)

0

I have an arrangement of objects called materials and when I try to put it in a VueJS component and then show it I get an error:

<script>
var app = new Vue({
el: '#app',
data: {
  materias: []
},
created(){
var _this = this;
var url = "src/xmls/test.xlsx";
var oReq = new XMLHttpRequest();
oReq.open("GET", url, true);
oReq.responseType = "arraybuffer";

oReq.onload = function(e) {
  var arraybuffer = oReq.response;
  /* convirtiendo data a binary string */
  var data = new Uint8Array(arraybuffer);
  var arr = new Array();
  for (var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
  var bstr = arr.join("");
  /* Cargando XLSX */
  var workbook = XLSX.read(bstr, { type: "binary" });
  /* DO SOMETHING WITH workbook HERE */
  var first_sheet_name = workbook.SheetNames[0];
  /* Get worksheet */
  var worksheet = workbook.Sheets[first_sheet_name];
  materias = XLSX.utils.sheet_to_json(worksheet, { raw: true });
  _this = materias;
};
oReq.send();
}
})
</script>

I show it in this way in my template section:

<template>
<div id="app">
  <div class="col-xs-12">
    <h1 class="text-center">Materias</h1>
  </div>
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <ul class="list-group">
        <li class="list-group-item text-center" v-for="(materia,$index) in materias">
          <span>{{ $index }} - Nombre: {{ materia.Curso }}</span>
        </li>
      </ul>
    </div>
  </div>

With the corrections that were indicated below, I solved a couple of errors but the background one, which is that the component receives the fix, persists:

Looking at the console effectively the material property is not defined in the component, so I do not know why my arrangement does not enter the component:

javascript json vue.js

asked by DVertel 10.12.2017 в 04:39

source

1 answer

Delete a column if you do not add another column in php with prepared statements How can I insert data from checkboxes created with a while into a database through an ajax function?

score 0 · Answer 1

Good friend I hope you help the example the idea is to make the request Ajax within the function created() of vue that changes the value of matters in the data greetings try to do it the closest thing to your problem

Another important thing is to remove the duplicate of id id="app" that you have in html that makes conflict between the instance of vue js

var app = new Vue({
  el: '#app',
  data: {
    
    materias: []
      
   },
   created(){
   var _this = this

   $.ajax({
  url: 'https://jsonplaceholder.typicode.com/users',
  method: 'GET'
  }).then(function(data) {
  // console.log(data)
  
    _this.materias = data
   })
   }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.min.js"></script>

<div id="app">

<div class="col-xs-12">
    <h1 class="text-center">Materias</h1>
</div>
<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <ul class="list-group">
            <li class="list-group-item text-center" v-for="(materia,$index) in materias">
                <span>{{$index}} --   <b>Nombre:</b> {{materia.username}} - <b>Email:</b> {{materia.email}}</span>
            </li>
        </ul>

</div>