[Vuejs]-Vue-loader dynamic list of components

0πŸ‘

βœ…

I found a solution for my problem (which isn’t neccessarily mounting new objects). As DayView is supposed to view a list of Events, using a list of objects combined with v-for did the trick for me:

<template>
  <div id="day-view">
    [...]
    <event v-for="event in events" :event="event"></event>
  </div>
</template>

<script>
import Event from './DayView/Event'

let events = []

export default {
  components: {
    Event
  },
  data () {
    return {
      events: events
    }
  }
}

const $ = window.$ = require('jquery')
$(document).ready(function () {
  events.push({start: '540', end: '630'})
})
</script>
πŸ‘€moritz-weber

0πŸ‘

See https://v2.vuejs.org/v2/api/

<template><div><event /></div></template>
<script>
import Event from './DayView/Event'
export default {
  components: {
    Event
  },
  props: ['day']
}
</script>

Leave a comment