关于vue.js输出组件的id问题 5C

以下是运行环境以及代码.
http://jsfiddle.net/50wL7mdz/93626

我的问题是:我要怎么把 todo.id 输入到屏幕上.
这是一个官方文档的例子.
https://cn.vuejs.org/v2/guide/list.html#一个组件的-v-for
但是我一直没搞懂.

6个回答

把html中的那个 v-bind:key=todo.id 改成 v-bind : id = todo.id 就好了

你的这个问题其实是在vue.js的组件模块遇到的。你的js中已经定义了组件,并在组建中给了{{id}}-{{title}}的输出。这个时候你在你的html中定义了
你的

(is表示)是下边的组件的复用。在你下边的组件中,你在props定义了两个属性,id和title。这说明这两个东西是父组件传递给你的(可以查看父子组件传递)。然后你必须在上边的html中传递这两个值,但是你只传递了一个title,所以你的id是空的,所以加上v-bind:id="todo.id"就行了。楼上的解释虽然解决了问题,但是在2.2+的vue.js版本中列表循环(v-for)的key属性是十分必要的,如果不写回产生其他问题。

在指定位置输入定界符加变量即可输出

根据你的示例,其实你在todo-item这个组件里,是已经定义了id和title如何显示的了。
{{id}} -{{title}}
现在,没有显示的原因是,你在调用这个组件时,没有把组件的id属性绑定进去,方法就是:在v-bind:key = "todo.id"的上面,再增加一个 v-bind:id="todo.id",
相对完整的代码,在HTML中如下:

   <ul>
    <li
      is="todo-item"
      v-for="(todo, index ) in todos"
     _** v-bind:id="todo.id"  **_
      v-bind:key="todo.id"
      v-bind:title="todo.title"
      v-on:remove="todos.splice(index, 1)"
    ></li>
  </ul>

希望能帮助你的理解,谢谢~~

is="todo-item"
v-for="(todo, index ) in todos"
v-bind:key="todo.id"
v-bind:title="todo.title"
v-bind:id="todo.id"
v-on:remove="todos.splice(index, 1)"
>

上面大家说了,加一行 v-bind:id="todo.id" 就能解决问题

另,楼主的疑问可能是
v-bind:key="todo.id"
v-bind:id="todo.id"
首先, v-bind:key="todo.id"的意思是,在列表渲染中,给每一个todo设置一个用于区分的值,这个值是todo.id;这个key相当于每一个todo的唯
一标识,并不是向组件中传值,这个key在vue的列表渲染中现在是必须的,每个v-for都必须有:key,否则会发出警告
其次,vue父组件向子组件中传值使用v-bind:name = value,如之前的代码,然后在子组件中用props接收方可使用
楼主在上面例子中,使用todo.id作为todo的唯一标识,但是它的值并没有传入子组件中,所以需要添加 v-bind:id="todo.id"这行代码

另:v-bind:可以缩写为:,如 v-bind:id="todo.id"等价于:id="todo.id";v-bind:key="todo.id"等价于:key="todo.id"

v-bind:title="todo.title"改成v-bind:title="todo.id"

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问