Difficulty arises when attempting to render a Vue component after splitting it into a new component

I previously had a Vuetify dialog setup in my location view to delete a location from a list. Now, I have a second list for Users that requires the same functionality and dialog. This seemed like a good opportunity to refactor and move my delete dialog into a component. It was working fine before, but when I moved it into a component, something seems to be missing. Any suggestions?

<template>
    <v-dialog
          v-model="dialogDelete"
          max-width="500px"
          persistent
        >
          <v-card>
            <v-card-title class="headline">
              Delete location
            </v-card-title>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn
                @click="closeDeleteDialog"
              >
                Cancel
              </v-btn>
              <v-btn
                v-if="permissions.locations.delete"
                @click="deleteItem"
              >
                Delete
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
</template>

Next is my script:

data: () => ({
  dialog: false,
  dialogDelete: false
},
methods: {
    deleteItem () {
      this.$store.dispatch('deleteFirebaseDoc', { docId: this.locationId, collection: 'locations' })

      this.locationId = null
      this.dialogDelete = false
    },
    deleteItemConfirm (item) {
      this.locationId = item.docId
    },
    closeDeleteDialog () {
      this.dialogDelete = false
    } }

After moving this into a components, I encounter no errors, but the dialog doesn't appear:

<DeleteDialog v-model="dialogDelete" title="Delete location?"/>

The script remains the same as above, but now I'm including my new component:

  components: {
    DeleteDialog: () => import('@/components/Shared/DeleteDialog')
  },

Here's how I've set up my DeleteDialog.vue component:

<template>
  <v-dialog
    max-width="500px"
    persistent
  >
    <v-card>
      <v-card-title
        class="headline"
      >
        <slot name="header">
          {{ title }}
        </slot>
      </v-card-title>
      <v-card-text>
        <slot name="body">
          {{ message }}
        </slot>
      </v-card-text>
      <v-card-actions>
        <v-spacer />
        <v-btn
          color="grey darken-1"
          text
          @click="$emit(closeDeleteDialog)"
        >
          Cancel
        </v-btn>
        <v-btn
          color="primary darken-1"
          text
          @click="$emit(deleteItem)"
        >
          Delete
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  name: 'DeleteDialog',
  props: {
    title: {
      type: String,
      required: true
    },
    message: {
      type: String,
      default: ''
    }
  },
  emits: ['closeDeleteDialog', 'deleteItem']
}
</script>

Answer №1

If you find that the v-dialog in your component is not receiving any values, consider extending the v-dialog and binding all attributes and events to your custom component. A clearer example of this can be seen below:

CustomDialog.vue

<template>
  <v-dialog
    v-bind="$attrs"
    v-on="$listeners"
    // add your custom attributes here
  >
  // ...
  </v-dialog>
</template>

<script>
import {VDialog } from "vuetify/lib"
export default {
  extends: VDialog,
  // ...
}
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is Firefox preventing the running of asynchronous JavaScript code?

My experience with writing tests for my web application in the Selenium Framework has been smooth sailing with both Chrome and Edge. However, I've encountered a problem specifically with Firefox - the asynchronous script keeps timing out. I suspect i ...

Exploring the limitations of middlewares in supporting independent routers

When I examine the code provided, it consists of three distinct routers: const Express = require("express") const app = Express() // Three independent routers defined below const usersRouter = Express.Router() const productsRouter = Express.Router() cons ...

Disabling an anchor using the 'disabled' property is proving to be a challenge for me

I'm attempting to dynamically enable or disable an anchor element based on the user's role. So far, I've tried a few different methods: document.getElementById('myBtn').disabled = true; However, this returns an error: The propert ...

Struggling to find multiline content in a SWIFT message using regex

Looking into a SWIFT message using RegEx, here is an excerpt: :16R:FIN :35B:ISIN CH0117044708 ANTEILE -DT USD- SWISSCANTO (CH) INDEX EQUITY FUND USA :16R:FIA The goal is to extract information in group 3: ISIN CH0117044708 ANTEILE -DT USD- SWISSCANTO (C ...

Is there a way for JavaScript to generate an image and smoothly transition it from its initial state to its final style?

I am currently working on a JavaScript game that involves moving IMG elements by adjusting their x/y/width/height/opacity properties and utilizing CSS transitions to smoothly move them to their target locations, triggering an event upon arrival. Everything ...

What is the process for reaching individuals within a nested object?

I have been struggling to access the elements of a nested object without any success. Despite looking through similar questions on stackexchange (such as this), I have not been able to resolve my issue. I attempted to access the final element using console ...

What is the reason for Vue3 child component not being recreated?

Here is a link to the sandbox code I created for my problem: https://codesandbox.io/s/clever-zeh-kdff1z <template> <div v-if="started"> <HelloWorld :msg="msg" @exit="exit" @remake="remake" /> ...

Implementing Firebase with NextJS to append objects to a nested array

I'm currently working on my project using nextjs and firebase. The project concept revolves around a hybrid project management system where users can create projects with multiple boards to organize and store tasks: Board UI This is how I plan to sav ...

Why do my posts appear twice on the page after submitting a new post? When I refresh the page, the posts seem to duplicate

After submitting the create post controller via POST, the post appears once. However, upon reloading the page using GET, it shows up twice. How can I prevent this duplication and ensure that existing posts are only displayed once? I aim to have the post d ...

Error: The function __WEBPACK_IMPORTED_MODULE_0_react___default.a.createRef is not valid

Recently, I started exploring React.js and came across the ref concept in React. The new createRef API in V16.3 caught my attention. To learn more about it, I referred to the documentation on REACT DOC's. import React from "react"; export class MyCo ...

Is there a C++ equivalent to the JS Array.prototype.map method?

When it comes to JavaScript, Array.prototype.map is a powerful tool for creating a new array by applying a function to each element. Consider the following example: const elements = [{ text: 'hi1' }, { text: 'hi2' }, { text: 'hihi ...

The outer DIV will envelop and grow taller in conjunction with the inner DIV

Could use a little help here. Thank you :) I'm having trouble figuring out how to get the outer div to wrap around the inner div and expand upwards with the content inside the inner editable div. The inner div should expand from bottom to top, and t ...

Refresh the page automatically once the form in React has been successfully edited and saved

Every time I save the form, I trigger the function onSave which results in the webpage automatically refreshing. class App extends React.Component { constructor() { super(); this.state = { todos: [{ id: 1, ...

Angular is able to select an element from a specified array

I'm currently struggling with using Angular to manipulate a TMDB API. I am having difficulty retrieving an item from an array. Can someone provide assistance? Here is the response that the array returns: { "id": 423108, "results ...

What is causing ES6 Class properties to be concealed by Higher Order Functions?

UPDATE: Added new screenshots to provide clarity at the end. My current challenge involves utilizing high order functions to combine subclasses/mixins. I've noticed that I can only access properties from the first class I extend, and only properties ...

Sending a Nan alert regarding a JSON attribute

I recently completed a project using Angular4 that involves connecting to a nodeExpressJS server to retrieve JSON data and update the object with new information. Below is the onSubmit function from the addemployeeform. onSubmit(formValue: any) { cons ...

I'm having trouble finding the issue in this straightforward code snippet. Can someone pinpoint the error for

(server-side) const express = require('express'); //setting up app instance const app = express(); //middleware const bodyParser = require('body-parser'); app.use(express.urlencoded({extended: false})); app.use(express.json()); //imple ...

Integrate the sum of all items with superior attributes from an array of objects

When using Vue, I am sending a request for cart items and displaying the data as a list of cart items. https://i.sstatic.net/vmmUz.png The data is in JSON format: {"cart": [ { "id": 24, "product_id": "1", "customer_id": "2", "product": { "id ...

Performing two API calls using Jquery to fetch distinct dynamic elements within two nested $.each loops

There's an API link that contains crucial data about phone brands. From this initial data, I have to create a second API call for each brand to gather more detailed information. For example, the first JSON file (urlphonebrands) lists 3 phone brands - ...

Incorporate a cookie within a jQuery dialog box and display the chosen value on the webpage following submission, alongside

I am creating a webpage where users are required to input their postcode in order to search for factories nearby. To achieve this, I have implemented a jQuery modal dialog that prompts users to enter their postcode and click submit. Once submitted, a cook ...