再表現されたタイトルは次のとおりです: DOM 更新に基づく v-if

Question

v-for を使用していくつかの要素をレンダリングしました 各要素にはテキストとボタンが含まれます テキストが div の高さを超えた場合にのみボタンを表示する必要があります

リーリー

明らかに解決策は v-if を使用することですが、何を基準に判断すればよいでしょうか? テキストの高さを計算し、ボタンを表示するかどうかを決定する必要があります したがって、refs を使用して div を参照し、関数を使用して表示するかどうかを決定する必要があります。 リーリー

しかし、問題は

items が DOM と同期していないことであることがわかりました。明らかに、DOM は非同期で更新されるため、データが少し遅れています。 そこで、showButton 関数に nextTick() を追加することにしましたが、Promise が返されるようになり、v-if が常に true になってしまいました。 リーリー それでは、要素ごとにボタンを表示または非表示にする方法はあるのでしょうか?

Answer 1

この操作を完了するために、Vue で watchers を使用しました。お役に立てば幸いです。

リーリー

そしてスクリプト部分、入力部分を更新しました:

リーリー