Closed kerlw closed 2 years ago
My commit solved two problems when using fragment in v-for:
I found a bug, argument 'ref' of insertBefore might be null, so I added a judgement
I tested this. I put a fragment with 2 list items along with a regular component in a ul element. I rendered the list with v-for and it worked as I expected. It even fixed my error "Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this mode." in #32 .
I for one suggest that this be pulled.
Just be sure to update browserslist. npm i --save browserslist. The current commit says that caniuse-lite is outdated forever.
I found this solution has a critical defect in complex hierarchical structure I'm working on another two solutions:
nested fragment may cause excetions when Vue update vnodes
I found in latest Vue, fragment could be implemented by using functional component:
Vue.component('fragment', {
functional: true,
render: function (h, context) {
let dom = h('div', context.data, context.children)
return dom.children || []
}
});
@kerlw could you provide a working jsfiddle ? I tried : https://jsfiddle.net/bqfoky5u/1/ but it won't work.
I'm so sorry, I'v made a stupid mistake. This solution only works in our project, because each component would be converted by our converter, and wrapped by a
So, here is the old one fragment I've modified, trying to solve nested fragment problems, not solved perfectly, but does work in most situation: https://gist.github.com/kerlw/e8579089f6dc8fa48ad9089772b5255e
I'v commit my code to the pull request, I hope it would help you.
please merge :)
Tried using your version @kerlw and I get a freeze undefined.
@shaniqwa did you use the fork without problem ?
There is a pure HTML solution for rendering a tree like a table using css properties table
, table-row
and table-cell
mixed with root elements. See this fiddle for the example.
Hello,
@kerlw
thank you, that works if you add
const freeze = (object, property, value) => {
Object.defineProperty(object, property, {
configurable: true,
get () { return value },
set (v) { console.warn(tried to set frozen property ${property} with ${v}
) }
})
}
const unfreeze = (object, property, value = null) => { Object.defineProperty(object, property, { configurable: true, writable: true, value: value }) }
at the root of index.js
Thank again, Martin
Any update for this pull request
This PR needs to be cleaned up, there shouldn't be all this stuff in index.js, indentation is also apocalyptic
I need this fixed also. When will be merged?
@yushko2015 as @Tofandel mentioned the PR doesn't look like fitting. You can fork the fork and propose your PR on the side?
That sounds useful. I wonder if there's any side effects... I'll try to review it soon but i'm honestly overloaded with work :/ if someone else wants to try/test it, please also try.