I've really tried hard to get an answer in the general vue community. It seems theres issues running @change within the FFDB2 implementation of vue.
I want to input a json containing n number of tasks.
I want to change a tasks status.
I want to out put that status with the tasks id.
The input json:
{
"tasks": [
{
"id": 1,
"name": "Task 1",
"text": "Details about task 1",
"status": "Not Started"
},
{
"id": 2,
"name": "Task 2",
"text": "Details about task 2.",
"status": "Testing"
},
{
"id": 3,
"name": "Task 3",
"text": "Details about task 3.",
"status": "Complete"
}
]
}
The HTML. I am aware that the v-model applies across everything and not per iteration. I've tried task.status but that doesn't work.
<template>
<v-app>
<v-container>
<div v-for="task in msg.payload" :key="task.id">
<v-select
:label="`${task.name}`"
:items="['Not Started', 'Started', 'In Progress', 'Stuck', 'Testing', 'Complete']"
v-model="taskStatus"
></v-select>
</div>
</v-container>
</v-app>
</template>
The very crappy script that I'm trying to learn from..
<script>
export default {
data() {
return {
taskStatus: [],
};
},
watch: {
taskStatus(newVal, oldVal) {
if (newVal !== oldVal) {
this.send({ status: newVal });
}
},
},
}
</script>
This will output a status object but it changes all of the tasks v-select (of course being a simple v-model) and I don't know how to call the task id - which I assume is in the parent..
