Vue.js Passing data to content scope

Question

I'm trying to pass data into inserted (transcluded) template.

In Angular, this would be done by modifying scope passed into transcludeFn, but I can't figure out how to do it in Vue since it simplifies things (I LOVE IT) and takes care of transclusion internally.

I've tried using v-with directive on <content> but it seems like it doesn't work for it.

Simplified component source

<template>

    <div>
        <ul>
            <li v-repeat="tab: tabs">
                <content></content>
            </li>
        </ul>
    </div>

</template>

<script>
module.exports = {

    data: function () {
        return {

            tabs: [{ name: 'First' }, { name: 'Second' }]

        };
    }

};
</script>

Usage

<div v-component="my-component">
    <pre>{{ $data | json }}</pre>
</div>

Expected output

<div>
    <ul>
        <li>
            <pre>{ "name": "First" }</pre>
            <pre>{ "name": "Second" }</pre>
        </li>
    </ul>
</div>

Actual output

<div>
    <ul>
        <li>
            <pre>{"tabs": [{ "name": "First" }, { "name": "Second" }]}</pre>
            <pre>{"tabs": [{ "name": "First" }, { "name": "Second" }]}</pre>
        </li>
    </ul>
</div>

oevgeny · Accepted Answer · 2015-06-12 08:51:32Z

2

This will not work because transcluded content compiles in the parent scope.

Also now you are using v0.11.x version of Vue. Try to use v0.12.

You can pass data to the component this way:

new Vue({
  el: "#app",
  data: {
    tabs: [{ name: 'First' }, { name: 'Second' }]
  },
  components: {
    'my-comp': {
      template: "#mycomp",
      props: ['tabs'],
    }
  }
})

<template id="mycomp">
    <div>
        <ul>
            <li v-repeat="tab: tabs">
                <pre>{{tab | json }}</pre>
            </li>
        </ul>
    </div>
</template>

<div id="app">
   <my-comp tabs="{{tabs}}" />  
</div>
<script src="https://rawgit.com/yyx990803/vue/dev/dist/vue.js"></script>

answered Jun 12, 2015 at 8:51

oevgeny

211 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

Igor Pantović Over a year ago

Hey @oevgeny, thanks for the answer! This won't work for me unfortunately as I want to reuse this component on multiple places with different template. Only the component "wrapping" markup is the same, template must be provided by end-user. Basically: I have ton of bootstrap markup needed for tabs. I just want user to provide some array of data, let him declare "card" template and "card body" template and I'll use it by feeding the data to those templates.

Collectives™ on Stack Overflow

Vue.js Passing data to content scope

Simplified component source

Usage

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Simplified component source

Usage

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related