API filter [_in]

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="flex flex-col h-screen justify-between">
    <Header />
     <main>
       <router-view />

src/pages/notice/[id].vue

@@ -6,47 +6,66 @@
         <div v-else>
             <div v-html="page[0].content" class="container mx-auto">
 
-    
+
             </div>
-            <div v-if="page[0].attachments">
-                    <div  v-html="page[0].attachments"> </div>
+            <div v-if="files">
+                <h2>Attachments</h2>
+                <div v-for="(file, index) in files">
+                    {{index+1}}<a :href="'https://api8.siliconpin.com/assets/' + file.directus_files_id">
+                        <h3> {{ file.directus_files_id }}</h3>
+                    </a>
+
+
+
 
                 </div>
-                <div>{{page[0].attachments[0]}}</div>
+
+            </div>
+            <!-- <div>{{page[0].attachments[0]}}</div> -->
         </div>
     </div>
-    </template>
+</template>
     
-    <script>
-    export default {
-        data() {
-            return {
-                page: null,
-                attachments:[],
-                isLoading: true
-            }
-        },
-        mounted: function () {
-            fetch('https://api8.siliconpin.com/items/scc22?filter[slug][_eq]=' + this.$route.params.id)
-            // fetch('https://api8.siliconpin.com/items/scc22?slug=about-us')
-                .then(response => response.json())
-                .then(data => {
-              this.page = data.data
-              this.page[0].attachments.forEach(element => {
-                fetch('https://api8.siliconpin.com/items/scc22_files_1?filter[id][_eq]='+element )
-                .then(response => response.json())
-                .then(attach => {
-                    console.log(attach.data[0].directus_files_id)
-                    this.attachments.push(attach.data[0].directus_files_id)
-                })
-                console.log(element)
-              });
-            //   this.getAttachments(this.page[0].attachments)
-            //   console.log(this.page[0].attachments)
-              this.isLoading = false
+<script>
+export default {
+    data() {
+        return {
+            page: null,
+            files: [],
+            isLoading: true
+        }
+    },
+    mounted: function () {
+        fetch('https://api8.siliconpin.com/items/scc22?filter[slug][_eq]=' + this.$route.params.id)
+            .then(response => response.json())
+            .then(data => {
+                this.page = data.data
+                let attIDs = ''
+                let t = 0
+                this.page[0].attachments.forEach(ids => {
+                    if (t == 0) attIDs = ids
+                    else attIDs = attIDs + ',' + ids
+                    t++
+                    // console.log(ids)
+                });
+                //   console.log(attIDs)
+                //   this.getAttachments(this.page[0].attachments)
+                //   console.log(this.page[0].attachments)
+                this.isLoading = false
+
+                fetch('https://api8.siliconpin.com/items/scc22_files_1?filter[id][_in]=' + attIDs)
+                    .then(resp => resp.json())
+                    .then(file => {
+                        this.files = file.data
+                        // attach.data.forEach(fileID=> this.files.push(fileID.directus_files_id))
+                        console.log(file.data)
+                        // this.attachments.push(attach.data[0].directus_files_id)
+                    })
+                // console.log(Object.assign({}, this.files))
+                // console.log(this.files)
             })
-        },
-        methods: {
+    },
+    methods: {
         // getAttachments(att) {
 
         //     console.log(att)
@@ -57,5 +76,5 @@
 
         // }
     }
-    }
-    </script>
+}
+</script>