Purpose:
- 1.Rest API >>> by axios
- 2.Select category >>> by v-select
- 3.Show table >>> by v-data-table but i can't show table so I use v-for to show but I got this
here what I got it show many table (according to the number of data sets)
Here is my code HTML Part
<template>
<v-container>
<h1>JSON Data</h1>
<span>Data Test Table For Current Sensor Table</span>
<!-- Choose -->
<div id="top">
<!-- left-right -->
<v-row align-center>
<!-- title -->
<v-col cols="5">
<v-subheader>Choose Generation: {{ selected }}</v-subheader>
</v-col>
<!-- dropdown -->
<v-col cols="7">
<v-select :items="items" v-model="selected" dense></v-select>
</v-col>
</v-row>
</div>
<!-- Button -->
<v-btn block v-on:click="getData()">Load Data</v-btn>
<div v-for="(item, i) in data" :key="i" >
<v-data-table :items="data" :headers="headers" :items-per-page="5">
<template slot="data" slot-scope="props">
<td>{{ props.data.userId }}</td>
<td>{{ props.data.id }}</td>
<td>{{ props.data.title }}</td>
</template>
</v-data-table>
</div>
<!-- Test -->
<span class="data_id">***{{ data }} </span><br />
</v-container>
</template>
Script Part
<script>
import axios from "axios";
export default {
name: "Current",
data: () => ({
items: ["albums", "todos", "posts"],
selected: "",
headers: [
{ text: "USER_ID", align: "start", sortable: false, value: "userId" },
{ text: "ID", value: "id" },
{ text: "TITLE", value: "title" },
],
data: [],
}),
methods: {
getData() {
axios
.get("https://jsonplaceholder.typicode.com/users/1/" + this.selected)
.then((response) => {
this.data = response.data;
})
.catch((err) => alert(err));
},
},
mounted() {
this.getData();
},
};
</script>
Vue&Vuetify is new to me. If you have any suggestions, please tell me.
I try to remove div <div v-for="(item, i) in data" :key="i" ></div> but when I refresh this page it gone and show only empty table
show only empty table
