Issues with Vue Sortable functionality may be causing complications

Currently, I am utilizing vue-sortable and draggable. Although I am able to drag an item above and change its position, the JSON data does not refresh. Here is the existing list:

<draggable v-model="this.$store.getters.getDocument.getDocumentAttributes">
    <div class="panel panel-primary" v-for="(value, key, index) in this.$store.getters.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>

The list is fetched from Vuex store and although I can rearrange the elements visually, the underlying JSON data remains unchanged. How can I ensure that the JSON data gets updated as well?

javascriptjsonvue.jsvuejs2

Answer №1

The v-model you are using is 

this.$store.getters.getDocument.getDocumentAttributes
. This utilizes vuex's getter functionality, which is designed purely for retrieving data and cannot be used to modify data.

For more information on how to utilize the sortable library with vuex, please refer to the documentation: https://github.com/SortableJS/Vue.Draggable#with-vuex

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

When using JavaScript with React, setting a value after the onBlur event can result in users having to click

In my React form, I have an input button with an onBlur event that sets the value to a useState property. However, after the onBlur event is triggered, the user has to click the button twice to focus on it properly. It seems like the page needs time to pro ...

javascriptreactjs

Passing array data from JavaScript to PHP using POST method in Joomla 3.x

Looking for a way to send an array from JavaScript to a Joomla 3.x PHP file? var data = ['foo', 'bar']; $.post('index.php?option=component&view=componentview&Itemid=123&tmpl=component&layout=xlsx', {'xls ...

javascriptphpjqueryjoomlajoomla3.0

Is there a way for me to extract parameters from a JSON object?

Looking at this json data { "city": { "id": 1851632, "name": "Shuzenji", "coord": { "lon": 138.933334, "lat": 34.966671 }, "country": "JP", "cod": "200", "message": 0.0045 ...

javajsonopenweathermap

Gather a combination of key-value pairs from JSONArrays in Java and consolidate them into a single JSONArray

I am working on a task involving JSONObject, with two JSONArray to extract key and value pairs and return them as a new JSONArray: The first JSONArray contains two objects shown below: [{"name": "John", "id": "1"}, ...

javajson

MUI: Autocomplete received an invalid value. None of the options correspond to the value of `0`

Currently, I am utilizing the MUI autocomplete feature in conjunction with react-hook-form. I have meticulously followed the guidance provided in this insightful response. ControlledAutoComplete.jsx import { Autocomplete, TextField } from "@mui/mater ...

javascriptreactjsmaterial-uireact-hook-form

JavaScript Function Not Executed in Bottom Section

I've implemented AngularJS includes in my project. Below is the code snippet from my index.html: <!DOCTYPE html> <html ng-app=""> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> ...

javascriptjqueryhtmlcssangularjs

Utilizing Spring Boot to create a RESTful application that seamlessly transforms CSV data into JSON format

My goal is to develop a Restful application with Spring Boot that can convert CSV items into JSON objects. I am seeking insight on the most effective approach to achieve this. I'm interested in exploring whether CSV data or items can be passed throug ...

javajsonspring-bootrestjackson

Is it possible to attach a mouse click event to styled text?

Is there a way to specify a mouse click event for an element with a decoration applied to the text, matched with regex? The option to specify a hoverMessage is available, but I would like to find a way to execute a function based on which decorated text ...

javascriptvisual-studio-codevscode-extensions

Learning the process of using JavaScript to extract data from a JSON file containing arrays

Currently grappling with the challenge of reading a JSON file using JavaScript. Unsure if my JSON file is in the correct format with arrays, but here is what I have. [ { "passageNumber":"2.3.1", "title":"Inside and out: A bronze ...

javascriptjqueryhtmljsonjquery-plugins

Error Alert: The combination of React and Redux-router is causing an unexpected issue. The reducer is expected to be a

Whenever I make a coding mistake and encounter a runtime error, the error reporting is not very helpful. For example, when I mistakenly typed Date() instead of new Date(), the error message I received was... Uncaught Error: Expected the reducer to be a fu ...

javascriptreactjsreact-routerredux

Troubleshooting problem in AngularJS: $http request causing DOM to not update when calling jQuery function

I'm encountering an issue where the DOM is not updating when I make a $http request in a jQuery function call. Please take a look at the Plunker In my code script.js, for testing purposes, I have $scope.components defined both globally and within a ...

javascriptangularjsjson

Creating a SVG polygon using an array of points in JavaScript

Consider the following array containing points: arr = [ [ 0,0 ], [ 50,50 ], [ 25,25 ], ]; I would like to create an SVG polygon using this array. Initially, I thought the code below would work, but it doesn't: <polygo ...

javascriptarrayshtmlsvg

What is the importance of utilizing clearInterval to restart the timer in ReactJS?

Consider the code snippet provided below: useEffect(() => { const interval = setInterval(() => { setSeconds(seconds => seconds + 1); }, 1000); return () => clearInterval(interval); }, []); What is the purpose of returning ...

javascriptreactjs

Disabling click events on a span tag in Angular 6: A step-by-step guide

Is there a way to disable the click event for deleting hours with the 'X' symbol based on a condition? Thank you in advance. <table navigatable class="<some_class>"> <tbody> <tr *ngFor="let item of ...

javascriptcssangularhtml-table

When a JSON object is handled as a string

The JSON returned from my Ajax call looks like this: returnedData = "[ { id: 1, firstName: 'John', lastName: 'Smith', address: '123 Spa Road', city: 'London', orders: [ { product: ...

javascriptjson

Trigger the activation of an input field upon clicking an image labeled "edit"

I am currently developing a website where administrators have access to a dashboard page that displays a list of users. I am looking to implement a feature that allows admins to change the roles of other users directly from the same table row. Below is th ...

javascriptphphtmlaide

JavaScript string representing the actual value of a string

In order to reliably extract string literals from a JavaScript string, I need to create a function, let's name it f. Here are some examples: f('hello world') //-> 'hello world' (or "hello world") f('hello "world"') / ...

javascriptnode.js

JavaScript issue: TypeError - Information.map is not a function. Learn how to properly use .map method

Currently, I am learning how to use CRUD in React with Express and Node. I have successfully inserted data into the database, but I encountered an error when trying to represent the data using .map. You can see the issue with <Input onClick="{getCR ...

javascriptreactjs

Node.js publication date displaying incorrectly

When I post a date to elasticsearch, I typically use Date.now() var unixtime = Date.now(); The output usually looks something like this: 1373508091156 To convert it, I then use the following code: var date = new Date(unixtime*1000); After conversion, ...

javascriptnode.jsdate

Sending a `refresh` to a Context

I'm struggling to pass a refetch function from a useQuery() hook into a context in order to call it within the context. I've been facing issues with type mismatches, and sometimes the app crashes with an error saying that refetch() is not a funct ...

javascriptreactjstypescriptgraphql