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

What is the solution for fixing scrolling while keeping the header fixed and ensuring that the widths of headers and cells are equal?

Struggling to delete a specific item by its ID from MongoDB within a Next.js application

Tips for unit testing an Angular Service that is primarily responsible for redirecting to an external page from the application

Error: The context does not have a definition for React

Enhancing Your VueJS Component with Dual Conditionals in :class

Preserve page configurations upon page refresh

Dealing with Axios cross-origin resource sharing problem in communication between VueJS frontend and SailsJS backend

Unable to define the color of icons path using CSS in Vue 3

What is the best way to implement bypassSecurityTrustResourceUrl for all elements within an array?

Preventing values from being overridden when setting them in a loop using Vue JS and Firebase

Chrome Extension: Sending Data from Panel Window to Popup - A Step-by-Step Guide

What is the best way to reduce the file size of a group of PNG images for

Exploring characteristics using DocumentTraversal

How to achieve the functionality of ocibindbyname in JavaScript

Failure of jQuery Code Upon Successful Execution

Encountering a ReferenceError stating that the window object is not defined while building a React Leaflet application

Arranging information extracted from an XML document following an ajax request

RectAreaLight in Three js does not produce any light reflection when used with MeshPhongMaterial due to lack of support for OES_texture_half

Display the chosen alternative in a Bootstrap dropdown menu

Troubleshooting await and async functions in Express.js applications