在 vue 和 typescript 中通过 id 获取元素答案

【问题标题】：Get element by id in vue and typescript在 vue 和 typescript 中通过 id 获取元素
【发布时间】：2020-07-17 15:30:23
【问题描述】：

我正在尝试使用 vuejs 通过 id 获取 dom 元素。问题是我不知道如何访问这个元素。我正在使用这个。$refs。当我写 console.log(this.$refs) 我看到以下内容：

但是当我写 console.log(this.$refs.gauge2) 我看到未定义。有谁知道如何访问这个元素？这是我的代码：

<script lang="ts">
import Vue from 'vue'
var Gauge = require('svg-gauge')

export default Vue.extend({
    components: {
    },
    created(){
        console.log(this.$refs)
        console.log(this.$refs.$gauge2)
        var element = this.$refs.gauge2
        var gauge2 = Gauge(
            element, {
                min: -50,
                max: 50,
                dialStartAngle: 180,
                dialEndAngle: 0,
                value: 50
            }
        );
    },
})
</script>

<template>
    <div class="wrapper">
        <div id="gauge2" ref="gauge2" class="gauge-container two">
            <span class="label">.two</span>
        </div>
    </div>
</template>

谢谢

【问题讨论】：

你能把你调用console.log(this.$refs.gauge2)的代码附上吗？

标签： typescript vue.js

【解决方案1】：

您的问题是您试图从创建的方法访问引用，该方法在模板呈现之前调用。只有在模板渲染后才能访问 refs，我建议使用 mount 函数。

更多信息：

Vue.js Lifecycle Diagram

编辑看看这张图，取自Vue.js官网：

Source

【讨论】：

【解决方案2】：

this.$refs.gauge2.id

如果您得到undefined 值，原因是console.log 命令在将ref (gauge2) 分配给此元素之前运行。

【讨论】：

【解决方案3】：

我修复了它，更改了mounted创建的方法。现在可以了，谢谢！

【讨论】：

我建议您阅读文档中的 Vue 生命周期页面以避免其他类似错误：vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks

【解决方案4】：

你可以这样做：

this.$refs.gauge2.$el.id

并将触发器更改为mounted() 钩子：

【讨论】：

如果我写这个，我会收到以下打字稿错误：TS2339: Property 'id' does not exist on type 'Vue |元素 | Vue[] |元素[]'。类型“Vue”上不存在属性“id”。
我得到同样的错误：TS2339：属性'$el'不存在于类型'Vue |元素 | Vue[] |元素[]'。 “元素”类型上不存在属性“$el”。
可能是加载器的问题？
尝试更改为mounted()而不是created()，并在此处粘贴console.log(this.$refs.gauge2)的结果。那如果可以的话，你为什么需要身份证？