I'm facing a challenge with updating certain input fields on a form I'm currently working on. After receiving data from axios in one data property, I am attempting to prefill some fields with the response. There are four fields returned from the server that I want to maintain similar v-model bindings on the inputs for easy submission of two prefilled fields along with the rest of the form data.
Initially, I tried using a watcher on the data upon retrieval, but it didn't yield any results. Now, I have implemented a computed method aiming to update my data properties once Axios fetches a response.
data() {
pluResponse: {},
item: {
plu: '',
commodity: '',
},
},
handlePLUInput(event) {
axios.post(API_SEARCH_ENDPOINT,
this.item,
{ headers: {
'Content-type' : 'application/json',
}
}).then(response => {
this.pluResponse = response.data.data[0];
}).catch(error => {console.log(error)};
},
computed: {
item(pluResponse) {
this.item.plu = pluResponse.plu;
this.item.commodity = pluResponse.commodity;
}
}
Although no error messages are being displayed, the item data property simply doesn't appear to update. could it be that the Computed method isn't triggering?