question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Prevent Lib from manipulating the DOM (Vue.js)

See original GitHub issue

Is there a way to prevent the lib from manipulating the DOM? I use it in a VueJS component and adjust my data array in the sortablejs onSort function. My list will be rendered based on my data array so it’s a little but dump to do with with this lib too.

And I have some problems with the manipulated DOM by this lib. See more here: https://github.com/yyx990803/vue/issues/1272

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Reactions:3
  • Comments:8

github_iconTop GitHub Comments

6reactions
onefriendadaycommented, Oct 24, 2015

You can use Sortable with vuejs. Remove the dragged element and rebuild your data array:

Sortable.create(this.el, {
    animation: 150,
    handle: '.uk-nestable-handle',
    onEnd: function (e) {
        // Remove the dragged item from dom
        e.item.remove()

        // Clone container
        var clone = _a.clone(self._scope.model[self._scope.$key])
        self._scope.model[self._scope.$key] = []

        // Move to new position
        var swappedEl = clone.splice(e.oldIndex, 1)[0]
        clone.splice(e.newIndex, 0, swappedEl)

        // On next Tick update with clone
        self._scope.$nextTick(function() {
            self._scope.model[self._scope.$key] = clone
        })
    }
})
5reactions
PhillippOhlandtcommented, Sep 8, 2015

I just need the drag and drop feature and the info which items was changed. VueJS will do the DOM manipulation then.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Vue.js dynamic changes to DOM by external library (jQuery ...
Vue does have some limited ability to manipulate the dom directly through ref attribute, but it's reccomended to avoid it when possible. The...
Read more >
Vue Tip: Avoid Directly DOM Manipulation - Michael Hoffmann
It is a no-go to manipulate the DOM in Vue.js directly. Instead, you should use the "ref" attribute.
Read more >
How to Target the DOM in Vue - Telerik
In jQuery , you would select an element by targeting it with the $() function, and that would open up a wide variety...
Read more >
Tips for Vue Developers: Avoid directly manipulating the DOM
I was working with a student today on a final capstone project and they were having some issues with data binding.
Read more >
Event Handling - Vue.js
We can use the v-on directive, which we typically shorten to the @ symbol, to listen to DOM events and run some JavaScript...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found