Я рекомендую вам sh выбранные данные в соответствующем элементе:
<div v-for="(item, index) in items" :key="index">
<button @click="fetchData(item.id,index)">Load Data</button>
<ul v-if="item.THEDATALOADED">
<li v-for="(data, index) in item.THEDATALOADED">
{{ data.value }}
</li>
</ul>
</div>
в методе fetchData:
fetchData(id,index){
....
let tmp=this.items[index];
tmp.THEDATALOADED=response.data;
this.$set(this.items,index,tmp);
...
}
Следующий код выполнения иллюстрирует ваш сценарий использования, в этом примере у меня есть набор пользователей, и у каждого пользователя есть несколько сообщений, которые он создал, когда я нажимаю кнопку load Posts, он получает сообщения соответствующего пользователя:
new Vue({
el: '#app',
data: {
users: [],
},
mounted() {
axios.get('https://jsonplaceholder.typicode.com/users')
.then((response) => {
this.users = response.data
})
},
methods: {
getPosts(id, index) {
axios.get('https://jsonplaceholder.typicode.com/posts?userId=' + id)
.then((response) => {
let tmp = this.users[index];
tmp.posts = response.data;
this.$set(this.users, index, tmp);
})
}
}
})
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue-axios@2.1.4/dist/vue-axios.min.js"></script>
</head>
<body>
<div id="app">
<div v-for="(user, index) in users" :key="index">
<span>{{user.name}}</span>
<button @click="getPosts(user.id,index)">load Posts</button>
<ul v-if="user.posts">
<li v-for="(post, index) in user.posts">
{{ post.title}}
</li>
</ul>
</div>
</div>
</body>
</html>