modal, add feed [wip]

vue/src/components/RssFeeds.vue

@@ -2,11 +2,13 @@
 import { ref, unref, onMounted, nextTick } from 'vue';
 import axios from 'axios';
 import { Readability } from '@mozilla/readability';
+import Modal from './modal/AddUrl.vue';
 
 const showMessage = ref(false)
 const feeds = ref([]);
 const message = ref('')
-const buttonText = 'Sync'
+const showModal = ref(false)
+
 async function getReadable(feed, index) {
   try {
     const response = await axios.post("feeds/read", {
@@ -153,18 +155,28 @@ onMounted(() => {
     <div class="wrapper">
       <nav>
         <p @click="sync">Sync</p>
+        <!-- <p @click="updateShow(true)">Add RSS</p> -->
+        <p @click="showModal = true">Add RSS</p>
         <!-- <RouterLink to="/">Home</RouterLink> -->
         <!-- <RouterLink to="/about">About</RouterLink> -->
         <!-- <RouterLink to="/feeds">Feeds</RouterLink> -->
       </nav>
     </div>
   </header>
+  <Teleport to="body">
+    <!-- use the modal component, pass in the prop -->
+    <modal :show="showModal" @close="showModal = false">
+      <template #header>
+        <h3>Add RSS Feed</h3>
+      </template>
+    </modal>
+  </Teleport>
   <div>
     <h1>Feeds</h1> <!-- <button @click="sync">{{ buttonText }}</button> -->
     <div v-if="showMessage" class="message">{{ message }}</div>
     <div id='article' class='article'>
       <p v-if="feeds.length == 0">No unread articles.</p>
-      <template v-for="(feed, index) in feeds">
+      <template v-for="(   feed, index   ) in    feeds   ">
         <div v-bind:id="index" class="observe">
           <h2 @click="getReadable(feed, index)" class="feed-title">{{ feed.title }}</h2>
           <p class="feed-content" v-html='feed.content'></p>