Я довольно новичок в 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

Заранее спасибо.

1
moritz-weber 25 Май 2017 в 00:25

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>
0
moritz-weber 29 Май 2017 в 17:44

См. https://vuejs.org/v2/api/.

<template><div><event /></div></template>
<script>
import Event from './DayView/Event'
export default {
  components: {
    Event
  },
  props: ['day']
}
</script>
0
roberto tomás 24 Май 2017 в 21:58