Vue todolist11/11/2023 Above code is pretty long but if we go through it,it does simple task.We are extracting child of template tag (contains li,edit and delete button) and appends it to ul tag.For every todo item we have created a attach and display method.In attach method we have create a li tag and appends it to ul tag.In display method we have added text(todo item) and then provided todoId as its id to edit and delete button.Using this id we can easily delete and edit todo items.(button id contains id of corresponding todo item)ĭelete todo-When delete button is clicked, we can get todoId by selecting delete button and access its id.After getting todoId we get todos list(appState class) by using get method provided in AppState class.Todos array is filtered and it is set by using setter which changes todos(variable in AppState) array.Įdit todo-todoId is accessed and its value is set to input tag and corresponding todo item is deleted. Thanks for reading.TodoItem constructor receives id,todoInput and todoItems from TodoList. In the next parts i will add styling and i will show how to work with localStorage in order to keep our data after refreshing. In this article we learned how to add Vue.js to a project, how to render reactive data, how to add event listeners and some basic Vue directives. Now let's add Vue code for making our app interactive: We have an input field for entering todo list content, a button for adding entered text and unordered list element for displaying all todo list items. Let's add html structure of our application: The data method inside createApp should always return an object where its properties will be the reactive state of your application. Enter fullscreen mode Exit fullscreen modeĪfter that will be your template where the content of your code will be rendered.
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |