Блог

Я использовал Vue.js фреймворк совсем недавно, поэтому он для меня очень новый.

Когда я пытаюсь нажать на мою кнопку, я хотел бы получить идентификатор моего API и отправить его на мою страницу избранного

 <template>
  <button
    v-model="newCharacter"
    class="new-character"
    autofocus
    autocomplete="off"
    placeholder="Ajouter en favoris ?"
    @keypress.enter="addCharacter"
  >
</template>

<script>
import axios from 'axios';

export default {
  name: 'FavoriteButton',
  data() {
    return {
      characters: [],
      page: 1,
      pages: 1,
      currentCharacter: {},
    };
  },
  created() {
    this.fetch();
  },
  methods: {
    addCharacter() {
      this.$store.commit('addCharacter', this.newCharacter);
      this.newCharacter = '';
    },
    fetch() {
      const params = {
        page: this.page,
      };

      const url = 'https://rickandmortyapi.com/api/character';
      return axios
        .get(url, { params })
        .then((res) => {
          this.characters = res.data.results;
          this.pages = res.data.info.pages;
          console.log(res.data.info);
        })
        .catch(console.log);
    },
    async fetchOne(id) {
      const result = await axios.get(
        `https://rickandmortyapi.com/api/character/${id}/`,
      );
      this.currentCharacter = result.data;
      console.log(this.currentCharacter);
    },
  },
};
</script>
  

Я думаю, что это неправильный способ сделать это, но я не могу найти решение своей проблемы.

Спасибо за вашу помощь.