fetch user input

Cristiano Magro

2025-01-07 1b68fe4dfebdd34300d05b156f66dc657b7c51bb

fetch user input

 10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/AddResource.vue

@@ -1,18 +1,24 @@
<template>
  <h2>Add Resource</h2>
  <base-card>
    <form>
    <form @submit.prevent="submitData">
      <div class="form-control">
        <label for="title">Title</label>
        <input id="title" name="title" type="text" />
        <input id="title" name="title" type="text" ref="titleInput" />
      </div>
      <div class="form-control">
        <label for="description">Description</label>
        <textarea id="description" name="description" type="text"  rows="3"></textarea>
        <textarea
          id="description"
          name="description"
          type="text"
          rows="3"
          ref="descInput"
        ></textarea>
      </div>
      <div class="form-control">
        <label for="link">Link</label>
        <input id="link" name="link" type="url" />
        <input id="link" name="link" type="url" ref="linkInput" />
      </div>
      <div>
        <base-button type="submit">Add Resource</base-button>
@@ -22,7 +28,18 @@
</template>

<script>
export default {};
export default {
  inject: ['addResource'],
  methods: {
    submitData() {
      const enteredTitle = this.$refs.titleInput.value;
      const enteredDescription = this.$refs.descInput.value;
      const enteredUrl = this.$refs.linkInput.value;

      this.addResource(enteredTitle, enteredDescription, enteredUrl);
    },
  },
};
</script>

<style scoped>

 10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/TheResources.vue

@@ -11,7 +11,9 @@
      >Add Resource</base-button
    >
  </base-card>
  <component :is="selectedTab"></component>
  <KeepAlive>
    <component :is="selectedTab"></component>
  </KeepAlive>
</template>

<script>
@@ -53,12 +55,24 @@
  provide() {
    return {
      resources: this.storedResouces,
      addResource: this.addResource,
    };
  },
  methods: {
    setSelectedTab(tab) {
      this.selectedTab = tab;
    },
    addResource(title, description, url) {
      const newResource = {
        id: new Date().toISOString(),
        title: title,
        description: description,
        link: url,
      };

      this.storedResouces.unshift(newResource);
      this.selectedTab = 'stored-resources';
    },
  },
};
</script>