EmbeddedItem is not working

[prashanth4]

<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>

[fritx]

@prashanth4 is there any error threw or just no effect?

[prashanth4]

Just no effect and also model value is also not working.

[weiRongLady]

I've met the question as you too. Have you solved it ?

[lesharris]

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>

[johnsusek]

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.

[fritx]

@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