[Vuejs]-How do I force input to an input field managed by Vue for testing?

by

0👍

This should be what you’re looking for:

<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 has some issues when manipulating the DOM directly, but here you have a logging function, which verifies that the input has been saved to the saved_contexts.

Leave a comment