Tajuk yang dinyatakan semula ialah: v-jika berdasarkan kemas kini DOM

Question

Saya mempunyai beberapa elemen yang diberikan menggunakan v-for Setiap elemen mengandungi teks dan butang Saya perlu menunjukkan butang hanya apabila teks melimpahi ketinggian div

<div v-for="el in elements" :key="el.id">
    <span>{{ el.text }}</span>
    <button>Click me</button>
</div>

Penyelesaian yang jelas adalah dengan menggunakan v-if, tetapi atas dasar apakah saya harus mendasarkan ini? Saya perlu mengira ketinggian teks dan memutuskan sama ada mahu menunjukkan butang atau tidak Oleh itu, saya perlu menggunakan rujukan untuk merujuk div dan fungsi untuk menentukan sama ada untuk memaparkan:

<template>
    <button @click="addDiv"> 点击添加div </button>
    <div v-for="(el, index) in elements" :key="el.id">
        <span ref="items">{{ el.text }}</span>
        <button v-if="showButton(index)">Click me</button>
    </div>
</template>

<script setup lang="ts">
//imports
const elements = ref([]);
const addDiv = function() { 
    elements.value.push({ text: "测试", id: Date.now() })
}
const items = ref();
const showButton = function (index) {
    const item = items.value[index] as HTMLElement;
    return item.scrollHeight > item.offsetHeight
}
</script>

Tetapi saya dapati masalahnya itemstidak disegerakkan dengan DOM. Jadi jelas sekali, DOM dikemas kini secara tidak segerak dan itulah sebabnya data saya agak lewat Jadi saya memutuskan untuk menambah nextTick() dalam fungsi showButton saya, tetapi ia mula mengembalikan Promise yang menyebabkan v-if sentiasa benar

<template>
    <button @click="addDiv"> 点击添加div </button>
    <div v-for="(el, index) in elements" :key="el.id">
        <span ref="items">{{ el.text }}</span>
        <button v-if="showButton(index)">Click me</button>
    </div>
</template>

<script setup lang="ts">
//imports
const elements = ref([]);
const addDiv = function() { 
    elements.value.push({ text: "测试", id: Date.now() })
}
const items = ref();
const showButton = function (index) {
    nextTick(() => {
        const item = items.value[index] as HTMLElement;
        return item.scrollHeight > item.offsetHeight
    })
}
</script>

Jadi adakah terdapat cara untuk menunjukkan atau menyembunyikan butang saya khusus untuk setiap elemen?

Answer 1

Saya menggunakan watchers dalam Vue untuk menyelesaikan operasi ini, saya harap ia dapat membantu anda!

<template>
  <button @click="addDiv">点击添加div</button>
  <div
    v-for="el in elements"
    :key="el.id"
  >
    <span ref="items">{{ el.text }}</span>
    <button v-if="el.showButton">点击我</button>
  </div>
</template>

Dan bahagian skrip, saya telah mengemas kini bahagian input:

<script setup lang="ts">
  //imports
  import { ref, watch } from 'vue';

  const elements = ref<Array<any>>([]);
  const items = ref<Array<HTMLElement>>([]);

  const addDiv = function () {
    elements.value.push({ text: '测试', id: Date.now(), showButton: false });
  };

  watch(items.value, (newItems) => {
    console.log('items changed');
    let cpt = 0;

    // you can do it with a for loop too
    newItems.forEach((item) => {
      if (item.scrollHeight > item.offsetHeight) {
        console.log('overflow -> show button');
        elements.value[cpt].showButton = true;
      }
      cpt++;
    });
  });
</script>