lesson 132: adding my solution before the lesson
This commit is contained in:
parent
92065daccc
commit
d50e8d870e
|
@ -1,17 +1,22 @@
|
||||||
<template>
|
<template>
|
||||||
<base-card>
|
<base-card>
|
||||||
<form>
|
<form @submit.prevent="returnNewResource">
|
||||||
<div class="form-control">
|
<div class="form-control">
|
||||||
<label for="title">Title</label>
|
<label for="title">Title</label>
|
||||||
<input type="text" name="title" id="title" />
|
<input type="text" name="title" id="title" v-model="title" />
|
||||||
</div>
|
</div>
|
||||||
<div class="form-control">
|
<div class="form-control">
|
||||||
<label for="description">Description</label>
|
<label for="description">Description</label>
|
||||||
<textarea name="description" id="description" rows="3"></textarea>
|
<textarea
|
||||||
|
name="description"
|
||||||
|
id="description"
|
||||||
|
rows="3"
|
||||||
|
v-model="description"
|
||||||
|
></textarea>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-control">
|
<div class="form-control">
|
||||||
<label for="link">Link</label>
|
<label for="link">Link</label>
|
||||||
<input type="text" name="link" id="link" />
|
<input type="text" name="link" id="link" v-model="link" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<base-button type="submit">Add Resource</base-button>
|
<base-button type="submit">Add Resource</base-button>
|
||||||
|
@ -21,7 +26,27 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {};
|
export default {
|
||||||
|
emits: ['new-resource'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
title: '',
|
||||||
|
description: '',
|
||||||
|
link: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
returnNewResource() {
|
||||||
|
const resource = {
|
||||||
|
id: this.title,
|
||||||
|
title: this.title,
|
||||||
|
description: this.description,
|
||||||
|
link: this.link
|
||||||
|
};
|
||||||
|
this.$emit('new-resource', resource);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
>Add Resource</base-button
|
>Add Resource</base-button
|
||||||
>
|
>
|
||||||
</base-card>
|
</base-card>
|
||||||
<component :is="selectedTab"></component>
|
<component :is="selectedTab" @new-resource="storeNewResource"></component>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -60,6 +60,10 @@ export default {
|
||||||
methods: {
|
methods: {
|
||||||
setSelectedTab(tab) {
|
setSelectedTab(tab) {
|
||||||
this.selectedTab = tab;
|
this.selectedTab = tab;
|
||||||
|
},
|
||||||
|
storeNewResource(resource) {
|
||||||
|
this.storedResources.push(resource);
|
||||||
|
this.selectedTab = 'stored-resources';
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
provide() {
|
provide() {
|
||||||
|
|
Reference in New Issue