Vue Изменить значок, чтобы нажать на кнопку

Question

как я могу изменить значок, когда я нажимаю на кнопку в VUE.Вот часть кода:

<v-btn flat icon color="white">
   <v-icon>star_border</v-icon>
</v-btn>

Спасибо

Answer 1

Привет, Энцо, и поздравляю с запуском твоего проекта VueJS.

Я бы порекомендовал тебе посмотреть документацию VueJS о данных и методах, чтобы начать.https://vuejs.org/v2/guide/instance.html#Data-and-Methods

Короче говоря, Данные - это то место, где вы храните свои реактивные свойства, а методы хранят ваши функциональные возможности.

В данный момент имя значка жестко запрограммировано.То, что вы хотите сделать, это сделать его реактивным.Таким образом, чтобы изменить значок;.

1. Вам необходимо привязать имя значка к свойству в ваших данных.
2. Определите метод, который изменяет значение этого свойства.
3. Создайте событие по щелчку для вызова функции.

Примерно так:

new Vue({
  el: '#app',
  data() {
    return {
      myIcon: 'star_border'
    }
  },
  methods: {
    changeIcon() {
      this.myIcon = 'home'
    }
  }
})

Здесь я определил свойство myIcon, которое сначала называется звездной границей.Я также создал метод, который вызывается по событию click этой кнопки.Этот метод изменяет значение свойства myIcon на 'home'.

Вы можете увидеть рабочую демонстрацию здесь: https://codepen.io/bergur/pen/MLMxzY