Dynamic component list using Vue-loader

Question

Dynamic component list using Vue-loader

I've recently started working with Vue.js and I've encountered a problem that I believe should have a straightforward solution: I have a single file component (.vue) that needs to display and manage a dynamic list of another single file component using JavaScript.

This is my current approach:

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

However, I'm getting the following error message:

Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0__DayView_Event___default.a is not a constructor

Any advice or assistance would be greatly appreciated. Thank you.

javascript vue.js vue-loader

Answer 1

Answer №1

After some exploration, I managed to find a solution to my issue (not necessarily involving mounting new objects). Utilizing a combination of objects with the v-for directive within the context of the DayView, designed for displaying a list of Events, proved to be effective:

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

Answer 2

After some exploration, I managed to find a solution to my issue (not necessarily involving mounting new objects). Utilizing a combination of objects with the v-for directive within the context of the DayView, designed for displaying a list of Events, proved to be effective:

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

Answer 3

Answer №2

For more information, visit https://v2.vuejs.org/v2/api/

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

Answer 4

For more information, visit https://v2.vuejs.org/v2/api/

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

Dynamic component list using Vue-loader

Answer №1

Answer №2

Similar questions

I'm attempting to access a PHP file by clicking a button using AJAX and jQuery

At runtime, the array inexplicably becomes null

I am facing an issue where my Vue root file/component is not appearing in my Laravel project

"Encountering issues with getStaticPaths not generating any paths

Dynamically include a new prop to the final element within an array of React components

Conceal an item upon deletion using the this.$http.delete() method

Mastering the utilization of API routes within the Next JS 13 App Router framework

Angular 1: selecting all checkboxes within an extensive ng-repeat list

The requested page for angular-in-memory-web-api could not be located within the Angular 4.2.2 CLI web-api functionality

The JQuery mobile navigation menu effortlessly appears on your screen

Filtering out specific properties from an element within a JavaScript forEach loop

Alert: Mouse Exiting Window - Moodle Prompt

Utilize Vuex to close a Vuetify dialog box seamlessly

Mastering the Art of Disabling buttons in Vue Based on Conditions

What is the best method for circumventing an express middleware?

Step-by-step guide to installing gatsby-CLI on Windows without requiring admin permissions

Mac OS reports an Illegal instruction: 4 error when running NodeJS

The pdf2json encountered an error when attempting to process a PDF file sent via an HTTP

Learn the steps to activate on-page editing feature!

Problem with Ext.net TabPanel