2024-12-10 按下建立新筆記時， text 及 textarea 都清空

發表於 更新於 分類於 閱讀次數：
2024-12-10 按下建立新筆記時， text 及 textarea 都清空

2024-12-10 按下建立新筆記時， text 及 textarea 都清空

現在的問題是 text 和 textarea 使用了相同的 v-model，導致兩者內容同步變動。我們需要為標題 (text 對應的 input) 和筆記 (textarea) 分別建立獨立的 ref。

以下是修正的程式碼：

修正程式碼

JavaScript

分開管理 title（標題）和 note（筆記）的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<script>
import { ref, onMounted, onUnmounted } from 'vue';
import autosize from 'autosize';

export default {
  setup() {
    const title = ref(''); // 管理標題
    const note = ref(''); // 管理筆記
    const textarea = ref(null); // 參考 textarea 元素
    const isEditing = ref(false); // 控制是否可編輯

    onMounted(() => {
      if (textarea.value) {
        autosize(textarea.value);
      }
    });

    onUnmounted(() => {
      if (textarea.value) {
        autosize.destroy(textarea.value); // 確保在組件卸載時清理資源
      }
    });

    const enableEditing = () => {
      title.value = ''; // 清空標題
      note.value = ''; // 清空筆記
      isEditing.value = true; // 啟用輸入
    };

    return {
      title,
      note,
      textarea,
      isEditing,
      enableEditing,
    };
  },
};
</script>

Template

將標題的 v-model 綁定到 title，將筆記的 v-model 綁定到 note。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<template>
  <p class="s_header">Notes</p>

  <div class="notes_container">
    <div class="inputBox">
      <input
        type="text"
        v-model="title"
        required
        spellcheck="false"
        :disabled="!isEditing"
      />
      <span class="labelline">標題</span>
    </div>
    <div class="inputBox">
      <textarea
        v-model="note"
        ref="textarea"
        spellcheck="false"
        required
        :disabled="!isEditing"
      ></textarea>
      <span class="labelline">筆記</span>
    </div>

    <div class="btn-container">
      <a href="#" class="btn" @click.prevent="enableEditing">建立新筆記</a>
    </div>
    <div class="footer">筆記應用程式</div>
  </div>
</template>

修改點解釋

  1. 獨立管理的狀態：

    • title 用於綁定標題的輸入框。
    • note 用於綁定筆記的文字區域。

  2. 按下「建立新筆記」：

    • enableEditing 方法會清空 title 和 note 的內容，並啟用輸入功能。

  3. 避免連動：

    • 使用不同的 ref 變數分開管理標題和筆記的內容，解決同步變動的問題。

行為說明

  1. 初始狀態：

    • 標題和筆記輸入框不可編輯。
    • title 和 note 的值為空。

  2. 按下「建立新筆記」：

    • 清空 title 和 note 的內容。
    • 輸入框和文字區域切換到可編輯狀態。

  3. 輸入新內容：

    • title 和 note 的值獨立管理，避免連動。

這樣設計後，標題和筆記的內容可以獨立操作，不會再互相影響。