gistfile1.js

<template>
  <div class="announcement-sidebar__section">
    <p class="strong">{{ state.video.title }}</p>
    <p class="text-italic">Announcements for {{ state.video.weekend }}</p>
    <div class="announcement-sidebar__ann-list">
      <vue-draggable v-model="state.video.announcements" @input="sendSortedArray">
        <div v-for="announcement in state.video.announcements" v-bind:key="announcement.weight" :class="getAnnouncementClass(announcement.id)" v-on:click="selectAnnouncement(announcement.id)">
          {{ announcement.title }}
        <div v-if="state.video.status == 'Draft'" class="remove-announcement" v-on:click="removeAnnouncement(announcement.id, $event)"></div>
        </div>
      </vue-draggable>
    </div>
    <button v-if="state.video.status == 'Draft'" class="btn btn-secondary btn-blue btn-rounded" v-on:click="addNewAnnouncement">+ Add New Announcement</button>
  </div>
</template>

<script>
  import VueDraggable from 'vuedraggable';

  export default {
    props: ['state', 'selectAnnouncement', 'addNewAnnouncement', 'removeAnnouncement'],
    methods: {
      getAnnouncementClass: function(announcementId)
      {
        let annClass = "announcement-sidebar__ann-list-item";

        if (announcementId == this.state.currentAnnouncementId) {
          annClass += " active";
        }

        return annClass;

      },

      sendSortedArray() {
        axios.post('/api/announcements/sort', { announcements: this.state.video.announcements}).then(response => {
          //
        });
      }
    },

    components: {
      VueDraggable,
    }
  }
</script>


0:Object
  created_at:"2017-11-19 19:22:52"
  deleted_at:null
  id:58
  title:"Picnic"
  updated_at:"2017-11-20 00:13:00"
  video_id:38
  weight:1
1:Object
  created_at:"2017-11-19 19:23:52"
  deleted_at:null
  id:59
  title:"New Announcement"
  updated_at:"2017-11-20 00:12:37"
  video_id:38
  weight:0
2:Object
  created_at:"2017-11-19 20:12:57"
  deleted_at:null
  id:60
  title:"Test"
  updated_at:"2017-11-20 00:13:00"
  video_id:38
  weight:2