[Vue.js] 점 설치 Todo 목록에 대량 선택 기능이 추가되었습니다.

점 설치"Vue.js 시작", Vue.js에서 Todo 목록을 만드는 과정(유료)이 있지만 전체 목록을 선택하는'대량 선택 기능'을 추가하고 싶어서 보충해 봤습니다.
아마도 Vue 초보자에 대해서만 "Vue.js 시작"가 끝났고 통일된 선택 기능을 추가하고 싶은 사람만 참고할 수 있을 것입니다. 하지만 제가 쓰겠습니다.

완료 이미지



index.추가 코드


index.html

    <button @click="selectAll">Select All</button>
    <button @click="rmvAll">Remove All</button>
Select AllRemove All 버튼을 추가합니다.
모든 단추에 v-on 명령을 설정합니다.

main.js 추가 코드


main.js
selectAll: function() {
      for(var i=0; i<this.todos.length; i++) {
        this.todos[i].isDone = true
      } 
    }, 
rmvAll: function() {
      for(var i=0; i<this.todos.length; i++) {
            this.todos[i].isDone = false
          }             
[처리 내용]
· Select All 을 누르면 todos 배열의 isDone 키의 값이 진짜로 됩니다 (= 체크 상자에서 선택).
· Remove All 을 클릭하면 todos가 배열한 isDone 키의 값은false (= 체크 상자가 없는 검사) 입니다.
todos 배열 운동.js
//Remove Allボタンをクリックで isDone:true → isDone:false になる
//Select Allボタンをクリックで isDone:false → isDone:true になる
todos: [
  {title: "aaa", isDone: true}, 
  {title: "bbb", isDone: true},
  {title: "ccc", isDone: true},
  {title: "ddd", isDone: true}
]

총결산


버튼 하나로 대량 선택과 대량 해제를 전환하려고 했는데 렉이 걸려서 먼저 각자의 버튼을 만들어 봤어요.

좋은 웹페이지 즐겨찾기