Soy nuevo en vue y trato de trabajar con django. Tengo un campo llamado estado que usa un campo booleano y establezco el valor predeterminado = Falso. Estoy tratando de actualizar los datos en el backend haciendo clic. Cuando hago clic en el div, los datos se emitirán a los padres y actualizarán el estado a !status.
Niño:
<div @click="$emit('update-status', this.task)">{{ task.status}} </div>Padre:
<Task v-for="task in tasks" :key="task.slug" :task="task" :slug="task.slug" @update-status="updateStatus"/> async updateStatus(task) { let endpoint = `/api/v1/tasks/${task.slug}/`; const response = await axios.put(endpoint, { status: !task.status, }); }Se actualiza una vez y sigue devolviendo el mismo valor True cuando sigo haciendo clic (siempre debería devolver el estado opuesto). Tengo que actualizar manualmente mi navegador, por lo que cuando vuelva a hacer clic en él devolverá False.
Si obtiene su objeto actualizado en respuesta, simplemente puede actualizar sus tareas:
Vue.component('task', { template: ` <div @click="$emit('update-status', task)">{{ task.status }}</div> `, props: { task: Object } }) new Vue({ el: '#demo', data() { return { tasks: [{slug: 'a', status: false}, {slug: 'b', status: false}] } }, methods: { async updateStatus(task) { //let endpoint = `/api/v1/tasks/${task.slug}/`; /*const response = await axios.put(endpoint, { status: !task.status, });*/ const response = {slug: task.slug, status: !task.status} this.tasks = this.tasks.map(t => (t.slug === response.slug) ? response : t) } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <Task v-for="task in tasks" :key="task.slug" :task="task" :slug="task.slug" @update-status="updateStatus"/> </div>Gracias a la respuesta de @Nikola Pavicevic
Modifiqué los datos para enviarlos también en el backend.
async updateStatus(task) { let endpoint = `/api/v1/tasks/${task.slug}/`; const data = { slug: task.slug, status: !task.status, }; const response = await axios.put(endpoint, data); this.tasks = this.tasks.map((task) => task.slug === data.slug ? data : task ); },