Vue Basic Form Data Binding

by Admiral Potato

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
	<form
		@submit="handleSubmit"
	>
		<div>
			<label
				for="input-title"
			>Title</label>
			<input
				type="text"
				name="title"
				id="input-title"
				v-model="formData.title"
			/>
		</div>
		<div>
			<fieldset>
				<legend>Flavor</legend>
				<div
					v-for="(label, value) in flavorOptions"
					:key="label"
				>
					<label>
						<input
							type="radio"
							name="flavor"
							:value="value"
							v-model="formData.flavor"
						/>
						<span>{{label}}</span>
					</label>
				</div>
			</fieldset>
		</div>
		<div>
			<fieldset>
				<legend>Friends</legend>
				<div
					v-for="(label, value) in friendOptions"
					:key="label"
				>
					<label>
						<input
							type="checkbox"
							name="friends"
							:value="value"
							v-model="formData.friends"
						/>
						<span>{{label}}</span>
					</label>
				</div>
			</fieldset>
		</div>
		<input
			type="submit"
			value="SEARCH?!?!"
		/>
	</form>
	<pre>{{formDataFormatted}}</pre>
</div>

CSS

body {
	font-family: sans-serif;
}

JavaScript

var app = Vue.createApp({
    data: function() {
			return {
				formData: {
					title: '',
					flavor: '',
					friends: []
				},
				flavorOptions: {
					liver_pepper: 'Liver Pepper',
					sea_salt: 'Sea Salt',
					sky_sugar: 'Sky Sugar',
				},
				friendOptions: {
					mockey: 'Mockey',
 					sweara: 'Sweara',
 					bonnald: 'Bonnald',
 					doofy: 'Doofy',
				},
			}
		},
		computed: {
			formDataFormatted: function () {
				return JSON.stringify(
					this.formData,
					null,
					'    '
				);
			}
		},
		methods: {
			handleSubmit: function (submitEvent) {
				submitEvent.preventDefault();
			}
		}
});

var mountedApp = app.mount('#app');