Can Vue support recurring time slots?

I have configured a reproduction repository:

https://github.com/devidwong/recurring-slot

Using Vue runtime-only, I am unable to use Vue.extend (which requires template compiler)

Vue 3 is quite new to me. I decided to use it for exploration purposes. Not sure if this would work on Vue 2, but I am curious if this component should function regardless:

comment.template.html:

<div class="comment">
    <slot :currentComment="comment"></slot>
    <Comment v-for="reply in comment.replies" :key="reply.id" :comment="reply">
        <slot :currentComment="reply"></slot>
    </Comment>
</div>

usage:

comments.template.html

<Comment v-for="comment in comments" :key="comment.id" :comment="comment">
    <template #default="{ currentComment }">
        <div>by {{ currentComment.author }}</div>
    </template>
</Comment>

for structure:

comments: [
      {
        id: 1,
        author: 'Goodman',
        replies: [
          {
            id: 11,
            author: 'RepeatingMan',
            replies: [
              {
                id: 111,
                author: 'ExpectedMan',
                replies: [
                  {
                    id: 1111,
                    author: 'MelodyOfFuture',
                    replies: []
                  }
                ]
              }
            ]
          }
        ]
      }
    ]

Instead of seeing "ExpectedMan" and "MelodyOfFuture", I see "RepeatingMan" rendered three times. It seems like the second slot gets the same comment prop as the first one. I want nested comments and only define inner content once.

Is this achievable?

javascriptvue.jsvuejs2vue-componentvuejs3

Answer №1

Avoid passing the comment to the parent component using a slot, instead display the author name and their comment within the Comment Component :

<div class="comment">
   {{comment.author}}
    <Comment v-for="reply in comment.replies" :key="reply.id" :comment="reply">
        <slot :currentComment="reply"></slot>
    </Comment>
</div>

Parent component :

<Comment v-for="comment in comments" :key="comment.id" :comment="comment">
</Comment>

VIEW LIVE DEMO

In the live demo, I aimed to replicate the design of Stack Overflow comments.

Answer №2

repository is now up to date

https://github.com/johndoe/recurring-events

ancestor:

<Parent
      v-for="parent in parents"
      :key="parent.id"
      :parent="parent"
      :detailsComponent="ParentDetails"
    >
      <template #default="{ currentParent }">
        <ParentDetails
            :currentParent="currentParent"
        />
      </template>
    </Parent>

offspring:

<div class="child">
    <slot :currentParent="parent"></slot>
    <Parent
        v-for="kid in parent.children"
        :key="kid.id"
        :parent="kid"
        :detailsComponent="informationComponent"
    >
      <template #default="{ currentKid }">
        <component
            :is="informationComponent"
            :currentParent="currentKid"
            :detailsComponent="informationComponent"
        />
      </template>
    </Parent>
  </div>

specifics:

<div>
    by {{ currentParent.author }}
</div>

make sure to define ParentDetails (in ancestor) as component, and as dataset entry:

{
components: {
    Parent,
    ParentDetails
},
data: () => ({
    ParentDetails,
    parents: [...]
})
}

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

Present pop-up messages in the most sophisticated manner

I have successfully created an AngularJS app that is functioning well. Now, I am faced with the challenge of displaying different pop-ups based on specific conditions being met. I am unsure of the best approach to take. Currently, I am considering two op ...

javascriptmodel-view-controllerangularjspopupshow-hide

Tips for targeting the Next button press event and setting focus in an Ionic-vue application

Struggling to shift focus from one input to another on Android/iOS keyboard using the next button? The setFocus method lacks examples, making it difficult to implement. Has anyone successfully achieved this before and can provide an example? Here's ...

vue.jsvuejs3ionic-vue

Ensuring a route is activated in VueJS only once the dispatch and commit actions have been successfully completed

When a user submits a form on my website with their email and password, it triggers an action in the store called userSignIn. In SignIn.vue: onSubmit () { if (this.$refs.form.validate()) { const user = { email: this.email, passwor ...

vue.jsvuejs2es6-promisevue-routervuex

VeeValidate fails to validate input fields in a form that is constantly changing

My goal is to create dynamic forms with validations using veeValidate in Vue.js. I am attempting to achieve this by storing an array of objects within the component's data. For instance: data(){ return{ inputs: [ { id: 1, lab ...

javascriptvue.jsbootstrap-vuevee-validate

Neglecting the error message for type assignment in the Typescript compiler

Presented here is a scenario I am facing: const customer = new Customer(); let customerViewModel = new CustomerLayoutViewModel(); customerViewModel = customer; Despite both Customer and CustomerLayoutViewModel being identical at the moment, there is no ...

javascripttypescripterror-handlingtsconfig

VueJS - Retrieve data from an external component

I recently came across a great example of URL filters and I would like to implement it in a different component. Currently, all the code is located in one file. Is there someone who can assist me in moving the results to a separate component while ensuri ...

vue.js

Steps to save an image to a directory using Vue.js

I am trying to implement an image upload feature to a local folder using Vue.js. How can I achieve this? Currently, I am able to display an image with the following code: <template v-slot:[`item.logo`]="{ item }" > <v-avatar size=&qu ...

vue.jsaxiosvuetify.js

Translate the DateTime to the local time zone

As a newcomer to AngularJS, I am working on capturing a DateTime attribute in the UI and passing it to an Odata endpoint. However, the time being sent is not in the current local time. How can I convert this time to local time before sending it to the Odat ...

javascriptangularjs

Having trouble with a JQuery ajax post to a PHP server - receiving the error message "SyntaxError: Unexpected token < in JSON at position 0"

I am attempting to transmit json data to a server and retrieve a json response. My code is displayed below: JS: function login() { console.log("clicked"); //gather form values into variables var email = $("#email").val(); var password = $("#password"). ...

javascriptphpjqueryjsonajax

Leverage the power of Signal R through React with aspnet/signalr integration

I found a helpful resource for incorporating SignalR into react, which you can check out here. However, it seems that the code provided does not align with current standards. The @aspnet/signalr-client has been marked as obsolete and now we are required t ...

javascriptreactjssignalr

Utilizing NextJS to Call the Layout Component Function from the Page Component

I can't seem to find an answer to this question for Next.js after searching online. While there are solutions available for React, I don't think they will work in the Next.js framework. My application is essentially a shop with a navigation menu ...

javascriptreactjsnext.js

Determine whether an element has the capability to hold text content

Is there a surefire and reliable method to determine if an HTML element is capable of holding text, using only pure JavaScript or jQuery? For example, <br>, <hr>, or <tr> cannot contain text nodes, whereas <div>, <td>, or < ...

javascriptjqueryhtmldom

Tips for replacing the values obtained during parsing an XML document

I am working with an XML file that contains category and product information. Here is a snippet of the XML data: <categories> <category id="2" name="Pepsi" > <products> <product id="858" name="7UP" price="24.4900" /> ...

javascriptjquery

The readStream in Node.JS unexpectedly terminates before the writeStream

I'm currently working on a project that involves fetching PDF files from remote servers and immediately sending them back to the clients who made the request. Here is the code snippet I am using: var writeStream = fs.createWriteStream(filename); writ ...

javascriptnode.js

Issues with Angular 8 arise when attempting to use JavaScript after pressing the back button in the browser

While working on my Angular 8 project, everything runs smoothly until I hit the browser's back button. Once I do this, my external JavaScript stops functioning. I have tried using JavaScript in various ways, such as importing, requiring, and putting ...

javascriptangular

Conflict in Vue.js between using the v-html directive and a function

Below is the component template for a notification: <template> <div> <li class="g-line-height-1_2"> <router-link :to="linkFromNotification(item)" @click.native="readNotification(item)" v-html="item. ...

javascriptvue.jsmomentjsvue-componentdirective

Passing role data from Django Rest Framework and Djoser to the Vue frontend

I'm currently developing a basic website with a login feature. I am utilizing the Djoser library to handle authentication on the backend, and have successfully implemented the login functionality. Now, I want to create restricted access pages on the f ...

pythondjangovue.jsauthenticationdjoser

Alter appearance using various classes

I am seeking assistance in changing the font of text using classes. I have multiple texts with different classes and I want to be able to edit all the texts without adding another dropdown menu. I believe that the change needs to occur in a script. Pleas ...

javascriptjqueryhtmlcss

When making a jQuery ajax request to the Google Maps API, an error is returned stating "SyntaxError:

I'm trying to make an ajax call using jsonp to the Google Maps API v3, but it keeps ending up in the error function. In the Firefox console log, I see the following error message: SyntaxError: invalid label "results" : [ When I click on it, I can se ...

javascriptajaxjsonjquery

Improve Email Regular Expression to Restrict Consecutive Periods

I'm not very good with regular expressions, so I decided to seek some help. Here's the regular expression I have: /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.) ...

javascriptregexvalidation