JSFiddle - React, Tailwind, and code Playground

by euledge

HTML

<div id="schedule">
  <ul>
    <li v-for="available_teacher in available_teachers">
      <div>
        teacher_id:{{available_teacher.teacher_id}}
      </div>
    </li>
  </ul>
</div>

JavaScript

var available_teachers = [
      {'teacher_id': 1},
    ];
var res = {
  data: {
    available_teachers: [
      {'teacher_id': 11},
    ]
  }
};

const schedule = new Vue({
  el: '#schedule',
  data: {
    available_teachers: available_teachers
  },
  methods: {
    change_date: function(date_id) {
      const data = {
        date_id: date_id
      };
    }
  },
  mounted: function() {
    var that = this;
    setInterval(function(){
       // ここで available_teachersや this.available_teachers
       that.available_teachers = res.data.available_teachers;
    }, 1000);
  }
});