Qt 5.11 | Qt QML | QML Types | var QML Basic Type

Qt 5.11.3 Reference Documentation

# var QML Basic Type

a generic property type.

The `var` type is a generic property type that can refer to any data type.

It is equivalent to a regular JavaScript variable. For example, var properties can store numbers, strings, objects, arrays and functions:

      Item {
          property var aNumber: 100
          property var aBool: false
          property var aString: "Hello world!"
          property var anotherString: String("#FF008800")
          property var aColor: Qt.rgba(0.2, 0.3, 0.4, 0.5)
          property var aRect: Qt.rect(10, 10, 10, 10)
          property var aPoint: Qt.point(10, 10)
          property var aSize: Qt.size(10, 10)
          property var aVector3d: Qt.vector3d(100, 100, 100)
          property var anArray: [1, 2, 3, "four", "five", (function() { return "six"; })]
          property var anObject: { "foo": 10, "bar": 20 }
          property var aFunction: (function() { return "one"; })
      }

## Change Notification Semantics

It is important to note that changes in regular properties of JavaScript objects assigned to a var property will not trigger updates of bindings that access them. The example below will display "The car has 4 wheels" as the change to the wheels property will not cause the reevaluation of the binding assigned to the "text" property:

      Item {
          property var car: new Object({wheels: 4})

          Text {
              text: "The car has " + car.wheels + " wheels";
          }

          Component.onCompleted: {
              car.wheels = 6;
          }
      }

If the onCompleted handler instead had `"car = new Object({wheels: 6})"` then the text would be updated to say "The car has 6 wheels", since the car property itself would be changed, which causes a change notification to be emitted.

## Property Value Initialization Semantics

The QML syntax defines that curly braces on the right-hand-side of a property value initialization assignment denote a binding assignment. This can be confusing when initializing a `var` property, as empty curly braces in JavaScript can denote either an expression block or an empty object declaration. If you wish to initialize a `var` property to an empty object value, you should wrap the curly braces in parentheses.

For example:

      Item {
          property var first:  {}   // nothing = undefined
          property var second: {{}} // empty expression block = undefined
          property var third:  ({}) // empty object
      }

In the previous example, the `first` property is bound to an empty expression, whose result is undefined. The `second` property is bound to an expression which contains a single, empty expression block ("{}"), which similarly has an undefined result. The `third` property is bound to an expression which is evaluated as an empty object declaration, and thus the property will be initialized with that empty object value.

Similarly, a colon in JavaScript can be either an object property value assignment, or a code label. Thus, initializing a var property with an object declaration can also require parentheses:

      Item {
          property var first: { example: 'true' }    // example is interpreted as a label
          property var second: ({ example: 'true' }) // example is interpreted as a property
          property var third: { 'example': 'true' }  // example is interpreted as a property
          Component.onCompleted: {
              console.log(first.example) // prints 'undefined', as "first" was assigned a string
              console.log(second.example) // prints 'true'
              console.log(third.example) // prints 'true'
          }
      }

See also QML Basic Types.