| commit | author | age | ||
| 2c19b5 | 1 | <template> |
| c39477 | 2 | <h2>Add Resource</h2> |
| CM | 3 | <base-card> |
| 1b68fe | 4 | <form @submit.prevent="submitData"> |
| c39477 | 5 | <div class="form-control"> |
| CM | 6 | <label for="title">Title</label> |
| 1b68fe | 7 | <input id="title" name="title" type="text" ref="titleInput" /> |
| c39477 | 8 | </div> |
| CM | 9 | <div class="form-control"> |
| 10 | <label for="description">Description</label> | |
| 1b68fe | 11 | <textarea |
| CM | 12 | id="description" |
| 13 | name="description" | |
| 14 | type="text" | |
| 15 | rows="3" | |
| 16 | ref="descInput" | |
| 17 | ></textarea> | |
| c39477 | 18 | </div> |
| CM | 19 | <div class="form-control"> |
| 20 | <label for="link">Link</label> | |
| 1b68fe | 21 | <input id="link" name="link" type="url" ref="linkInput" /> |
| c39477 | 22 | </div> |
| CM | 23 | <div> |
| 24 | <base-button type="submit">Add Resource</base-button> | |
| 25 | </div> | |
| 26 | </form> | |
| 27 | </base-card> | |
| 2c19b5 | 28 | </template> |
| CM | 29 | |
| c39477 | 30 | <script> |
| 1b68fe | 31 | export default { |
| CM | 32 | inject: ['addResource'], |
| 33 | methods: { | |
| 34 | submitData() { | |
| 35 | const enteredTitle = this.$refs.titleInput.value; | |
| 36 | const enteredDescription = this.$refs.descInput.value; | |
| 37 | const enteredUrl = this.$refs.linkInput.value; | |
| 38 | ||
| 39 | this.addResource(enteredTitle, enteredDescription, enteredUrl); | |
| 40 | }, | |
| 41 | }, | |
| 42 | }; | |
| c39477 | 43 | </script> |
| 2c19b5 | 44 | |
| c39477 | 45 | <style scoped> |
| CM | 46 | label { |
| 47 | font-weight: bold; | |
| 48 | display: block; | |
| 49 | margin-bottom: 0.5rem; | |
| 50 | } | |
| 51 | ||
| 52 | input, | |
| 53 | textarea { | |
| 54 | display: block; | |
| 55 | width: 100%; | |
| 56 | font: inherit; | |
| 57 | padding: 0.15rem; | |
| 58 | border: 1px solid #ccc; | |
| 59 | } | |
| 60 | ||
| 61 | input:focus, | |
| 62 | textarea:focus { | |
| 63 | outline: none; | |
| 64 | border-color: #3a0061; | |
| 65 | background-color: #f7ebff; | |
| 66 | } | |
| 67 | ||
| 68 | .form-control { | |
| 69 | margin: 1rem 0; | |
| 70 | } | |
| 71 | </style> | |
