Tengo un arreglo de objetos llamado materias y al intentar meterlo en un componente VueJS para luego mostrarlo me presenta un 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>
Lo muestro de esta forma en mi sección template:
<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>
Con las correcciones que se me indicaron abajo resolví un par de errores pero el de fondo que es que el componente vue reciba el arreglo persiste:
Mirando en la consola efectivamente la propiedad materias no esta definida en el componente, entonces no se porque mi arreglo no entra al componente:
data
no tienes la clavecurso
solo tienes name y captched te falta y por eso te da el segundo error(materias,$index)
pon(materia,$index)
puede que vue se este confundiendo entre el arreglo y cada uno de los items dentro de elcreated(){tu funcion...}