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应该查看Event的列表，因此使用与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>

Vue-loader动态组件列表

2 个答案: