javascript_series7_vue_event_handling

by aelgy369

HTML

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/autosize.min.js"></script>


<div id="app" class="container">
  <div class="w-50">
    <div class="mb-3">
      <input type="text" class="form-control" v-model="newTitle" placeholder="標題">
    </div>
    <div class="mb-3">
      <textarea ref="addTextarea" class="form-control" v-model="newContent" rows="3" placeholder="新增記事"></textarea>
    </div>
    <div class="mb-3 row w-75">
      <select v-model="newColor" class="form-select col ms-3" aria-label="Default select example">
        <option value="" selected>挑選顏色</option>
        <option value="#FFCCCC">珊瑚紅</option>
        <option value="#CCFF99">薄荷綠</option>
        <option value="#CCFFFF">風暴藍</option>
      </select>
      <button @click="addNote" type="button" class="btn btn-secondary col ms-3">新增</button>
    </div>
  </div>
  <div class="row row-cols-2">
    <div class="note col-5 border border-2 rounded-3 me-3 mb-3" v-for="(note, index) of notes" :style="{ 'background-color': note.color}">
      <div class="row mt-2 mb-2">
        <h3 class="title col-8">
          {{ note.title }}
        </h3>
        <button @click="deleteToDo(note, index)" type="button" class="btn btn-secondary col-4 w-25">刪除</button>
      </div>
      <input class="form-check-input me-1" type="checkbox" id="firstCheckbox">
      <label class="form-check-label content" for="firstCheckbox">{{ note.content }}</label>
    </div>
  </div>
</div>

JavaScript

const {
    createApp,
    ref,
    onMounted
  } = Vue

  const data = {
    data() {
      return {
        newTitle: "",
        newContent: "",
        newColor: "",
        notes: [{
            title: "春節行程安排",
            content: "吃飽睡，睡飽吃",
            color: "#FFCCCC",
          },
          {
            title: "工作待辦事項",
            content: "詢問各家廠商報價",
            color: "#CCFF99",
          },
          {
            title: "運動健身計畫",
            content: "每天早上六點去健身",
            color: "#CCFFFF",
          },
        ],
      }
    },
    methods: {
      addNote() {
        if (
          this.newTitle !== "" &&
          this.newContent !== "" &&
          this.newColor !== ""
        ) {
          this.notes.push({
            title: this.newTitle,
            content: this.newContent,
            color: this.newColor
          });
          this.newTitle = "";
          this.newContent = "";
          this.newColor = "";
        } else {
          alert("請輸入所有資料");
        }
      },
      deleteToDo(note, index) {
        this.notes.splice(index, 1)
      }
    },
    watch: {
      notes: {
        handler(newValue) {
          // 利用迴圈把每一筆資料存入 local storage 中
          localStorage.setItem('saveNote', JSON.stringify(newValue))
        },
        deep: true
      },
    },
/*     setup() {
      const addTextarea = ref(null);
    
      onMounted(() => {
        autosize(addTextarea.value)
      })
      return {
        addTextarea
      }
    }, */
    mounted() {
    	(this.$refs.addTextarea
      this.notes[0].content = "多出門、到處走走、也要多運動";
      if (localStorage.getItem('saveNote')) {
        const saveNote = JSON.parse(localStorage.getItem('saveNote'));
        this.notes = saveNote
      }
    }
  }

  createApp(data).mount('#app')