Аксиос попадает на смену собственности

Question

У меня есть список месяцев, и я хочу получить из API назначения для каждого из этих месяцев по клику.Что у меня сейчас:

HTML

<div class="months">
    <a v-on:click="retrieveCalendar(index + 1, currentYear, month)" v-bind:class="{active : month.isActive}" v-for='(month, index) in months'>{{ month.name }}</a>
</div>

JS

methods: {
    retrieveCalendar: function(month, year, object = []) {
        axios.get('api/calendar/' + year + '/' + month + '/1').then(response => (this.days = response.data));
    }
}

Это работает, но ужасно.Мне нужно, чтобы в этом методе происходило много других вещей, например: измените параметр isActive.

Я также вызываю этот метод в create(), чтобы вызвать начальный набор событий -это правильный подход?

Есть ли способ использовать вычисленные свойства для просмотра year и month и если они были изменены, чтобы запустить метод retrieveCalendar?Или я должен использовать method вообще, или я должен как-то переместить это в вычисляемое свойство?Или есть другой способ сделать это правильно?

Answer 1

Решение:

Простота

Просто сохраняя индекс по клику, вы делаете все необходимые данные доступными без передачи аргументов методу retrieveCalendar.

isActive

Как вы можете видеть ниже, это также делает его таким, что нам даже не нужно свойство isActive.В привязке класса вы можете просто сравнить активный индекс с текущим индексом.

Запуск retrieveCalendar при year и month Изменение

Это то, что Наблюдатели Vue для.Поскольку вы вызываете один и тот же метод несколько раз и у вас уже есть метод, наиболее эффективно зарегистрировать наблюдатель в виде строки с именем метода.

Инициализация с помощью $vm#create()

Это правильно?Да.Есть ли способ лучше?Да.

Передав объект со свойством immediate: true наблюдателю Vue, вы можете пропустить вызов #create().Vue назовет это на хуке создания для вас.Суть в том, что это недокументированный API-интерфейс Vue, и он может сбить с толку кого-то, кто читает ваш код.

Несколько из вышеперечисленных трюков были изучены здесь: https://www.youtube.com/watch?v=7YZ5DwlLSt8

let app = new Vue({
  el: '#app',
  
  data: _ => ({
    activeMonthIndex: new Date().getMonth(),
    currentYear: new Date().getYear(),
    months: [
      "January", 
      "February", 
      "March", 
      "April", 
      "May", 
      "June", 
      "July", 
      "August", 
      "September", 
      "October", 
      "November", 
      "December"
    ]
  }),
  
  methods: {
  
    retrieveCalendar () {
      let month = this.activeMonthIndex + 1;
      let year = this.currentYear;
      let object = this.months[this.activeMonthIndex];
      
      return console.log(
        `I don't actually have access to your API...`
      );
      
      axios.get(
        'api/calendar/' +
        year +
        '/' +
        month +
        '/1'
      ).then(response => {
        this.days = response.data
      });
    }
    
  },
  
  watch: {
  
    activeMonthIndex: {
      handler: 'retrieveCalendar',
      /* 
        `immediate: true` ensures that this method 
        will run on create, as well as when the watched 
        property changes.
      */
      immediate: true
    },
    
    currentYear: 'retrieveCalendar'
    
  }
  
});

body{background:linear-gradient(135deg,#42e695 0,#3bb2b8 100%);font-family:futura,helvetica;background-repeat:no-repeat;height:100vh;width:100%;padding:2px}a{transition:all 500ms ease-out;display:inline-flex; margin: 5px;background:#FAFAFA;padding:20px;border-radius:5px;box-shadow:0 20px 50px -10px rgba(0,0,0,.2)}h1{color:#fff;text-shadow:0 2px 5px rgba(0,0,0,.2)}a:hover{transform:translateY(-2px);cursor:pointer;}a.active{filter:invert(100%)}.months{display:flex;flex-direction: column wrap;flex-wrap:wrap;justify-content:flex-start;align-items: flex-end;}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

<div id="app">

  <p v-if="activeMonthIndex != -1">
    Loading Calendar for {{ months[activeMonthIndex] }}...
    (not really it's just a demo)
  </p>
 
  <div class="months">

    <a 
      v-for='(month, index) in months' 
      @click="activeMonthIndex = index"
      :class="{active : index == activeMonthIndex }"
      >
      {{ month }}
    </a>

  </div>

</div>