<template>
<base-card>
<form @submit.prevent="returnNewResource">
<div class="form-control">
<label for="title">Title</label>
<input type="text" name="title" id="title" v-model="title" />
</div>
<label for="description">Description</label>
<textarea
name="description"
id="description"
rows="3"
v-model="description"
></textarea>
<label for="link">Link</label>
<input type="text" name="link" id="link" v-model="link" />
<div>
<base-button type="submit">Add Resource</base-button>
</form>
</base-card>
</template>
<script>
export default {
inject: ['storeNewResource'],
data() {
return {
title: '',
description: '',
link: ''
};
},
methods: {
returnNewResource() {
const resource = {
id: new Date().toISOString(),
title: this.title,
description: this.description,
link: this.link
this.storeNewResource(resource);
}
</script>
<style scoped>
label {
font-weight: bold;
display: block;
margin-bottom: 0.5rem;
input,
textarea {
width: 100%;
font: inherit;
padding: 0.15rem;
border: 1px solid #ccc;
input:focus,
textarea:focus {
outline: none;
border-color: #3a0061;
background-color: #f7ebff;
.form-control {
margin: 1rem 0;
</style>