Tengo un componente Vue.js 2 donde uno de los miembros de datos debe ser una matriz de una clase personalizada (Vector) que se extiende desde Array. Sin embargo, cuando asigno la matriz al miembro de datos, los elementos de la matriz ya no son vectores, sino matrices simples.
Aquí hay un ejemplo: https://codesandbox.io/embed/nervous-tu-7en2q?fontsize=14&hidenavigation=1&theme=dark
Partes principales:
vector.js
export default class Vector extends Array { /** Creat a vector from all arguments. */ constructor(...args) { ... } get x() { return this[0]; } get y() { return this[1]; } }; export const square = [ new Vector(0, 0), new Vector(1, 1), ]Componente:
<template> <div id="app"> {{ title }} ({{ square[0][0] }}, {{ square[0][1] }}) ({{ square[1].x }}, {{ square[1].y }}) </div> </template> <script> import { square } from './vector.js'; export default { name: "HelloWorld", props: { msg: String }, data() { return { square, title: 'hello' } }, mounted() { console.log(this.square) } }; </script>Si observa la salida de la consola, verá que el cuadrado ahora es una matriz de dos matrices en lugar de una matriz de dos vectores:
(2) [Matriz(2), Matriz(2)]
Preguntas:
No estoy exactamente seguro de cuál es el problema, pero intenté reescribir casi lo mismo usando un patrón diferente, ¿podría verificar si esto resuelve su problema? Si no, es de esperar que un enfoque diferente le proporcione más pistas.
Básicamente, por lo que veo, obtendrá una 2 numbers array cada vez que cree un vector , ¿espera que sea de otro tipo?
vector.js
const vector = (x, y) => ({ values: [x, y], setX(newValue) { this.values[0] = newValue return this }, setY(newValue) { this.values[1] = newValue return this }, getX() { return this.values[0] }, getY() { return this.values[1] } }) export default vector export const square = [vector(0, 0).values, vector(1,1).values]; <script> import vector, { square } from "./vector.js"; export default { name: "HelloWorld", props: { msg: String, }, data() { return { square, vector: vector(1, 2).values, title: "Corners", }; }, mounted() { console.log('square', this.square); console.log('vector', this.vector); }, }; </script>