Требуется создать приложение, которое выводит заголовок митапа по ID.
Вывожу 5 радио-кнопок выбора митапа с числами от 1 до 5;
При выборе митапа получаю данные митапа по ID функцией fetchMeetupById;
Под радио-кнопками вывожу заголовок выбранного митапа.
Требуется минимальное работающее решение. Без обработки ошибок с API или особых ситуаций.
Обновление данных при выборе нового значения нужно реализовать используя отслеживание с watch.
import { createApp } from './vendor/vue.esm-browser.js';
const API_URL = 'https://api';
function fetchMeetupById(meetupId) {
return fetch(`${API_URL}/meetups/${meetupId}`).then((response) => {
if (response.ok) {
return this.result = response.json();
} else {
return response.json().then((error) => {
throw error;
});
}
});
}
let vm = createApp({
data() {
return {
button1: '',
button2: '',
button3: '',
button4: '',
button5: '',
result: ''
}
},
watch: {
button1() {
// fetchMeetupById(meetupId)
// this(this.button1)
},
button2() {
// this.fetchMeetupById(this.button2)
},
button3() {
// this.fetchMeetupById(this.button3)
},
button4() {
// this.fetchMeetupById(this.button4)
},
button5() {
// this.fetchMeetupById(this.button5)
}
},
}).mount('#app')
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<title>MeetupTitle</title>
</head>
<body>
<div id="app">
<div>
<label><input type="radio" name="meetupId" value="1" v-model="button1"/> 1</label>
<label><input type="radio" name="meetupId" value="2" v-model="button2"/> 2</label>
<label><input type="radio" name="meetupId" value="3" v-model="button3"/> 3</label>
<label><input type="radio" name="meetupId" value="4" v-model="button4"/> 4</label>
<label><input type="radio" name="meetupId" value="5" v-model="button5"/> 5</label>
{{result}}
<hr />
<h3>MEETUP_TITLE</h3>
</div>
</div>
<script type="module" src="./script.js"></script>
</body>
</html>
