Children components in Vue can dynamically modify data in their parent components by using the

Here's how the structure of my apps looks:

App
    Column Component
        Task Component
        Task Component
        Task Component
    Column Component
        Task Component
        Task Component
    Column Component
    Column Component

https://i.sstatic.net/gHBly.png

Each column contains a <draggable> component that surrounds the tasks. At the App level, there is a data object with different columns and each column has its own set of tasks.

data: function() {
    return {
        columns: {
            new: [
                {
                    ID: 1,
                    title: 'The thing',
                    description: 'Prepare a proposal for facade'
                },
                {
                    ID: 2,
                    title: 'The thing 2',
                    description: 'Prepare a proposal for facade'
                },
                {
                    ID: 3,
                    title: 'The thing 3',
                    description: 'Prepare a proposal for facade'
                }
            ],
            inProgress: [
                {
                    ID: 4,
                    title: 'The thing 4',
                    description: 'Prepare a proposal for facade Store Opening Process (DEMO)'
                },
                {
                    ID: 5,
                    title: 'The thing 5',
                    description: 'Prepare a proposal for facade Store Opening Process (DEMO)'
                }
            ],
            done: [],
            onHold: []
        }
    }
}

I iterate over the columns and bind the object to the component:

<kool-column
    v-for="column"
    v-bind="colum"
></kool-column>

The Kool Column component:

<script id="kool-column-template" type="text/x-template">
    <div>
        <div>
            {{ column.name }} ({{ column.cards.length }})
        </div>
        <div>
            <draggable v-model="cards" group="columnkool">
                <div v-for="card in cards" :key="card.ID">
                    <kool-card v-bind="card"></kool-card>
                </div>
            </draggable>
        </div>
    </div>
</script>

<script>
    $(document).ready(function() {
        Vue.component('koolColumn', {
            template: '#kool-column-template',
            props: {
                ID: {
                    type: Number,
                    required: true
                },
                name: {
                    type: String,
                    required: true
                },
                cards: {
                    type: Array,
                    default: function() { return []; }
                }
            }
        });
    });
</script>

While dragging and dropping the cards, an error/warning associated with Vue is triggered:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "cards"

One possible solution I considered involves...

  1. Option #1...
  2. Option #2...
  3. Option #3...

Should I stick with option #2? Or is there a better way to handle the double data binding issue when not fully controlling the list updates?

Answer №1

Vue drag-and-drop offers two different methods for handling data:

  1. Utilizing v-model="array", which is immutable - any changes to item order will result in a new copy.
  2. Using :list="array", this method maintains the same reference and utilizes splice to update the array.

For your scenario, it is recommended to use :list="array", which should work effectively.

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

Can a variable be initialized with a concealed or additional argument?

After just 2 weeks of coding, I'm struggling to find information on how to initialize a variable with an extra argument in a recursive function call. Is this even possible? And if it is, are there any scenarios where it's considered best practice ...

Navigating smoothly through different URLs to a single state using Angular's UI-Router

I recently started using angular's ui-router and I am looking for a way to configure multiple URLs to point to the same state. For instance: /orgs/12354/overview // should show the same content as /org/overview Currently, my $state provider is set u ...

Why isn't my Vue.js3 table being updated after using axios asynchronously?

After conducting my research, it appears that I have followed all the correct steps. However, I am unable to identify why my table is not updating. Initially, I create a new company and proceed to the overview, but nothing is being displayed. While checki ...

using jquery ajax to assign an image to an image control

I am struggling to display an image from a base64 string result using the image control. I tried $('Image1').attr(); but it's not working. Any assistance would be greatly appreciated. $.ajax({ async: false, type: "POST", url: "PostDat ...

Attempting to minimize the repetition of code in Redux by implementing some utility functions

Is there a potential issue with the method I'm attempting in this URL: The concept involves altering only the actions file when introducing a new action. One improvement I am considering is recursively merging the status passed from the actions with ...

Error: doc.data().updatedAt?.toMillis function is not defined in this context (NextJs)

I encountered an error message while trying to access Firestore documents using the useCollection hook. TypeError: doc.data(...)?.updatedAt?.toMillis is not a function Here is my implementation of the useCollection Hook: export const useCollection = (c, q ...

Generating unique names based on input from users

We are working with an array containing names and an input field where users can enter a string to receive name suggestions. The array includes names like Alex and Anna, and when the user types "a," we want to suggest these names. Below is the code snippet ...

I sought out a way to incorporate a hyperlink within the Material Data Grid

Take a look at this sample data grid for reference: here. I added an image like this: see here. However, I couldn't create a clickable link. ...

Unable to access Bootstrap dropdown menu after initial ajax form submission

I am encountering an issue with a dropdown menu on my webpage, specifically within the manager.php file. Please excuse any formatting discrepancies as I am using Bootstrap: <!-- Bootstrap --> <script type="text/javascript" src="https://netdna ...

[JSP Tutorial] Step-by-step guide to create a basic sorting algorithm

Hello, I need assistance with coding a list of years that are displayed as shown below: YEAR ==== 2014 2013 2012 Here is the corresponding code snippet: <script type="text/javascript"> jQuery(document).ready(function() { }); </script> ... ...

The code is anticipating a declaration or statement in JavaScript/TypeScript

Currently, I am working with Typescript 1.7 and React 0.14 using the new ES6 syntax. Specifically, I am encountering an issue with destructuring assignment, which is explained in detail here. let x0, x1, y0, y1; if(this.props.viewport) { {x0, x1, y0, ...

Techniques for navigating unidentified JSON structures using JavaScript

Currently, I am faced with the challenge of parsing the given data: { 'unknown-value': { name: 'AB', id: 'BLUE' }, 'unknown-value': { name: 'AC', id: 'PURPLE' } } My objec ...

Utilizing ng-model with invisible input field

UPDATED: Experimenting with a new approach: <input class="form-check-input deflog-check" type="checkbox" ngTrueValue = "1" ngFalseValue = "0" ng-value="chk_mail"> Now trying to retrieve the value in AngularJS like so: object2Edit.notification = N ...

Maintaining the order of elements in Angular's insertion process

I am currently facing an issue with my HTML fragment that iterates over a key and value collection. Everything works perfectly when I insert values into an object and iterate through it using the HTML fragment. However, in order to maintain a specific key ...

Preventing special characters in an HTML text box: Tips and tricks

I'm facing an issue with my HTML form where special characters like ! or ^ or £ in the password text box are being converted to different characters on my server, such as %. Is there a way to ensure that the exact same characters entered by the user ...

What is the best method for returning the AJAX outcome to the JSP page?

Using AJAX, I am able to post data from my JSP page to my servlet. $.ajax({ url: 'myServlet?action=FEP', type: 'post', data: {machine: i, name: txt}, // where i and txt hold certain values success: f ...

Display confirmation dialog after saving data, prior to redirecting back to the same page or refreshing

On my aspx page, there is a feature that allows users to edit data in a database record. Once the changes are saved, the user is redirected back to the same page. What I am trying to achieve is a popup message saying "Record saved." along with an "OK" butt ...

Creating camera shake in Three.js: A beginner's guide

I've been searching for hours online and I can't seem to figure this out. Is there any way to achieve this? If so, please share the steps with me. I found a code snippet but I'm unsure how to implement it properly. Can someone guide me on ho ...

Connect Promise.all() with an array of identification numbers

I'm fairly new to working with Promises and I have a question regarding linking the results of `Promises.all()` to unique IDs for each promise once they resolve. Currently, I am making requests to a remote server and retrieving data for each request. ...

Using express to efficiently redirect from a search form?

As a newcomer to this, my goal is to initiate an external API call after entering a term in a search form and then migrating to a new page displaying the outcomes. Here's what I have accomplished thus far. const express = require('express') ...