Utilizing the <slot> feature in Vue.js for dynamically rendering content in a repeating

Currently, I am utilizing a solution to dynamically set table cells in a Vue.js component:

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

This method was effective with Vue.js v1.0.10 but seems to be incompatible with the latest version v1.0.26.

For reference, here is a JsFiddle link: https://jsfiddle.net/peL8fuz3/

The desired markup includes access to the item object within the component:

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

Included below is the Vue.js component code (refer to the fiddle for more details)

Vue.component('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'},
            ]
        }
    }
});

If anyone has insight on how to resolve this issue, please share your thoughts.

Edit I have not yet found a working solution - still actively searching for one.

javascriptcomponentsvue.jsvue-component

Answer №1

It's proving to be quite a challenge to pinpoint exactly what went awry, but that piece of code has been faulty since v1.0.18. I couldn't delve deeper to identify the exact commit responsible, but there were some optimizations made that may have impacted the rendering of $context._content.

Solution

Nevertheless, you can resolve your issue by making the following change:

var raw = host.$options._content;

to

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

This modification is compatible with v1.0.26. The corrected code can be found here.

Disclaimer

I was unsuccessful in finding a way to achieve the same outcome using the public API. Therefore, this solution also relies on a non-public API and may break in future releases.

Answer №2

Aaron, I have a different approach for your question. Why not try simplifying your code using directives and other necessary elements?

I'm still puzzled as to why your previous solution works on the older version but not the current one. :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.com/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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Changing innerHTML in CoffeeScript

Are there other options instead of using the 'innerHTML' property in CoffeeScript? In JavaScript, you typically write something like this: document.getElementById('element').innerHTML = "blah_blah" Is there a different approach to ac ...

javascriptcoffeescript

What causes all the accordion panels to toggle simultaneously in a ReactJs application?

When I click on the + button in my accordion, all the sections open at once. What could be causing this issue? Here is my code: const questions = [ { id:1, question: 'What is React?', answer: 'React is a JavaS ...

javascriptreactjs

How can I utilize a callback in TypeScript when working with interfaces?

Can someone guide me on how to implement an interface in typescript with callback function? interface LoginCallback{ Error: boolean, UserInfo: { Id: string, OrganizationId: string } } interface IntegrationInterface { Ini ...

javascripttypescript

tool that flips the text value in a textbox using jQuery

In my attempt to reverse the text written inside a textbox upon button click, I have made some progress. Here is what I have done so far in my HTML: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</titl ...

javascriptjquerypluginsjquery-plugins

What could be the reason behind the undefined return value of val()?

When I click a button, my script is supposed to get the value of the next hidden input field. However, it always returns "undefined". What could be causing this issue and why does val() return undefined? If I only try to select the element with next(' ...

javascriptjquery

JavaScript Reactive: Managing subscriptions in flatMap streams

In my current setup, I have a state$ stream that contains messages$s (an array of message streams). As the State$ is updated, new messages$ are added to the array. My goal is to have a subscriber handle messages from all messages$ in a single stream, ensu ...

javascriptrxjscyclejs

What is causing the net::ERR_CONNECTION_RESET in Node JS and ExpressJS?

Our application, built on ExpressJS and NodeJS, is hosted on a Linode server and served at port 3000. Although the app has been functioning well for a year, we have recently encountered consistent connection errors. The errors vary, but they are mostly re ...

javascriptnode.jsexpress

Delete elements from the Document Object Model

I have a situation where I am dynamically pushing components to the DOM in Angular 2. However, I am facing an issue with removing old components whenever a new set is pushed to the DOM. When I try to remove an individual component, it works fine. But when ...

javascriptangulardom

Activate the input autofocus feature when displaying a dialog in Vue.js

When opening a dialog with input text using v-menu upon clicking a button, how can I focus on the input text field? I have attempted to use $ref but it does not seem to work. newFolderClick(){ this.$refs["input_new_folder"].focus(); //it still appea ...

javascripthtmlvue.js

Unexpected behavior occurs when using scrollTop to determine the new height after refreshing a div inside a Bootstrap modal

I have included a Bootstrap-based modal that enables users to add and view posts: <div class="modal fade hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="prodCommentModalLabel" aria-hidden="true"> <div class="modal-dialog modal-l ...

javascriptjqueryajaxtwitter-bootstrap

The Angular2 application successfully loads on the first attempt, but encounters an error when attempting hot-reloading, displaying the message "The selector 'app' does not correspond to any

SOLVED: The issue I encountered was related to my package.json. I discovered that it was an outdated version missing some of the necessary scripts and dependencies, unlike the one I referenced in my post. Oddly enough, I was still able to run the scripts a ...

javascriptnode.jsangularwebpack

Implementing an API call in Vue JS on the app.vue component of a single page application

My project is experiencing delays in API requests due to a large amount of data. I have tried adding a cache, but the page still appears white upon creation. I am considering moving the API call to app.vue to speed up the request. Is there a way to do this ...

javascriptvue.js

Making if-else statements easier

Greetings! I have a JSON data that looks like this: { "details": { "data1": { "monthToDate":1000, "firstLastMonth":"December", "firstLa ...

javascripttypescriptif-statementhighchartslodash

Changing a prop in a VueJs child component does not trigger a rerender

I have been working on a dropdown feature where users can select an option, which in turn will generate an API query. The child component will then send this query, receive a response, and display the filtered results. However, I am facing an issue where s ...

vue.js

`Having trouble with importing the react-redux module in next.js due to an error with the <Provider/&

Encountered the following error in Next.js browser and terminal: SyntaxError: Cannot use import statement outside a module import Provider from './components/Provider'; ^^^^^^ SyntaxError: Cannot use import statement outside a module at Obj ...

javascriptreactjsnext.js

Replicating DIV element with input field

Once again, I find myself stuck in my attempt to duplicate a DIV and its form elements using jQuery. Button: <div class="addNew" id="addSkill">Add Skill <i class="icon-plus"></i></div> This is the Div and contents that I want to ...

javascriptphpjqueryhtmlcss

Tips for creating distinct hover descriptions for each element in an array

My dilemma may not be fully captured by the title I've chosen, but essentially, I am working with a list of names and I want each one to display a unique description when hovered over with a mouse. On the surface, this seems like a simple task, right ...

javascripthtmljquerycss

Refresh database records

I am currently using grails and I am exploring ways to update my database table utility by selecting values from two drop down menus. These drop down menus are populated with values from the database based on user selections from another drop down menu. My ...

javascriptjqueryajaxgrails

Tips and tricks for spinning a collection of canvas rectangles

For my final project in a class, I am developing a Pentomino puzzle game. All twelve puzzle pieces have been created, and they can be moved around using this interactive demo. However, when attempting to rotate the array without using canvas.rotate(), the ...

javascriptarrayscanvas

Tips on incorporating AJAX sorted outcome into HTML divs

Hey there, I have successfully implemented AJAX, PHP and MySQL Sorting to display results in tables, as shown in the code below. Now, my query is: How do I display the $result in HTML divs instead? Your assistance is highly appreciated. Here is the PHP c ...

phpjavascriptmysqlhtmlajax