Challenge with VueJS structure

I've been working on making nestable DOM elements draggable with VueJS and I've made some progress. However, after dragging and dropping, it seems like some elements are disappearing.

Could someone please review my code and point out what might have gone wrong?

<script type="text/x-template" id="template-drag">
  <draggable v-model="nodes" :options="{group: { name:'group'}}" class="draggable">
    <template v-for="element in children">
      <element-type :attrs="element"><draggable-nested :children="element.children"/></element-type>
    </template>
  </draggable>
</script>

Check out my JSFiddle for reference: https://jsfiddle.net/minuwan/gc5xjLru/

Answer №1

Seems like the only thing you're missing is the empty tasks array (aside from the draggable-nested issue pointed out by Roy).

By defining it for each object, you enable it to be rearranged.


Here's the updated code snippet for the original jsfiddle example:

<script type="text/x-template" id="template-drag">
  <draggable :element="'ul'" :list="tasks" class="draggable" :options="{group:{ name:'group'}}">
    <template v-for="el in children" :key="el.name">
      <p>{{el.name}}</p>
            <element-type :attrs="el"><draggable-nested :children="el.children"/></element-type>
    </template>
  </draggable>
</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

Foundations of JQuery Ajax with GET Requests

Hi there, I'm back again. I'm currently trying to learn the basics of Jquery Ajax with some help here and so far, it's going well. However, sometimes the answers provided can be very specific to certain requests, which may not be as helpful ...

Transforming JSON into a structured table with the help of jQuery's get() function

I am facing a challenge in parsing the JSON data and converting it into an HTML table. Here is the code snippet I'm working with: jQuery.get("/path/to/json?filter=date&pagesize=25&pagestart=1", function(json) { console.log(json) }): It ...

Adjusting the font color when hovering over multiline text

I am currently in the process of coding a website for my job, and I am working on changing the text color when it is hovered over. However, there seems to be a break in my code causing the text not to highlight all at once. Any guidance or suggestions on h ...

Do double forward-slash comments work in CSS code?

Is using a double-forward slash (//) for single-line comments in CSS considered reliable and supported by mainstream browsers and CSS interpreters according to the specification? ...

Implement the parent jQuery library within a child iframe

I have a query regarding the use of two iframes in my HTML page. I am trying to implement a single jQuery file that is loaded on the parent page. The code snippet provided below works perfectly on all browsers, except for one issue with Chrome when using t ...

"Implementing JavaScript Validation for Textboxes: A Step-by-Step Guide

I need some help with restricting the input of a textbox within a gridview to only 'X' or 'O'. I am not very familiar with javascript, so any guidance on how to accomplish this would be greatly appreciated. It's worth noting that t ...

Is it possible to populate a dropdown list prior to launching a jQuery dialog box?

I have created a form that displays multiple links leading to basic documents such as pdf and docs. Each link has an accompanying href link on the right side, which opens a jQuery dialog with details specific to that particular link. These details includ ...

What is the best way to arrange list items in this manner?

I am facing challenges with aligning elements properly on the navigation bar. I would like the words (home, players, about, contact) to be vertically centered in relation to the heart logo. Here is how it currently appears: This is how I want it to look ...

My form does not trigger a 'Save Password' prompt in any browser

I have been struggling to get the browser to prompt a 'Save Password' while using the form below. Despite trying various solutions from different forums, nothing seems to work. Can anyone point out where I might be going wrong? Any help would be ...

What could be causing the combined width of the children to exceed that of the parent?

Encountered an issue while trying to create a horizontal scroll using inline-flex. Unable to add padding around the scrolling div due to inconsistencies in child widths causing unexpected behavior. To further investigate and understand the problem, visit ...

"Flashes of canvas in constant motion between animated scenes

I have a practical exercise to do for school, but I am very new to HTML/JS. The issue I am facing is that my canvas is flashing, like it erases one image and then quickly displays another. I want both images to be displayed at the same time. Here is the co ...

Can you please adjust the image to the right side?

I'm having trouble aligning the image to the left in my code. It always seems to leave a margin on the sides that I can't figure out how to get rid of. https://i.sstatic.net/kKwII.jpg This is the snippet of my code: <section class="conta ...

Tips for aligning 'textarea' and 'a' (button) tags in a single row

<div class="row"> <a class="btn btn btn-success btn-block"><i class="fa fa-thumbs-up"></i>Ok</a> </div> <div class="row"> <textarea name="textareaAxs" ></textarea> <a class="btn btn btn- ...

Is it possible for a bootstrap carousel to rotate carousel items belonging to two separate carousel identifiers?

My Bootstrap 4 carousel setup is as follows: <div class="col-12"> <a class="carousel-control-prev text-dark" href="#myCarousel" role="button" data-slide="prev"> <span class=" ...

"Jquery with 3 buttons for toggling on and off individually, as well

There are 3 buttons available: button 1, button 2, and button 3. Button 1 toggles the show/hide functionality of the left side, button 2 does the same for the right side, and button 3 affects both sides simultaneously. What is the best approach to achieve ...

Is it time to ditch Internet Explorer for EDGE?

Have you ever noticed that when attempting to access the stackoverflow website on Internet Explorer, the tab mysteriously closes and Microsoft Edge opens with stackoverflow loaded? What is the secret behind this strange phenomenon on stackoverflow's ...

Tips for creating a seamless Bootstrap collapse effect

I have noticed a slight flicker in the content collapse when using this code. Is there a way to make it collapse more smoothly? <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script ...

Display the JSON outcome with console.logging

As I delve into the world of APIs, JSON, and JQuery, I've encountered a roadblock. How can I retrieve the following information, "name: The Old Mill Cafe," and log it to the console from my JQuery call? Below is my current code snippet: $(document). ...

Storing information in a file with jQuery

Currently, I am in the process of creating a website with jquery that allows me to easily edit images. I have implemented some interactive buttons for users to input information (such as "0" or "1") via their browsers. However, my main challenge lies in s ...

Streaming videos using Flask with a custom template

After successfully implementing the DWA path planning algorithm in C with Python bindings, I have decided to create a web application demo. The concept involves a "robot" following the mouse using DWA, while allowing users to draw walls for objects. My ini ...