Question

我想测试一个Vue组件在正在观看接收输入的输入字段之后正确解析并保存数据。

该组件如下所示：

<template>
<div>
   <form>
     <div :key="key" v-for="key in contexts" class="row">
        <div class="input-field">
          <input v-model="saved_contexts[key]" placeholder="" :id="key" type="text">
          <label :for="key">{{key}}</label>
        </div>
    </div>
   </form>
</div>
</template>
<script>
  export default {
    data(){
      return {saved_contexts: {}}
    }
  },
</script>

我遗漏了填充“contexts”数组的代码，请假设它在那里工作。

我想编写一个测试，演示输入字段的输入是否会导致saved_contexts对象正确更新（正确的键名称使用正确的值更新）。

我试过简单

const input = vm.$el.querySelector('#test'); input.text = 'hello';

但收到Attempted to assign to readonly property.错误。

我正在探索调度输入事件，但我无法弄清楚如何使用包含的文本来实际放入输入字段。

Answer 1

这应该是你要找的东西：

<template>
  <div>
    <form>
      <div v-for="key in contexts" :key="key" class="row">
        <div class="input-field">
          <input v-model="saved_contexts[key]"
                 :id="key"
                 @change="logInput(key, saved_contexts[key])"
                 placeholder=""
                 type="text">
          <label>{{key}}</label>
        </div>
      </div>
    </form>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        contexts: [
          'one',
          'two',
          'three',
        ],
        saved_contexts: {},
      };
    },
    methods: {
      logInput(key, input) {
        console.log(`saved_contexts's key: '${key}', updated with input: '${input}'`);
        console.log(this.saved_contexts[key] === input);
        console.log(this.saved_contexts);
      },
    },
  };
</script>

Vue在直接操作DOM时会遇到一些问题，但是这里有一个日志记录功能，用于验证输入是否已保存到saved_contexts。

如何强制输入到Vue管理的输入字段进行测试？

1 个答案: