<code><template>
<div class="overlay_CompareItem"></div>
<div class="modal_CompareItem">
<header class="modal__header_CompareItem">
<h2>Compare Computers</h2>
<button @click=(closeModal) class="close-button_CompareItem">×</button>
</header>
<main class="modal__main_CompareItem">
<table>
<thead>
<tr>
<td>
Brand
</td>
</tr>
</thead>
<tbody>
<tr :key="index" v-for="(compareThis, index) in list_of_computers">
<td>{{compareThis.brand}}</td>
</tr>
</tbody>
</table>
</main>
</div>
</code>
<code><template>
<div class="overlay_CompareItem"></div>
<div class="modal_CompareItem">
<header class="modal__header_CompareItem">
<h2>Compare Computers</h2>
<button @click=(closeModal) class="close-button_CompareItem">×</button>
</header>
<main class="modal__main_CompareItem">
<table>
<thead>
<tr>
<td>
Brand
</td>
</tr>
</thead>
<tbody>
<tr :key="index" v-for="(compareThis, index) in list_of_computers">
<td>{{compareThis.brand}}</td>
</tr>
</tbody>
</table>
</main>
</div>
</code>
<template>
<div class="overlay_CompareItem"></div>
<div class="modal_CompareItem">
<header class="modal__header_CompareItem">
<h2>Compare Computers</h2>
<button @click=(closeModal) class="close-button_CompareItem">×</button>
</header>
<main class="modal__main_CompareItem">
<table>
<thead>
<tr>
<td>
Brand
</td>
</tr>
</thead>
<tbody>
<tr :key="index" v-for="(compareThis, index) in list_of_computers">
<td>{{compareThis.brand}}</td>
</tr>
</tbody>
</table>
</main>
</div>
<code><script>
import axios from "axios";
import { ref } from 'vue';
export default {
data() {
return {
list_of_computers: []
}
},
mounted() {
this.fetchComputer(1)
this.fetchComputer(2)
},
methods: {
async fetchComputer(productId) {
const res = await fetch('http://localhost:5030/api/Products/CompareProducts/' + productId);
const finalRes = await res.json();
this.list_of_computers.push(finalRes);
alert(JSON.stringify(this.list_of_computers)); // LINE #1
},
closeModal() {
this.$emit('close');
},
}
}
</code>
<code><script>
import axios from "axios";
import { ref } from 'vue';
export default {
data() {
return {
list_of_computers: []
}
},
mounted() {
this.fetchComputer(1)
this.fetchComputer(2)
},
methods: {
async fetchComputer(productId) {
const res = await fetch('http://localhost:5030/api/Products/CompareProducts/' + productId);
const finalRes = await res.json();
this.list_of_computers.push(finalRes);
alert(JSON.stringify(this.list_of_computers)); // LINE #1
},
closeModal() {
this.$emit('close');
},
}
}
</code>
<script>
import axios from "axios";
import { ref } from 'vue';
export default {
data() {
return {
list_of_computers: []
}
},
mounted() {
this.fetchComputer(1)
this.fetchComputer(2)
},
methods: {
async fetchComputer(productId) {
const res = await fetch('http://localhost:5030/api/Products/CompareProducts/' + productId);
const finalRes = await res.json();
this.list_of_computers.push(finalRes);
alert(JSON.stringify(this.list_of_computers)); // LINE #1
},
closeModal() {
this.$emit('close');
},
}
}
Notes:
The above LINE #1 generates the data below:
[[{“id”:1, “productId”:1, “brand”:”ASUS”,…… }],
[{“id”:2, “productId”:2, “brand”:”DELL”,……. }]]
Maybe [[{…}], [{…}]] does not work ???
Maybe [{…}], [{…}] works ???
How can I make my code works?
If I don’t use array.push, then what else I can use?
Or, what other approach I can try?
Thank you very much in advance!
Cookies