如何在 for 循环内的 vuejs 3 中使用引用答案

【问题标题】：How to use reference in vuejs 3 inside for loop如何在 for 循环内的 vuejs 3 中使用引用
【发布时间】：2022-08-05 03:31:54
【问题描述】：

我一直在使用 Vue3 js 开发我的第一个项目。我尝试在 for 循环中实现 vue 签名板。我认为 vue 签名板是基于 ref 工作的。我已经完成了带有 out 循环的 vue-signature pad。但我不知道如何在循环内使用 ref。任何人请帮助如何使用 vue3 在循环内实现签名板。先感谢您。

<template>
  <div
    class=\"row\"
    v-for=\"(applicants, index) in applicant_details\"
    :key=\"index\"
  >
    <div class=\"col-sm-4\">
      <div class=\"form-group\">
        <p>Signature for {{ applicants.first_name }}</p>
      </div>
    </div>
    <div class=\"col-sm-4\">
      <div class=\"form-group\">
        <VueSignaturePad ref=\"\" />
        <button type=\"button\" @click=\"undo1\" class=\"btn btn-warning\">
          Undo
        </button>
      </div>
    </div>
    <div class=\"col-sm-2\" style=\"margin-top: 40px; text-align: center\">
      <div class=\"form-group\">
        <button type=\"button\" @click=\"undo\" class=\"btn btn-danger\">
          Clear
        </button>
      </div>
    </div>
    <div class=\"col-sm-2\">
      <div class=\"form-group\">
        <button type=\"button\" @click=\"save_signature\" class=\"btn btn-success\">
          Save
        </button>
      </div>
    </div>
  </div>
</template>

    <script>
    export default {
      data() {
        return {
          applicant_details: [
            { first_name: \'john\', signature: \'\' },
            { first_name: \'david\', signature: \'\' },
          ],
        };
      },
    
      methods: {
        undo() {
          //will undo the signature
        },
        save_signature() {
          //Save the signature
        },
      },
    };
    </script>

标签： vuejs3

【解决方案1】：

请注意，您的代码一开始就有问题。

没有适合你的模板 html
导出默认格式不正确
列表项

您的原始问题可能在 --> v-for="(applicants, index) in 'applicant_details'" 在这里，它在 STRING 'applicant_details' 上循环。如果你想在你的数据中循环一个变量，只需使用申请者详细信息。

您也可以使用 vite.new/vue 创建生殖代码并帮助我们帮助您。这是更正后的代码：https://stackblitz.com/edit/vitejs-vite-9kvde4?file=src%2FApp.vue&terminal=dev

【讨论】：

@mathew janio 我一直在使用 vite。我将代码包装在模板中。这里我只提到了 html 部分。
@sreenishcp 我的意思是 vite.new/vue 它是一个由 stackblitz 提供支持的快速和可共享代码的工具。
哦.好的..我会尝试..谢谢伙计。我已经更新了我的问题。你能回答这个问题吗？
你使用的是 vue 2.x 还是 vue 3.x ？
我用过 vue 3.2

【解决方案2】：

我的情况大致相同，我正在尝试使用vue-signature-pad。

我尝试了Mathieu Janio 的解决方案，但我仍然不知道“撤消”功能中的内容。

就我而言，尝试了类似“this.$refs.signaturePad.undoSignature();”的东西但好吧..是的，我知道。它不是参考。所以我尝试了 this.$.vnode.key 这给出了错误“未捕获的类型错误：无法读取未定义的属性（读取 '$'）”。

任何提示如何调用它？此致

【讨论】：