EmbeddedItem is not working
Opened this issue · 6 comments
<at :members="items" name-key="name" v-model="temp.test">
<span slot="embeddedItem" slot-scope="s">
<span class="tag" v-text="s.current.name "></span>
</span>
<div class="editor" contenteditable></div>
</at>
@prashanth4 is there any error threw or just no effect?
Just no effect and also model value is also not working.
I've met the question as you too. Have you solved it ?
It needs a wrapping element to work. Vue-At uses the first child of the slot's root node. In @prashanth4's code the first child of the root node is an empty TEXT node.
To fix, simply add a wrapping element. It can be anything but I feel <span>
is appropriate:
<template>
<section>
<at :members="items" name-key="name" v-model="temp.test">
<template slot="embeddedItem" slot-scope="s">
<!-- Wrap your element markup to fix -->
<span>
<span class="tag" v-text="s.current.name"></span>
</span>
</template>
<div class="editor" contenteditable></div>
</at>
</section>
</template>
<script>
export default {
name: "app",
data() {
return {
temp: {
test: ""
},
items: [{ name: "foo" }, { name: "bar" }, { name: "baz" }]
};
}
};
</script>
FWIW, the install instructions installed 2.3.2 for me, which has this issue.
Updating to the latest (2.5.0-beta.2) fixed it.
@lesharris thanks for your comment!!
@johnsusek oops, it did !! Didn't remember to clarify in the docs that
some new features require the latest beta (2.5.0-beta.2 for now)
Btw, is was an interesting behavior of npm, see below:
npm i vue-at # => 2.5.0-beta.2
npm i vue-at@latest # => 2.5.0-beta.2
npm i vue-at@2.x # => 2.3.2 , which is documented nbow
npm i vue-at@2.5.x # => error