[英]how can i print the component's id of Vue.js
有官方文檔的鏈接:
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?
首先,您需要將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 關於為什么會這樣(以及更多)的信息性咆哮。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.