主页 / 问题 / 1307311
Accepted
doox911
Asked:2022-07-21 15:07:22 +0000 UTC2022-07-21 15:07:22 +0000 UTC

如何在 TypeScript 中声明对象的动态属性

  • 772

取自VueJs组件（版本：2，class-style-component）：

    <v-container>
      <v-row
        v-for="(item, index) in shortcodes"
        :key="index"
      >
        <v-col>
          Замена №{{ index }}([__{{ index }}__])
          <edit-select-dropdown-options-single
            :ref="`editSelectDropdownOptionsSingle${index}`"
            :value="item.options"
            @select-option="setAnswer(index, $event)"
            @remove-option="removeOption(item.options, $event)"
          />
        </v-col>
      </v-row>
    </v-container>

动态就形成了ref。接下来，我需要参考这个ref：

this
 .$refs[`editSelectDropdownOptionsSingle${replacement.shortcode_key}`}[0]
  .someMethod(someArgs);

的文档refs。

我如何通过这个键来描述有一个数组，每个元素都有一个可用的方法someMethod？

vue.js

2 个回答

  1. 好吧，如果以质朴的方式，那么就像这样。

    interface MySpecialComponent {
 someMethod: (payload: string) => void
}

    在代码中：

    (this.$refs[`editSelectDropdownOptionsSingle${replacement.shortcode_key}`] as MySpecialComponent).someMethod('Два прихлопа три притопа');
    • 0
  2. Best Answer

    在没有干扰器的情况下达到了预期的结果 ( eslint-disable-next-line, @ts-ignore)。

    const name = `editSelectDropdownOptionsSingle${replacement.shortcode_key}`;

const refs = this.$refs[name];

if (Array.isArray(refs)) {
  const component = refs[0];

  if (component instanceof EditSelectDropdownOptionsSingle) {
    component.setSelected(shortcodes[replacement.shortcode_key].options[0].id);
  }
}

    也许我不明白，但出于某种原因，如果没有这些检查， TSC无法理解$refs数组可以包含什么，我可以在索引 0 处访问该数组，并且该元素将EditSelectDropdownOptionsSingle是继承自的类的实例，Vue并且是一个组件。

    • 0

相关问题