Я создаю приложение для отображения пользовательских данных из API в Vue JS, и получил верхнюю половину этого, но теперь перехожу к попытке отобразить объекты массива кнопками prev / next, и представление по умолчанию при первом вызове (взято из введенного поля поиска) 
Есть два запроса get, один для верхнего уровня API для общих данных (который отображается как в pi c выше, а другой - в конкретном разделе c этого, репозитории пользователя Github. Я выложил шаблон для этого, и некоторые из них уже используются, но интересуются лучшим способ начать эту часть. Я хочу загрузить последние 50 репозиторий пользователя и отобразить одно из них по умолчанию, скажем, самое последнее, с некоторыми его атрибутами в литералах шаблона, и иметь возможность нажимать кнопки «предыдущий / следующий» для каждого из них. , который загружается в ul / h4, возможно, с директивой v-for. Код, который я выложил в настоящее время, выглядит следующим образом.
Input
<input
v-model="localValue"
@keypress="fetchData"
placeholder="Enter Github User Name">
Секция, над которой работает (App. vue) * 101 1 *
<section class="repodata text-center">
<div class="controls">
<btn class="btn-success btn-lg prev" @click="prev">Prev</btn>
<!--<button class="btn-success btn-lg play" v-if="!isViewing" @click="play">View</button>-->
<!--<button class="pause" v-else @click="pause">Pause</button>-->
<button class="btn-success btn-lg next" @click="next">Next</button>
</div>
<b-card class="text-center">
<b-card-title><h2 class="text-center section-title">Latest Repos</h2></b-card-title>
<h4 v-for="repo in repos" v-bind:key="repo.title" class="repo-name">{{ repo.name }} - <span>{{ repo.description }}</span></h4>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">Created: Created Repo Page</li>
<li class="list-group-item d-flex justify-content-between align-items-center">Updated: Updated Repo Page</li>
<li class="list-group-item d-flex justify-content-between align-items-center">Forks: Repo Forks Count</li>
<li class="list-group-item d-flex justify-content-between align-items-center">Watchers: Repo Watchers Count</li>
<li class="list-group-item d-flex justify-content-between align-items-center">Stars: Repo Stars Page</li>
</ul>
</b-card>
<br />
<ul class="list-group">
<a href="#" target="_blank" class="btn btn-lg btn-primary">View Repo</a>
<br />
</ul>
</section>
Методы экспорта по умолчанию на данный момент.
export default {
name: 'app',
props: {
value: String
},
data () {
return {
localValue: "",
details: {},
avatar_url: "",
url_base: 'https://api.github.com/users/',
//index: 0,
isViewing: false,
current: {},
repos: []
}
},
created () {
this.localValue = this.value;
this.$watch("localValue", value => {
this.$emit("input", value);
});
//this.repos = this.repos[this.repo.title];
},
methods: {
fetchData(e) {
if (e.key == "Enter") {
fetch(`${this.url_base}${this.localValue}`)
.then(res => {
return res.json();
}).then(this.setResults)
}
this.getRepos();
},
setResults(results) {
this.details = results;
document.querySelector(".profile-details").style.display = "block";
document.querySelector(".repodata").style.display = "block";
document.querySelector(".search-box").style.display = "none";
},
getRepos() {
fetch(`${this.url_base}${this.localValue}` + '/repos')
.then(res => res.json())
.then(data => {
let repos = [];
data.forEach(item => {
repos = [...repos, ...Object.values(item)];
});
});
},
prev() {},
view() {},
next() {}
}
}
Входные данные - это наблюдаемое значение localValue, метод fetchData получает основные данные, устанавливает результаты как детали в setResults, и это используется для того, что видно на изображении выше. Затем он запускает метод getRepos, который получает репозитории пользователя (желательно только последние 50), которые я хочу поместить в массив репозиториев для отображения, как указано выше, с кнопками prev / next. Это то, что я пытаюсь найти лучший способ сделать. Я хочу, чтобы по умолчанию было загружено последнее репо с заголовком / des c в h4 (в данный момент не работает) и другими данными в элементах группы списков с кнопкой для просмотра / ссылки на репо. Есть идеи о том, как лучше всего это осуществить? Последние 3 элемента в объекте данных еще не используются, а также функции next, prev и view. Раздел дисплея выглядит как пи c выше, группа списков ul, с кнопкой внизу для просмотра текущего репо и кнопками prev / next вверху. Все в одном файле приложения. vue, компонентов нет.
ОБНОВЛЕНИЕ, сейчас оно как показано ниже, и просто ищет лучший способ отобразить сначала репо по умолчанию, а затем предыдущий / следующий через остальные с названием / des c и некоторыми битами в группе ul. 
Спасибо