vuejs3 - 如何将模板引用分配给嵌套对象属性

Question

我的脚本标签如下所示：

<template>
<div>
  <div ref="publicKey.element">Public</div>
  <div ref="privateKey.element">Private</div>
</div>
</template>
<script setup>
const publicKey = {
  element: ref(null),
  onClick: () => alert('public clicked'),
}
const privateKey = {
  element: ref(null),
  onClick: () => alert('private clicked'),
}
</script>

基本上，我不想将模板 ref 分配给顶级组合 api ref，而是将其应用于嵌套在对象中的 ref。

问题是上面的 ref="publicKey.element" 没有做任何事情 - 当我检查“元素”属性下的值时，只有常规的 ref 对象并且 _value 为空。

我如何在那里放置一个实际的元素？

标签： vuejs3vue-composition-api

Answer 1

使用 ref="" 属性的函数语法 文档显示了一个带有 v-for 的示例，但您也可以在没有 v-for 的情况下使用它

<div>
  <div :ref="el => publicKey.element.value = el">Public</div>
  <div :ref="el => privateKey.element.value = el">Private</div>
</div>