Actualmente estoy jugando con el proyecto de otra persona en Vue.js. El proyecto es una página web en php que pide al usuario su información. Luego hay una serie de ejercicios construidos con vue.js y al final los resultados se almacenan en un archivo de Excel.
Entendí el diseño del proyecto y cómo funciona, pero tengo un problema al intentar agregar una nueva función. Quiero poder guardar el progreso actual en los ejercicios para que alguien pueda continuar desde el ejercicio que fue la última vez que abrió la página. Cada ejercicio tiene este código al final:
handleSubmit(e) { e.preventDefault() for (let i = 0; i < e.target.length - 1; i++) { if (e.target[i].tagName === 'INPUT') { const result = { id: e.target[i].id, value: e.target[i].value, exNumber: this.exNumber, } this.answers.push(result) } } this.addNewAnswer(this.answers)
entonces todo se agrega en un objeto.
En el último ejercicio hay este código:
const dataToPost = { name: this.name, age: this.age, birthday: this.birthday, city: this.city, gender: this.gender, loginDate: this.loginDate, exTimes: this.exTimes, totalTime: finalTime.toString(), class: classNumber, answers: this.finalScores, } this.axios .post( 'http://***********/setAnswers.php', JSON.stringify(dataToPost) ) .then((response) => { alert(response.data) router.push('/main') })
y envía todas las respuestas de todos los ejercicios a otro archivo php que crea el archivo de Excel.
¿Cuál sería la mejor manera de manejar el ahorro de estado entre cada ejercicio?
Puede usar localstorage para almacenar el formulario.
https://fr.vuejs.org/v2/cookbook/client-side-storage.html
Y hay un ejemplo aquí:
¿Cómo actualizar el objeto en el almacenamiento local en vue js?
Debe clasificar y analizar el objeto para almacenarlo y recuperarlo respectivamente.