090 $nextTick

一曲微茫發表於2024-10-30

this.$nextTick 是 Vue.js 提供的一個方法，用於在下次 DOM 更新迴圈結束之後執行延遲迴調。這對於確保 DOM 已經更新後再執行某些操作非常有用。例如，當你修改了資料並且需要在這之後訪問更新後的 DOM 元素時，可以使用 this.$nextTick。

在你的程式碼中，如果你需要在 handleblur 方法中確保 DOM 已經更新後再執行某些操作，可以使用 this.$nextTick。以下是一個示例：

<template>
  <li class="my-item">
    <label>
      <input type="checkbox" :checked="todo.done" @change="changestate(todo.id)"/>
      <span v-show="!todo.isedit">{{ todo.title }}</span>
    </label>
    <button class="butt" @click="delete_zzr(todo.id)">刪除</button>
    <button class="butt" @click="addedit(todo)">編輯</button>
    <input type="text" v-show="todo.isedit" v-model="todo.title" @blur="handleblur(todo)">
  </li>
</template>

<script>
export default {
  name: 'MyItem',
  props: ["todo"],
  methods: {
    changestate(id) {
      this.$bus.$emit("changetodostateproxy", id);
    },
    delete_zzr(id) {
      this.$bus.$emit("deletetodoproxy", id);
    },
    addedit(todo) {
      if (todo.hasOwnProperty("isedit")) {
        todo.isedit = true;
      } else {
        this.$set(todo, "isedit", true);
      }
    },
    handleblur(todo) {
      this.$set(todo, "isedit", false);
      this.$nextTick(() => {
        // 這裡可以執行需要在 DOM 更新後進行的操作
        console.log('DOM has been updated');
      });
    }
  }
};
</script>

<style scoped>
.butt {
  background-color: red;
  color: white;
  border: none;
  float: right;
  margin-right: 5px;
  visibility: hidden; /* 預設隱藏按鈕 */
}
.my-item:hover {
  background-color: grey;
}
.my-item:hover .butt {
  visibility: visible; /* 滑鼠懸浮時顯示按鈕 */
}
</style>

在這個例子中，handleblur 方法中使用了 this.$nextTick 來確保在 isedit 屬性更新後，DOM 已經反映這些變化，然後再執行回撥函式中的操作。這在你需要訪問或操作更新後的 DOM 元素時非常有用。

相關文章