How to pass one entry from a list as prop in Vue

Question

Lets say I have the following list in data:

data: {
    todos: [
      { id: 1, title: "Learn Python" },
      { id: 2, title: "Learn JS" },
      { id: 3, title: "Create WebApp" }
    ]
  }

Now I want to pass only the entry with id of 2 to the prop:

<dynamic-prop :id=todos[2] :title="todos.title"> </dynamic-prop>

Is something like that possible in Vue?

Answer 1

Sure, you can pass any data on. Just don't forget to add quotation marks and mind the off-by-one problem. So if you want to pass the second element in a (zero-indexed) array, you'd write something like:

<dynamic-prop :id="todos[1].id" :title="todos[1].title"> </dynamic-prop>