In my app, I have a component called MyList.vue which is directly imported. This component does not have subcomponents, but it imports the following:
import store from "../store/store";
import { USER_FETCHLIST } from "../store/actions/user";
The data structure in MyList.vue looks like this:
export default {
data () {
return {
tableData: [],
tableheader: []
}
},
created: function(){
store.dispatch(USER_FETCHLIST).then((res) => {
this.tableData = res["data"]["tableData"]
this.tableHeader = res["data"]["tableHeader"]
})
},
methods: {
changeRecord: function(element){
console.log(element)
}
}
}
MyList.vue also contains markup for a bootstrap-vue modal:
<template v-for="(element, index) in tableData">
<tr>
//rest of the markup generating the columns carrying the data
<td>
<button v-on:click="changeRecord(element)" v-b-modal="`modal-${index}`">Aendern</button>
<b-modal :id="'modal-' + index" title="BootstrapVue">
<template v-for="(value, name) in element">
//more nested templates here
</template>
</b-modal>
</td>
</tr>
</template>
When clicking the button, a dialog appears with input fields based on the data received:
https://i.sstatic.net/3yomu.jpg
The user should be able to make changes to the data in the background through this dialog. However, since I am new to vue, I am unsure about the best approach for capturing user input. Should I use v-model? And if so, how can I handle dynamically inserted data/observables? The goal is to format the user input into key-value pairs where the label of the input field is the key and the value entered by the user is the value.
Additionally, any changes made in the dialog should only affect the specific record being edited without altering the original dataset on the frontend.