The issue with updating the JSON data in VueJS when using draggable/sortable functionality

Hey everyone, I'm currently utilizing this library for sorting elements. I have a simple sortable setup where I'm trying to rearrange a three-element array by dragging. I can successfully change the positions, but the issue arises when my JSON array doesn't reflect the updated order.

This is what I'm doing:

My list:

<draggable v-model="getDocumentAttributes">
    <div v-if="value.key != 'Document'" class="panel panel-primary" v-for="(value, key, index) in getDocumentAttributes">
        <div class="panel-body quote">
            <span @click="removeSection(index,key)" class="pull-right glyphicon glyphicon-remove text-info"></span>
            <p>{{value.key}}</p>
        </div>
    </div>
</draggable>

My computed property that listens to Vuex getter:

getDocumentAttributes(){
    return this.$store.getters.getDocumentAttributes;
}

Finally, here is my list and getter function on the Vuex side:

state: {
    document: { "id": "0", "attributes": [] },

[...]

getDocumentAttributes: (state) => {
    return state.document.attributes;
},

Answer №1

Utilize the data available locally within the vue component, as this will be impacted by vue-draggable.

Once again, it is important to note that you can only alter a vuex-state using mutations, and not through getters, computed attributes, or actions. In the plugin's readme, it is clearly stated that computed properties are read-only. You can find more information on how to use them here: https://github.com/SortableJS/Vue.Draggable#with-vuex

Answer №2

fetchDocumentDetails: {
    get () {
        return this.$store.getters.fetchDocumentDetails;
    }
    set (data) {
        this.$store.commit('UPDATE.DOCUMENT', data)
    }
}

Reiner explained that computed properties are usually read-only. Here is a method to override that default behavior.

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

Guide on dragging and dropping without losing the item, allowing for continuous drag and drop functionality

function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementB ...

What is the best way to store JSON data in Mongoose database?

I have some json data that I need to store in a mongoose database, but I'm struggling with how to structure my mongoose schema. data: { 'posts[0][commentId]': '0', 'posts[0][id]': '1', 'posts[0][post ...

The user values in jQuery alert function are correct, but the saveorupdate function fails to save null values in the database table

While using the alert function in jQuery, the user input values are alerted correctly, but for some reason they are being stored as null in the database table. Can anyone help me identify what might be causing this issue or what I might be doing wrong? I& ...

The Iframe on the webpage is automatically refreshing once a submission is made, which is not a feature present in the original version of

Within my newsletter.html file, I have set up a newsletter where users can submit their email addresses, which are then stored in my JSON file. In homepage.html, I embedded an iframe from the newsletter.html file. Everything seems to be working fine, exce ...

Using headers in the fetch api results in a 405 Method Not Allowed error

I am facing an issue while attempting to make an ajax request using fetch. The response I receive is a 405 (Method Not Allowed) error. Here is how I am trying to execute it: fetch(url, { method: 'get', headers: { 'Game-Toke ...

Tips for sending URL parameters with router-link in Vue.js

I am facing an issue while trying to make a request to '/trackers/:id/Update' or '/trackers/:id/Delete' from my Trackers page in VueJS. The problem lies in the fact that my id is stored in a data object called items, which I fetch from ...

Strategies for effectively validating email addresses in Laravel 10 and Vue 3

Currently, my application is utilizing Laravel 10 with Vue 3. It is hosted on a server as a Web App, with a HTTP URL. However, the hosting provider's support team has informed me that all requests are automatically redirected to HTTPS due to the SSL ...

Error: The Vue object is not recognized in the Heroku Laravel framework

Greetings! I have successfully completed my Laravel project locally and everything is working well. I am utilizing Vue.js and jQuery in the project. However, when I deployed my project to Heroku, I encountered some errors. Specifically, I am running into a ...

Display webpage content in an Iframe using Javascript after PHP code has been executed

Despite researching keywords like PHP // Javascript // Load // URL online, I'm still struggling to fully grasp the concepts. Real-life case studies have been helpful, but I must admit that I'm feeling a bit overwhelmed at the moment. I created a ...

Is there a more efficient method for streamlining the Express-Validator middleware in a separate file

In my current project, there is a lot of validation required using Express-Validator. In each file, I find myself repeating the same validation code: //Validation and Sanitizing Rules const validationRules = [ param('tab').isString().isLength({ ...

Angular 2 keypress validation: Ensuring data integrity through real-time input verification

I am currently facing an issue with implementing number validation in my Angular2 project. I am struggling to replicate the JavaScript code provided below. Here is the HTML: <input type="text" class="textfield" value="" id="extra7" name="extra7" onkeyp ...

Having trouble making updates to a MongoDB document through Node.js

I am working on the development of an online course platform and facing an issue while adding new video lectures to a specific course. After creating a course, any attempt to add new content triggers an update request, even when adding video lectures that ...

JavaScript's Ajax POST request to PHP is not functioning as expected

My current code setup involves handling $_GET[] requests on the products.php page by passing them to get_data_products.php via an ajax POST request. The data retrieved from get_data_products.php is then displayed accordingly. PHP if(isset($_GET['cat ...

multiple simultaneous ajax calls being triggered

I am currently working on creating 4 cascading dropdowns, where the options in each dropdown repopulate based on the selection made in the previous one. To achieve this functionality, I decided to implement an Ajax call. The call takes the parameters, det ...

Using JWT for authentication in Vue.js

Currently, I am developing a single-page application using Vue.js and vue-router. My focus is on implementing authorization/authentication using JWT. The backend (API endpoint) has been configured to issue a token upon login and verify the required header ...

Align the position of two divs with matching IDs (#thumb-1 equals #project-1) using JavaScript or jQuery, but without the use of jQuery UI

I am currently working on creating a portfolio gallery and have put together the following HTML structure: <article class="work-gallery"> <ul> <li id="project-1"><img src="http://placehold.it/50x00"></li> ...

Tips for testing an API that relies on an external library such as "<script src="http://stripe[...]"

Currently, I am working on unit testing an API call to verify it has been executed with the correct properties. The API call is reliant on Stripe's external library that is connected to the window through index.html src="http://stripe[...]". However, ...

ng-class: Issue detected - The symbol '-' is positioned at column {2}

I'm having an issue with ng-class. I need to add a disabled state class if the role has admin privileges, but I keep getting an error. Here is the HTML: <label class="toggle modal-label-box" ng-class="{state-disabled: checkCanModify()}"> &l ...

Tips for displaying dynamic data using innerHTML

Recently, I set out to implement an infinite scroll feature in Angular 2 using JavaScript code (even though it may seem a bit unusual to use JavaScript for this purpose, it's actually working perfectly). Initially, I was able to create an infinitely s ...

"Implementing a component that triggers an event when using mapGetters on

After loading my component, I proceed to execute the following: created() { this.$store.dispatch('messages/connect'); this.$store.dispatch('messages/fetchAllMessages'); // this.$emit('set-recipient', this.chats[0]); }, ...