vue3 设置 - 如何在点击事件中访问 ref 元素答案

【问题标题】：vue3 setup - how to access ref element in click eventvue3 设置 - 如何在点击事件中访问 ref 元素
【发布时间】：2023-02-03 09:08:02
【问题描述】：

我使用 vue3 组合 API 和 <script setup> 。

<textarea v-model="textarea"></textarea>
<button @click="showPreview">click</button>
<p ref="p" v-if="open"></p>

const textarea = ref("");
const p = ref(null);
const open = ref(false);

function showPreview() {
  let text = textarea.value.replaceAll(/\n/g, "<br>");
  if (p.value) { // p is null
    p.value.innerHTML = text;
  }

  open.value = true;
}

单击按钮时，我想在 p 标记（不使用 v-html）中显示 textarea 的文本。

但是p在功能上是空的...

我尝试在 onMounted 函数中检查 p 变量，但它仍然为空。

onMounted(() => console.dir(p))

我怎样才能访问 ref 元素点击事件？

在此先感谢您的帮助。

【问题讨论】：

为什么不更简单地<p v-if="open">{{ textToDisplay }}</p>，其中 textToDisplay 是基于从 textarea 中提取的文本的计算值？

标签： javascript vue.js vuejs3

【解决方案1】：

使用 v-show 以便元素即使未显示也位于 DOM 中。对于v-if，当open 为假时，<p> 元素不会呈现，因此引用为null。

<p ref="p" v-show="open"></p>

【讨论】：