Issue with Vue.js v-for not rendering additional li tags

Question

Issue with Vue.js v-for not rendering additional li tags

I am working with a ul that contains items generated from a loop, followed by additional li elements.

<ul>
  <todo-item v-for="(todo,index) in todos" v-bind:todo="todo" :key="index" />
  <li :key='"new_item"'>
    <input placeholder="What needs to be done?" type="text" v-model="new_todo" >
    <button v-on:click="add_todo()">Add</button>
  </li>
</ul>

When the extra li comes after the looped items, it does not display as expected. However, when I place the extra li before the loop, it works fine.

<ul>
  <li :key='"new_item"'>
    <input placeholder="What needs to be done?" type="text" v-model="new_todo" >
    <button v-on:click="add_todo()">Add</button>
  </li>
  <todo-item v-for="(todo,index) in todos" v-bind:todo="todo" :key="index" />
</ul>

I suspect there may be an issue with the key attribute, but I'm struggling to identify the exact problem.

You can view the full code here.

javascript vue.js

Answer 1

Answer №1

One of the challenges with Vue components is that they require a closing tag and won't function correctly with self-closing tags.

To address this issue, you can structure your code like this:

<ul>
  <todo-item v-for="(todo,index) in todos" v-bind:todo="todo" :key="index"></todo-item>
  <li :key='"new_item"'>
    <input placeholder="What needs to be done?" type="text" v-model="new_todo" >
    <button v-on:click="add_todo()">Add</button>
  </li>
</ul>

As stated in the Vue Style Guide, self-closing components indicate that they are meant to have no content, similar to a deliberately blank page in a book. This approach helps keep your code cleaner by removing unnecessary closing tags.

While HTML doesn't allow custom elements to be self-closing, except for official "void" elements, Vue's template compiler can handle this strategy by ensuring compliance with DOM specifications during compilation.

Answer 2

One of the challenges with Vue components is that they require a closing tag and won't function correctly with self-closing tags.

To address this issue, you can structure your code like this:

<ul>
  <todo-item v-for="(todo,index) in todos" v-bind:todo="todo" :key="index"></todo-item>
  <li :key='"new_item"'>
    <input placeholder="What needs to be done?" type="text" v-model="new_todo" >
    <button v-on:click="add_todo()">Add</button>
  </li>
</ul>

As stated in the Vue Style Guide, self-closing components indicate that they are meant to have no content, similar to a deliberately blank page in a book. This approach helps keep your code cleaner by removing unnecessary closing tags.

While HTML doesn't allow custom elements to be self-closing, except for official "void" elements, Vue's template compiler can handle this strategy by ensuring compliance with DOM specifications during compilation.

Answer 3

Answer №2

Please refrain from using self-closing tags. Instead of <todo-item />, use

<todo-item></todo-item>

https://github.com/vuejs/vue/issues/1036

It appears that HTML5 components are not supported in this context.

Answer 4

Please refrain from using self-closing tags. Instead of <todo-item />, use

<todo-item></todo-item>

https://github.com/vuejs/vue/issues/1036

It appears that HTML5 components are not supported in this context.

Answer 5

Answer №3

Are you more inclined towards SFC or traditional HTML files? It appears that the issue lies in the HTML parser not allowing the use of <todo-item> within <ul>. You might want to consider using

<li :is="'todo-item'" v-for...>

instead, as it seems to work in your codepen setup.

<div id="app">
  <h1>TODOs</h1>
  <ul>
    <li :is="'todo-item'" v-for="(todo,index) in todos" v-bind:todo="todo" :key="index"></li>
    <li :key='"new_item"'>
      <input placeholder="What needs to be done?" type="text" v-model="new_todo" >
      <button v-on:click="add_todo()">Add</button>
    </li>
  </ul>  
  <p>You have finished {{ done }}/{{ total }}</p>
</div>

https://v2.vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats

Answer 6

Are you more inclined towards SFC or traditional HTML files? It appears that the issue lies in the HTML parser not allowing the use of <todo-item> within <ul>. You might want to consider using

<li :is="'todo-item'" v-for...>

instead, as it seems to work in your codepen setup.

<div id="app">
  <h1>TODOs</h1>
  <ul>
    <li :is="'todo-item'" v-for="(todo,index) in todos" v-bind:todo="todo" :key="index"></li>
    <li :key='"new_item"'>
      <input placeholder="What needs to be done?" type="text" v-model="new_todo" >
      <button v-on:click="add_todo()">Add</button>
    </li>
  </ul>  
  <p>You have finished {{ done }}/{{ total }}</p>
</div>

https://v2.vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats

Issue with Vue.js v-for not rendering additional li tags

Answer №1

Answer №2

Answer №3

Similar questions

Struggling with navigating the pop-up window in Webdriverio?

jQuery file uploader only transmitting a single chunk

What are the steps to customize the appearance of a folder in the web browser?

Incorporate radio buttons to toggle the visibility of div elements within Vue 3

CSS style takes precedence over inline JavaScript transitions occurring from a negative position

Importing the .css file within a React component for dynamic styling

Step-by-step guide to dynamically generating v-models with VueJS

At what point does the cleanup function in UseEffect activate the clearInterval() function?

The "begin" parameter of the Angular limitTo filter appears to be ineffective in Angular version 1.3

Is there a way to ensure that GIFs in jQuery Mobile always start from the beginning?

Knockout failed to display the template using the provided data

Using jQuery to target the element before

put two elements next to each other in a single row

The state initialization process is beginning with an [object Object] being passed into the setState function

Verify if the form has been successfully validated

Issues with scrolling, styling in css, and Vue challenges

What is the reason for the failure of the jQuery code to disable the submit button in the following snippet?

The Socket IO Client is receiving a different object than the one that was sent by the Server

Guide on positioning the camera to track the model in a third-person view

What are the best practices for managing DOM manipulation with TypeScript instead of plain JavaScript?