Nested component does not have draggable functionality enabled

When I use the following template located at https://codesandbox.io/s/vskdf, why is it not rendering inside my vuedraggable? Any suggestions?

InventorySectionGroup.vue:

<template>
  <!-- this div renders -->
  <div class="inventory-section-group">
    <p>{{ itemSectionGroupProps.itemSectionCategoryName }}</p>
    <div
      v-for="group in itemSectionGroupProps.itemSectionCategoryItemList"
      :key="group.itemSectionCategoryId"
    >
      <inventory-section-group-item :itemDataProps="group">
      </inventory-section-group-item>
    </div>
    <!-- div doesn't render :-(
      <draggable v-model="itemSectionGroupProps.itemSectionCategoryItemList">
      <transition-group>
        <div
          v-for="group in itemSectionGroupProps.itemSectionCategoryItemList"
          :key="group.itemSectionCategoryId"
        >
          <inventory-section-group-item :itemDataProps="group">
          </inventory-section-group-item>
        </div>
      </transition-group>
    </draggable> -->
  </div>
</template>

To fix initialization errors, check out:https://codesandbox.io/s/y2cur?file=/src/components/InventorySectionDraggable.vue

You can replicate nested dnd like so:https://codesandbox.io/s/priceless-perlman-n6psw?file=/src/components/MyContainer.vue

Answer №1

Your code is showing a number of errors in both the browser console and ESLint. It's important to address these issues as they could be causing potential roadblocks.

In addition to the errors, you also have some duplicated code in your project. This duplication is likely due to the fact that the ":key" attribute needs to be unique. Since the code within the two blocks is the same, the key ends up being duplicated and only one block is rendered.

To fix this issue, consider updating the second block with a simple unique key, like:

<div :key="`${group.itemSectionCategoryId + 1}`">

By making this change, both blocks should render correctly. Here's how the final result should look: https://i.sstatic.net/nlYPN.png

Answer №2

After careful consideration, I have chosen to implement nested draggable functionality for building satellite data related to inventory groups and items.

If you'd like to see the code in action, check out this link: https://codesandbox.io/s/x8ur4?file=/src/components/InventorySectionDraggable.vue

I still have some work to do in terms of wrapping the props around components, but progress is being made.

For a glimpse at what has been accomplished so far, take a look at this link: https://codesandbox.io/s/rmh2n

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

What steps can I take to completely remove JavaScript from an HTML document?

To eliminate the <script> tags in the HTML, I can utilize regex just like this $html = preg_replace('#<script(.*?)>(.*?)</script>#is','', $html); While this approach works well, dealing with inline JavaScript require ...

React form input not reflecting changes in API request

I have encountered an issue with using the searchInput state as a variable for the api request in my React application. The button in the return statement is not functioning as expected, as it causes the page to refresh without loading anything. However, ...

Using aliases in npm packages is not supported

I am working on creating an npm package that I want to use in another application. During development, I set a path in tsconfig for importing various modules instead of using a relative path. However, when I download my package into the test app, it is una ...

Initializing State for One Element While Neglecting the Other

Experiencing odd behavior in my React code. I assigned two elements to state one after the other, but only one of them is accurately represented in the state while the other is not. Both elements print properly before assignment. module.exports = React.cr ...

Employ jQuery to display a text box with a sliding motion upon hovering the mouse cursor over a specific area

Beginner inquiry about jQuery. Imagine I have a label on my webpage and I am looking to create a sliding effect for an input box when hovering over the label. Can anyone offer tips on utilizing jQuery to make this happen? ...

Tips for obtaining Karma coverage for handling if-else scenarios in a controller method with Mocha/Jasmine testing suite

Below is the controller method in question: function updateItem(itemList) { vm.selectedItem = ''; if(itemList !== null || itemList !== '' && itemList !== undefined){ if (itemList.firstName !== ...

Retrieve the variable only once a response has been received from the POST request

Is there a way to update a variable in my component only after receiving a response from a POST request? Here is the code in component.ts: formSubmit() { this.sent = this.submitProvider.sendByPost(this.form); this.formSent = this.submitProvider.f ...

Tips for delaying the execution of numerous ajax success callbacks?

In my JavaScript code, I am facing the following situation: call_A(success_A) call_B(success_B) function call_A(success){ // make ajax request success(result) } function call_B(success){ //make ajax request success(result) } function success_A(){ ...

Is it possible to use ng-repeat limitTo to iterate over a JSON object instead of an array?

I'm using ng-repeat to iterate through a JSON object based on its keys. I've successfully limited the number of iterations to 5 by using ng-repeat="item in array|limitTo:5" for an array object. However, when I attempt to limit the key repetition ...

Exploring the possibilities of Vue.js and Bootstrap 4 on the PlayStation 4 internet browser

Are there any workarounds for achieving Vuejs and Bootstrap 4 compatibility on the Playstation 4's Internet browser? When I access my website, it only displays our background color and nothing else. I am open to suggestions. Is there a fix for this i ...

Adjusting the viewer.js script

In order to view my pdf files using Mozilla's pdfjs plugin, I currently pass a query parameter to viewer.html like this: http://localhost/MyProject/viewer.html/?file=file.pdf Although this method works fine for me, I have a unique requirement for my ...

Executing a Python function using JavaScript: Step-by-step guide

I am facing an issue with invoking my python function from my javascript file. Running a simple server with python3 -m http.server, I have no backend and all my javascripts are on the front end. In a python file named write.py, there is a function that I ...

Troubleshooting undefined value issue with pagination in AJAX GET request with Laravel

I am currently working on a GET request using AJAX. In my Laravel Controller, I attempted to use "->paginate(5);" and encountered undefined values. However, when I use "->get();", it works flawlessly. Nevertheless, I prefer to use paginate to impleme ...

Encoding and Displaying Characters in HTML with UTF-8

I am experiencing an issue with UTF-8 characters in the page title. I would like to include the music symbol ♫ on the page title. The strange thing is that sometimes it displays correctly (in Google Chrome) and other times it shows a square symbol indic ...

Rotating Threads in Three.js

Looking to create a rotating tread effect similar to a tank tread in ThreeJS. Rather than physically rotating the tread, I believe shifting the position of the texture by a certain amount of pixels could achieve the same visual effect. Any tips on how to s ...

JavaScript unable to dynamically change CSS styles

I've been struggling to get the color updates working for a while now. My suspicion is that my string return may be invalid, causing the issue. I'm aiming to convert hours, minutes, and seconds into hexadecimal values, but it seems to be failing ...

Using JavaScript to trigger an event when there is a change in the innerHTML or attributes

I have come across a jQuery calendar with the capability to scroll through months, and I am interested in triggering an event each time the month changes so that I can assign event listeners to every td element within the table (with days represented by ...

Utilizing Lodash to Manipulate an Array of Objects

I'm attempting to simplify a complex structure. After much simplification, I have managed to reduce it to the following: [ {'Cells':{'Results':[ {'Key':'ID','Value':123}, ...

Chipped bricks (possibly a vintage piece)

Although I thought the setup was straightforward, it seems like I am missing something... Here is the HTML structure with a simple fixed-width 2-column layout: <div class="container_12"> <div class="grid_masonry"> ... </div> <d ...

Unable to replace default typography in MUI with custom typography theme on Next.js

In my Next.js React project, I am utilizing Material-UI (MUI) with a customized theme. Although the colors from the theme are being applied successfully, I am encountering difficulty in adjusting the default font sizes of H2 and H5 elements. Even though I ...