小编Mud*_*avi的帖子

我正在构建一个 React 自动完成组件并使用 Jest 和 React-testing-library 对其进行测试。

我有两个输入。当 input1（具有自动完成功能）处于焦点时，单击按钮Tab应该在 input1 不为空时使用文本自动填充 input1，或者在 input1 为空时将焦点移动到 input2（这是表单的默认行为）。

表单.jsx

    const onKeyDown = (e) => {
        if(e.key === 'Tab' && e.target.value !== '') {
            setInput1Text('some-autocomplete-text');
            e.preventDefault(); //prevent focus from moving to the next input(input2)
        }
    };

表单.test.jsx

    test('pressing Tab button should move focus to input2 as input1 is empty', () => {
        const input1 = container.getElementsByTagName('input')[0];
        const input2 = container.getElementsByTagName('input')[1];

        fireEvent.change(input1, { target: { value: '' } });
        fireEvent.keyDown(input1, { …

我正在研究的应用程序呈现了一系列人和他们的孩子.阵列中约有600人.我在文本输入中显示人名和每个人的孩子的名字,以便他们可以编辑.我使用V-model双向绑定,所以我可以轻松保存编辑.

<tr v-for="person in persons">
  <td>
    <input type="text" v-model="person.name" />
  </td>
  <td v-for="child in person.children">
    <input type="text" v-model="child.name" />
  </td>
</tr>

问题是,当我开始输入文本框时,有一个滞后,我必须等待几秒钟才能输入显示内容.

当我使用v-bind:value或当我减少来自api的人数说50个人时,这不会发生.我可以使用分页,但我的老板想要立即看到所有结果.

我的问题是,如何vue.js在对大数据使用双向绑定时更快地执行？