@eldenhard2

Как реализовать смену текста при переключении между radio button?

Требуется создать приложение, которое выводит заголовок митапа по 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>
  • Вопрос задан
  • 44 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
data: () => ({
  meetupId: null,
  meetupData: null,
}),
watch: {
  meetupId(val) {
    fetch(`https://course-vue.javascript.ru/api/meetups/${val}`)
      .then(r => r.json())
      .then(r => this.meetupData = r);
  },
},

<label v-for="i in 5">
  <input type="radio" name="meetupId" :value="i" v-model="meetupId">
  {{ i }}
</label>
<pre>{{ meetupData }}</pre>
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@Wispik
В v-model должна быть одна и та же переменная, в которую будет записываться значение value.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы