I'm encountering an issue with the code I've written. The v-model is not binding the data in the DOM, even though the axios I'm using is returning values. Here is the code snippet:
<template>
<v-container fluid>
<v-layout>
<v-flex md4 sm6 offset-sm3>
<v-card class="card" color="brown">
<v-card-title class="headline grey--text">Your Card Details</v-card-title>
<v-flex ma-2>
<v-form class="form" ref="form" mt-2>
<v-text-field v-model="info.name"></v-text-field>
<v-text-field v-model="info.userName"></v-text-field>
<v-text-field v-model="info.card"></v-text-field>
<v-text-field v-model="info.expireDate"></v-text-field>
<v-text-field v-model="info.cvv"></v-text-field>
<v-btn @click="submit" flat color="success">Submit</v-btn>
<v-btn @click="reset" flat color="error">Reset</v-btn>
</v-form>
</v-flex>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
info: [],
valid: true
}
},
created() {
axios
.get("https://localhost:44311/api/payment-access")
.then(res => this.info = res.data);
},
methods: {
reset() {
this.$refs.form.reset();
},
submit() {
axios.get("https://localhost:44311/api/payment-access").then(res => {
this.info = res.data;
console.log(this.info);
console.log("Yippy");
});
}
}
};
</script>
<style scoped>
.card {
border-radius: 20px;
}
</style>