I need assistance with creating a function where changing the input field will also automatically update the textarea's value. I have successfully implemented Vue js for updating the input field based on the textarea, but I am struggling to reverse this process. Any suggestions or solutions for this scenario would be greatly appreciated.
Textarea
<v-row>
<v-col cols="12" sm="6">
<v-textarea
v-model="groupTask"
dense
:hide-details="true"
outlined
label="Group Task"
></v-textarea>
</v-col>
</v-row>
input field
<v-row v-for="(item, index) in tasks">
<v-col cols="12" sm="4">
<v-text-field
dense
:hide-details="true"
outlined
:label="'Group Task Number ('+ (index+1) + ')'"
:name="tasksList[index]"
v-model="item.number"
></v-text-field>
</v-col>
<v-col cols="12" sm="4">
<v-text-field
dense
:hide-details="true"
outlined
:label="'Group Task Name ('+ (index+1) + ')'"
:name="tasksList[index]"
v-model="item.task"
></v-text-field>
</v-col>
<v-col cols="12" sm="4">
<v-text-field
dense
:hide-details="true"
outlined
:label="'Group Task Price ('+ (index+1) + ')'"
:name="tasksList[index]"
v-model="item.price"
></v-text-field>
</v-col>
</v-row>
Vue Code
<script>
export default {
data() {
return {
tasks: [],
groupTask: "",
tasksList: [],
};
},
watch: {
groupTask: function(newValue, oldValue) {
let data = newValue.split("\n");
let item = Math.ceil(newValue.split("\n").length / 3);
this.tasks = [];
for (var loop = 0; loop < item; loop++) {
let tmp = data.slice(loop * 3, loop * 3 + 3);
this.tasks.push({
number: tmp[0],
task: tmp[1],
price: tmp[2]
});
}
},
},
computed: {},
methods: {},
created() {}
};
</script>