Vue $refs 对象的类型为“未知”答案

【问题标题】：Vue $refs Object is of type 'unknown'Vue $refs 对象的类型为“未知”
【发布时间】：2021-06-19 14:48:07
【问题描述】：

我只是想在我的 Vue 3 应用程序中使用 $refs，但我不断收到 Typescript 错误 Object is of type 'unknown'。我不确定如何解决这个问题。

这是我的 .vue 文件：

<template>
    <div id="content">
        <h2>
            Add Products
        </h2>
        <Multiselect v-model="products"
                                 mode="tags"
                                 placeholder="Select one or more products..."
                                 ref="multi"
                                 :searchable="true"
                                 :createTag="true"
                                 :options="options"></Multiselect>

        <div v-for="(product, index) in this.products"
                 v-bind:key="index"
                 v-bind:name="product">

            <Button class="primary"
                            text="Remove"
                            @click="removeProduct(product)"></Button>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Button from '@/components/Button.vue'
import Multiselect from '@vueform/multiselect'

export default defineComponent({
    name: 'TrackSymptoms',
    components: {
        Button,
        Multiselect
    },
    data () {
        return {
            products: [],
            options: [
                { value: 'Alpha', label: 'Alpha' },
                { value: 'Bravo', label: 'Bravo' },
                { value: 'Charlie', label: 'Charlie' },
                { value: 'Delta', label: 'Delta' }
            ]
        }
    },
    methods: {
        removeProduct (product: string) {
            this.$refs.multi.deselect(product)
        }
    }
})
</script>

removeProduct 函数中的this.$refs.multi.deselect(product) 行是产生错误的行。

这是通过文档指示使用它的方式：

mounted() {
  this.$refs.multiselect.open()
}

【问题讨论】：

试试(this.$refs.multiselect as InstanceType<typeof Multiselect>).open()

标签： typescript vue.js vue-component vuejs3

【解决方案1】：

您的element hasn't been rendered yet 可能。你能在访问$refs之前稍微延迟一下吗？

mounted(){
  setTimeout(() => {
    this.$refs.multiselect.open()
  }, 10)
},

【讨论】：

【解决方案2】：

Boussadjra Brahim 所说的内容有效，但不建议这样做，相反，因为看起来一切都在使用 products 数组，为什么不简单地从中删除要取消选择（删除？）的项目，它应该同时更新您的 MultiSelect 和显示列表。

<div v-for="(product, index) in this.products" :key="index" :name="product">
    <Button class="primary" text="Remove" @click="removeProduct(index)"></Button>
</div>

methods: {
    /**
     * Remove the product at the specified index
     */
    removeProduct(index: number) {
      this.products.splice(index, 1);
    },
  },

虽然我不确定它是否正确，但我有点缺乏上下文来确定它，就像 deselect() 所做的那样

【讨论】：

【解决方案3】：

 <el-table
        :data="tableData"
        @row-click="rowClicked"
        ref="tableRef"
    >


rowClicked(row: any) {
  (this.$refs['tableRef'] as any).toggleRowExpansion(row);
}

在对象上强制任何类型

编辑....同事找到了更好的解决方案。导入 element-plus 的 node_module 代码中搜索可用的相关类型。在这种情况下，el-table 有一个类型：

import { ElTable } from 'element-plus';
(this.$refs['tableRef'] as typeof ElTable).toggleRowExpansion(row);

【讨论】：

【解决方案4】：

为您分配 ref 的组件定义类型，如下所示：

  (this.$refs.multi as InstanceType<typeof Multiselect>).deselect(product)

这应该是比其他答案更好的解决方案（无意冒犯）。

  (this.$refs['tableRef'] as any).toggleRowExpansion(row);

因为我的解决方案你可以使用 IDE 的代码完成。

【讨论】：