Estoy trabajando en un pequeño proyecto donde implementé un sistema de control de versiones simple.
Tengo una matriz de objetos (las diferentes versiones) que envuelvo en un Proxy que me dará la información de la versión deseada.
Uso este objeto en un componente de VueJs y me gustaría que la vista sea reactiva cuando cambio la propiedad de version del Proxy.
¿Cómo podría manejar eso?
Hasta ahora, para hacerlo, me olvidé de la idea del proxy y solo usé una propiedad calculada. Pero me gustaría mantener mi Proxy por razones estéticas.
Aquí hay una versión simplificada de lo que me gustaría.
function versioning (versionArray) { return new Proxy(versionArray, { version: 0, latest: versionArray.length - 1, get: function (target, prop) { if (["version", "latest"].includes(prop)) { return this[prop]; } else { return target[this.version][prop]; } }, set: function (target, prop, val) { if (prop === "version") { return this.version = val; } else { return false; } } }) } let myData = versioning([ { title: "My title", description: "My first desption" }, { title: "THE title", description: "My first description" }, { title: "THE title", description: "It's a nice description" } ]); myData.version = myData.latest; Vue.createApp({ data() { return { myData, } }, methods: { version(val) { this.myData.version = Math.min(Math.max(this.myData.version+val, 0), this.myData.latest); } } }).mount('#app'); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.31/vue.global.prod.min.js"></script> <div id="app"> <button @click="version(1)"> << </button> <div>{{myData.title}}</div> <div>{{myData.description}}</div> <button @click="version(-1)"> >> </button> </div>