Kevin Powell - Community•3mo ago

Trying to wrap my head around this example of list rendering in VueJS

I understand id starts at 0, there's a state variable for newTodo, and todos. In the function addTodos I can see we're pushing into the todos array with and id, and a new todo value.. the bit I'm confused on there is literally that array..

function addTodo() {
  todos.value.push({ id: id++, text: newTodo.value })
  newTodo.value = ''
}

function addTodo() {
  todos.value.push({ id: id++, text: newTodo.value })
  newTodo.value = ''
}

I understand id: id++, it's adding 1 to the value of id, so every time you add a todo, it'll be a number higher than the previous... but where/why is text: there and not just newTodo.value++ or something? and then why am I making newTodo.value = an empty string after the push method?

<script setup>
import { ref } from 'vue'

// give each todo a unique id
let id = 0

const newTodo = ref('')
const todos = ref([
  { id: id++, text: 'Learn HTML' },
  { id: id++, text: 'Learn JavaScript' },
  { id: id++, text: 'Learn Vue' }
])

function addTodo() {
  todos.value.push({ id: id++, text: newTodo.value })
  newTodo.value = ''
}

function removeTodo(todo) {
  todos.value = todos.value.filter((t) => t !== todo)
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo" required placeholder="new todo">
    <button>Add Todo</button>
  </form>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'

// give each todo a unique id
let id = 0

const newTodo = ref('')
const todos = ref([
  { id: id++, text: 'Learn HTML' },
  { id: id++, text: 'Learn JavaScript' },
  { id: id++, text: 'Learn Vue' }
])

function addTodo() {
  todos.value.push({ id: id++, text: newTodo.value })
  newTodo.value = ''
}

function removeTodo(todo) {
  todos.value = todos.value.filter((t) => t !== todo)
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo" required placeholder="new todo">
    <button>Add Todo</button>
  </form>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
</template>

6 Replies

missymae•3mo ago

The array in the todo ref starts with 3 example objects. Each time you add a newTodo, the addTodo function pushes a new object to the todo array. that object is the current value of id, then increments that, and stores whatever string is in the input field - that's the newTodo.value - it puts that in the newTask object with the key "text", pushes that to the todo array, and by ending with newTodo.value= '' assigns an empty string to the input field, effectively clearing it so you can add your next newTodo. When the todo array is rendered, each object in the todo array is looped over and the text property of each is displayed

CDL•3mo ago

@missymae Awesome, thanks a lot 🙂 makes it much clearer to me now I see and the "text" is also what will be in v-model inside the html itself, I remember that now. v-model effectively replaces type="text" in the input.

Rägnar O'ock•3mo ago

No. v-model allows you to synchronize an input's value (or a component prop) with a reactive value (ref or computed). A v-model is a 2 way binding of the value to the input (change the value the input is updated, change the input the value is ipdated)

Tirius•3mo ago

v-model in this case is the same as this:

<input :value="newTodo" @input="newTodo = $event.target.value" required placeholder="new todo"/>

<input :value="newTodo" @input="newTodo = $event.target.value" required placeholder="new todo"/>

it's a build-in macro that can help you make your code less verbose. But sometimes you might want to handle it by your self.

CDL•3mo ago

Gotcha. In the vue tut it uses v-model to sync the input but there’s no submit etc.. I imagine to make this a little better I’d just have to add a submit button and then clear the text value after each submit? Like in a todo list for example

Rägnar O'ock•3mo ago

There's already a submit button. Buttons are submit by default when in a form

Gaming

Programming

Trying to wrap my head around this example of list rendering in VueJS