Skip to main content

Variable Assignment in Single-Page Applications

In the context of single-page applications (such as Vue and React), it may not be possible to change their variables by manipulating elements. For example, after clicking on a date control element, the corresponding model variable cannot be modified. Softfactory provides a way to modify such variables.

Install Dependencies​

yarn @softfactory/auto-tester-helper

or

npm install @softfactory/auto-tester-helper

Import Dependencies​

It is usually imported in the entry file, such as (main.js):

import '@softfactory/auto-tester-helper'

Setting Variables in Vue​

tip

Explanation of the Principle: In a Vue application, each Vue component instance is attached to the DOM element it controls. This allows you to access the Vue instance by accessing the DOM. In development mode, the Vue instance is typically attached as an attribute of the DOM element, usually __vue__. This makes it convenient for developers to access and debug in the console.

For example, we can obtain the vue instance through the following code and call its $set method to assign a value to the model variable startTime of the instance:

var now = new Date();
const v = document.querySelector("#pane-NORMAL > div > div.coupon > form").__vue__;
v.$set(v.model,'startTime', now)