javascript - vuejs - <slot> in repeating table row - Stack Overflow

admin管理员组

文章数量:1025507

im using this solution to set table cells in a vuejs ponent dynamically:

This works just with Vue.js v1.0.10 but not with the current version v1.0.26.

Jsfiddle: /

I'm trying to get the following markup (the item object should be available in the ponent)

<div id="vue">
    <basic-table>
        <table-cell>{{ item.id }}</table-cell>
        <table-cell>{{ item.title }}</table-cell>
    </basic-table>
</div>

Vue.js ponent (more at the fiddle)

Vueponent('basic-table', {
    template: '<table><tbody><tr v-for="item in collection" v-slot></tr></tbody></table>',
    data: function () {
        return {
            collection: [
                {id: 1, title: 'Vue'},
                {id: 2, title: 'Vue 2'},
                {id: 3, title: 'Vue 3'},
                {id: 4, title: 'Vue 4'},
            ]
        }
    }
});

Anyone knows how to solve this?

Edit Didnt found a working solution yet - still searching..

im using this solution to set table cells in a vuejs ponent dynamically:

http://forum.vuejs/topic/526/repeating-table-row-with-slot

This works just with Vue.js v1.0.10 but not with the current version v1.0.26.

Jsfiddle: https://jsfiddle/peL8fuz3/

I'm trying to get the following markup (the item object should be available in the ponent)

<div id="vue">
    <basic-table>
        <table-cell>{{ item.id }}</table-cell>
        <table-cell>{{ item.title }}</table-cell>
    </basic-table>
</div>

Vue.js ponent (more at the fiddle)

Vue.ponent('basic-table', {
    template: '<table><tbody><tr v-for="item in collection" v-slot></tr></tbody></table>',
    data: function () {
        return {
            collection: [
                {id: 1, title: 'Vue'},
                {id: 2, title: 'Vue 2'},
                {id: 3, title: 'Vue 3'},
                {id: 4, title: 'Vue 4'},
            ]
        }
    }
});

Anyone knows how to solve this?

Edit Didnt found a working solution yet - still searching..

• javascript
• ponents
• vue.js
• vue-ponent

Share Improve this question Follow edited Sep 27, 2016 at 9:11 Aaroniker asked Aug 16, 2016 at 8:56 AaronikerAaroniker 1901212 silver badges3232 bronze badges 3

• You could just not use a slot and pass the cell data to the table-cell ponent as a prop. In the current version of vue I think the slot directive is just slot not v-slot but both might be accepted – vbranden Commented Aug 16, 2016 at 13:29
• check the jsfiddle - there is a slot - directive defined :) – Aaroniker Commented Aug 16, 2016 at 13:37
• The template in VueJS is actually not HTML, it is representing of a render function wrapped into syntax sugar which is very similar to a real HTML. That's why you must have td inside tr and li inside ul. – Piterden Commented Oct 3, 2018 at 4:07

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3 +200

That's quite hard to find out what exactly gone wrong, but that code was broken since v1.0.18. I was unable to dig deeper to eliminate exact mit but there was a couple of optimizations made which potentially could affect $context._content rendering.

Solution

However you can solve your problem by changing

var raw = host.$options._content; 

to

var raw = host._context._directives.filter(function (value) {
    return !(value.Component === undefined);
})[0].el;

That change is patible with v1.0.26. You can find fixed code here.

Disclaimer

I was failed to find a way to achieve the same result using public API. So this solution is also relies on non-public API thus may break in future release.

Aaron, my answer probably is not satisfied for your question but why don't you make it simple as the following code but you have to use directive and all of this stuff ?

I am still figuring why your solution is working on the previous version, not the current version. :D

new Vue({
  el: '#vue',
  data: {
    items: [{
      id: 1,
      title: 'Vue'
    }, {
      id: 2,
      title: 'Vue 2'
    }, {
      id: 3,
      title: 'Vue 3'
    }, {
      id: 4,
      title: 'Vue 4'
    }, ]
  }
});

<script src="https://cdnjs.cloudflare./ajax/libs/vue/1.0.26/vue.min.js"></script>
<table border="1" class="table" id="vue">
  <tbody>
    <tr v-for="item in items">
      <td>{{item.id}}</td>
      <td>{{item.title}}</td>
    </tr>
  </tbody>
</table>

im using this solution to set table cells in a vuejs ponent dynamically:

This works just with Vue.js v1.0.10 but not with the current version v1.0.26.

Jsfiddle: /

I'm trying to get the following markup (the item object should be available in the ponent)

<div id="vue">
    <basic-table>
        <table-cell>{{ item.id }}</table-cell>
        <table-cell>{{ item.title }}</table-cell>
    </basic-table>
</div>

Vue.js ponent (more at the fiddle)

Vueponent('basic-table', {
    template: '<table><tbody><tr v-for="item in collection" v-slot></tr></tbody></table>',
    data: function () {
        return {
            collection: [
                {id: 1, title: 'Vue'},
                {id: 2, title: 'Vue 2'},
                {id: 3, title: 'Vue 3'},
                {id: 4, title: 'Vue 4'},
            ]
        }
    }
});

Anyone knows how to solve this?

Edit Didnt found a working solution yet - still searching..

im using this solution to set table cells in a vuejs ponent dynamically:

http://forum.vuejs/topic/526/repeating-table-row-with-slot

This works just with Vue.js v1.0.10 but not with the current version v1.0.26.

Jsfiddle: https://jsfiddle/peL8fuz3/

I'm trying to get the following markup (the item object should be available in the ponent)

<div id="vue">
    <basic-table>
        <table-cell>{{ item.id }}</table-cell>
        <table-cell>{{ item.title }}</table-cell>
    </basic-table>
</div>

Vue.js ponent (more at the fiddle)

Vue.ponent('basic-table', {
    template: '<table><tbody><tr v-for="item in collection" v-slot></tr></tbody></table>',
    data: function () {
        return {
            collection: [
                {id: 1, title: 'Vue'},
                {id: 2, title: 'Vue 2'},
                {id: 3, title: 'Vue 3'},
                {id: 4, title: 'Vue 4'},
            ]
        }
    }
});

Anyone knows how to solve this?

Edit Didnt found a working solution yet - still searching..

• javascript
• ponents
• vue.js
• vue-ponent

Share Improve this question Follow edited Sep 27, 2016 at 9:11 Aaroniker asked Aug 16, 2016 at 8:56 AaronikerAaroniker 1901212 silver badges3232 bronze badges 3

• You could just not use a slot and pass the cell data to the table-cell ponent as a prop. In the current version of vue I think the slot directive is just slot not v-slot but both might be accepted – vbranden Commented Aug 16, 2016 at 13:29
• check the jsfiddle - there is a slot - directive defined :) – Aaroniker Commented Aug 16, 2016 at 13:37
• The template in VueJS is actually not HTML, it is representing of a render function wrapped into syntax sugar which is very similar to a real HTML. That's why you must have td inside tr and li inside ul. – Piterden Commented Oct 3, 2018 at 4:07

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3 +200

That's quite hard to find out what exactly gone wrong, but that code was broken since v1.0.18. I was unable to dig deeper to eliminate exact mit but there was a couple of optimizations made which potentially could affect $context._content rendering.

Solution

However you can solve your problem by changing

var raw = host.$options._content; 

to

var raw = host._context._directives.filter(function (value) {
    return !(value.Component === undefined);
})[0].el;

That change is patible with v1.0.26. You can find fixed code here.

Disclaimer

I was failed to find a way to achieve the same result using public API. So this solution is also relies on non-public API thus may break in future release.

Aaron, my answer probably is not satisfied for your question but why don't you make it simple as the following code but you have to use directive and all of this stuff ?

I am still figuring why your solution is working on the previous version, not the current version. :D

new Vue({
  el: '#vue',
  data: {
    items: [{
      id: 1,
      title: 'Vue'
    }, {
      id: 2,
      title: 'Vue 2'
    }, {
      id: 3,
      title: 'Vue 3'
    }, {
      id: 4,
      title: 'Vue 4'
    }, ]
  }
});

<script src="https://cdnjs.cloudflare./ajax/libs/vue/1.0.26/vue.min.js"></script>
<table border="1" class="table" id="vue">
  <tbody>
    <tr v-for="item in items">
      <td>{{item.id}}</td>
      <td>{{item.title}}</td>
    </tr>
  </tbody>
</table>

本文标签： javascriptvuejsltslotgt in repeating table rowStack Overflow