Commit 2f7cf017 authored by Khalid Ali's avatar Khalid Ali
Browse files

Added example form

parent 89ce0331
......@@ -42,38 +42,38 @@
</div>
</template>
<script>
export default {
data() {
return {
form: {
email: '',
name: '',
food: null,
checked: []
},
foods: [{ text: 'Select One', value: null }, 'Carrots', 'Beans', 'Tomatoes', 'Corn'],
show: true
}
},
methods: {
onSubmit(evt) {
evt.preventDefault()
alert(JSON.stringify(this.form))
},
onReset(evt) {
evt.preventDefault()
/* Reset our form values */
this.form.email = ''
this.form.name = ''
this.form.food = null
this.form.checked = []
/* Trick to reset/clear native browser form validation state */
this.show = false
this.$nextTick(() => {
this.show = true
})
}
}
<script lang="ts">
import axios from 'axios';
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class CreateListing extends Vue {
// Private Form Variables
private form: {email: string, name: string, food: object, checked: string[]} = {
email: '', name: '', food: {}, checked: [],
};
private show: boolean = true;
// Food options
private foods: string[] = ['Select One', 'Carrots', 'Beans', 'Tomatoes', 'Corn'];
private onSubmit(evt: Event) {
evt.preventDefault();
alert(JSON.stringify(this.form));
}
private onReset(evt: Event) {
evt.preventDefault();
/* Reset our form values */
this.form.email = '';
this.form.name = '';
this.form.food = {};
this.form.checked = [];
/* Trick to reset/clear native browser form validation state */
this.show = false;
this.$nextTick(() => {
this.show = true;
});
}
}
</script>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment