Recently delving into the world of Vue.js, I've encountered some obstacles with reactive datasources in Vue.js.
My goal is to code a function that can add and remove a row containing a textfield and a textarea within the parent element.
Your code should go into ElementsView.vue. Here's a snippet:
<template>
<div>
// Your Vue template code goes here
</div>
</template>
<script>
// Your Vue script goes here
</script>
Feel free to use TextField.vue for your textfield needs. Here's a peek:
<template>
<div class="form-group">
// Your textfield template code comes here
</div>
</template>
<script>
// Your textfield script code can be managed here
</script>
During my experimentation, I discovered that when adding a new row, a new empty JSON object is appended to the array. However, deleting an object results in errors.
The issue seems to stem from the array containing empty objects that aren't associated with any input elements. Thus, when an object is removed, the UI doesn't update as expected, and previous user entries remain visible in the inputs.
While attempting to troubleshoot, I suspected that updating the data the list relies on before making changes would force a redraw of the array based on the data object. However, my tests with the removeMark function revealed conflicting results.
Could someone kindly shed light on where I might be going astray?