javascript - Vue-loader动态组件列表

Question

我对 Vue.js 很陌生，遇到了一个不应该太难解决的问题：我有一个单文件组件 (.vue)，它应该通过查看/管理另一个单文件组件的动态列表JS。

我的方法是这样的：

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

const $ = window.$ = require('jquery')
$(document).ready(function () {
  $('#day-view').append(new Event())
})
</script>

这会导致以下错误：

Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0__DayView_Event___default.a is not a constructor

提前致谢。

Answer 1

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

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

Answer 2

我找到了解决问题的方法（不必安装新对象）。DayView应该查看Events 列表，使用对象列表结合为v-for我做了诀窍：

<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>