如何打印 Vue.js 的组件 ID

Question

有官方文档的链接：

https://v2.vuejs.org/v2/guide/list.html#v-for-with-a-Component

这是一个简单的待办事项列表的完整示例：

 Vue.component('todo-item', { template: '\ <li>\ {{ title }}\ <button v-on:click="$emit(\'remove\')">X</button>\ </li>\ ', props: ['title'] }) new Vue({ el: '#todo-list-example', data: { newTodoText: '', todos: [ { id: 1, title: 'Do the dishes', }, { id: 2, title: 'Take out the trash', }, { id: 3, title: 'Mow the lawn' } ], nextTodoId: 4 }, methods: { addNewTodo: function () { this.todos.push({ id: this.nextTodoId++, title: this.newTodoText }) this.newTodoText = '' } } })

 <div id="todo-list-example"> <input v-model="newTodoText" v-on:keyup.enter="addNewTodo" placeholder="Add a todo" > <ul> <li is="todo-item" v-for="(todo, index) in todos" v-bind:key="todo.id" v-bind:title="todo.title" v-on:remove="todos.splice(index, 1)" ></li> </ul> </div>

结果：在此处输入图像描述

---

我尝试打印 todo.id 。 例如：

 Vue.component('todo-item', { template: '\ <li>\ {{ id }}-{{ title }}\ <button v-on:click="$emit(\'remove\')">X</button>\ </li>\ ', props: ['id','title'] })

但结果是一样的，在这里输入图像描述，我应该如何打印 todo.id？

Answer 1

首先，您需要将id实际提供给<li is="todo-item" ... > s，这还没有完成。 您需要添加v-bind:id="todo.id" 。

话虽如此，如果您尝试从任何Vue 实例生命周期钩子中打印它，那么它就像console.log(this.id)一样简单。 例如：

Vue.component('todo-item', {
  ...
  mounted(){
    console.log(this.id)
  }
}

PS不要使用jQuery！ 将 jQuery 与 Vue 一起使用是一种代码味道。 这是 Gitlab 关于为什么会这样（以及更多）的信息性咆哮。