<script src="https://unpkg.com/vue@3"></script>
<div id="app">
<input v-model="color">
<br>
<table>
<tr>
<th>name</th>
<th>age</th>
<th>count</th>
</tr>
<tr v-for="item in items">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.count }}</td>
</tr>
</table>
<button @click='fetchData'>
Данные из таблицы
</button>
</div>
<script>
const {
createApp
} = Vue
createApp({
data() {
return {
items: [],
color: "#cccccc"
}
},
methods: {
fetchData() {
fetch('https://api.agify.io/?name[]=michael&name[]=matthew&name[]=jane')
.then(response => response.json())
.then(data => {
console.log(data)
this.items = data
});
}
},
mounted() {
console.log(`mounted.`)
this.fetchData()
}
}).mount('#app')
</script>
This Pen doesn't use any external CSS resources.