Most people may be a little confused when they see the title of this article. Let me briefly introduce the background first:

The company has a login center based on Vue, which I am responsible for maintaining. On the page is a conventional login interface, with a user name input box, a password input box and a login button

Today, A colleague (hereinafter referred to as A) came to me and asked me such A question:

The application he is responsible for integrates the login center into the APP end. He receives the demand that he hopes to automatically fill in the user account and password when pulling up the login page at the APP end, and then click login automatically.

Let's get to the point

We simplified the login page into the following code

<template>
  <div>
    <input name="username" type="text" v-model="account.username">
    <input name="password" type="password" v-model="account.password">
    <button class="login-button" @click="login">LOGIN</button>
  </div>
</template>

<script>
export default {
  name: 'app',
  components: {
  },
  data () {
    return {
      account: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    login () {
      $ajax({
        method: 'POST',
        url: '/api/login',
        data: this.account
      })
    }
  }
}
</script>

When the APP side pulls up the login page, it can pass in js code and execute it on the current page. Regardless of the influence of MVVM framework Vue, this is actually a very simple problem in the ancient times of the front end

const usernameInput = document.querySelector('input[name=username]')
const passwordInput = document.querySelector('input[name=password]')
const button = document.querySelector('.login-button')

usernameInput.value = 'test@dji.com' // Modify the value of the user name input box
passwordInput.value = 'xxxxxxxx' // Modify the value of the password input box

button.click() // Trigger button click event

The above is also the method that colleague A tried. However, in the actual test, he found that after running js, although the input box on the page was correctly changed to the modified value, it was not found in the ajax request initiated   username   and   password   They are all empty strings, so the problem is fed back to me

principle

In fact, if you have a certain understanding of Vue's responsive data principle, you can quickly think of the reason for this problem. The root of the problem lies in the principle of v-model:

v-model   In fact, it is vue a syntax sugar provided for convenience. It is actually expanded like this

<input name="username" type="text" :value="account.username" @input="account.username = $event.target.value">

When the user enters in the input box, the input event will be triggered to update   account.username   value

And used in the previous step

document.querySelector('input[name=username]').value = 'test@dji.com'

Simulated input behavior does not actually trigger   oninput   Event, the data obtained from the ajax request initiated after simulating the button click event is naturally the value before modification (i.e. empty string)

Solution

After understanding the principle of the problem, the solution is naturally easy to think of. Since js analog input cannot be triggered   oninput   Event, let's go further and manually trigger it with js after modifying the value   oninput   event

The implementation code is as follows:

const usernameInput = document.querySelector('input[name=username]')
const passwordInput = document.querySelector('input[name=password]')
const button = document.querySelector('.login-button')

const event = document.createEvent('HTMLEvents')
event.initEvent('input', false, true)

usernameInput.value = 'test@dji.com' // Modify the value of the user name input box
usernameInput.dispatchEvent(event) // Manually trigger the input event of the input box

passwordInput.value = 'xxxxxxxx' // Modify the value of the password input box
passwordInput.dispatchEvent(event) // Manually trigger the input event of the input box

button.click() // Trigger button click event

The above code does not consider compatibility, code encapsulation and other issues, but only provides a reference for solutions

Write at the end

In fact, the problem is not difficult, but it may be a big trouble for many students who only taste when learning knowledge. Usually I can hear some   If you can use the framework, you can deal with the interview based on the principles. You can't use the work at all   I hope you can keep the geek spirit, seriously study technology and be a real programmer in an increasingly impetuous environment.