QVector inside QML/Javascript - qt

Question

How Can I Use QVector inside QML/Javascript?
Example:
C++:
Custom class I use in QML. The class is including function that return QVector of registered ElementType
class CustomType : public QObject
{
Q_OBJECT
public:
Q_INVOKABLE QVector<ElementType*> getElements();
//.....
}
//.........
qmlRegisterType<CustomType>("CustomComponents", 1, 0, "CustomType");
qmlRegisterType<ElementType>("CustomComponents", 1, 0, "ElementType");
qRegisterMetaType<ElementType*>("ElementType*");
QML:
QML code receives instance of CustomType class (custom) and try to get QVector<ElementType*> of elements and reads its properties. But QML can't recognize QVector type.
//.......
function(){
var elements = custom.getElements()
elements[0].property //?
}

Answer 1

QML-accessible list properties need to be constructed with QDeclarativeListProperty. This applies to everything that's list-shaped, also vectors. This part of the Qt documentation has the details.

Answer 2

I am answering this years late, But, here goes. This is a simple problem to resolve. Just use a Qt QVariantList type in your C++ code instead of QVector. Qt's QVariantList is essentially a QVector containing QVariant elements. And QVariants can be damn near anything once you know what you are doing. Also, QML automatically converts a C++ QVariant to its QML equivalent. Hence, if you do this in main.cpp:
#include <QCoreApplication>
#include <QGuiApplication>
#include <QQmlContext>
#include <QQuickView>
int main(int argc, char *argv[])
{
// Prepare to enter the QML GUI world
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QGuiApplication app(argc, argv);
// Create a QVariantList to be used instead of a QVector
QVariantList dataList;
dataList << "Item 1";
dataList << 2;
dataList << 3.3;
// Create QML UI
QQuickView view;
// make your QVariantList visible to QML
QQmlContext *ctxt = view.rootContext();
ctxt->setContextProperty("myModel",
QVariant::fromValue(dataList));
// show QML UI
view.setSource(QUrl("qrc:/main.qml"));
view.show();
return 1;
} // main()
You can then do this in your main.qml:
import QtQuick 2.12
import QtQuick.Window 2.12
Item
{
// Print contents of C++ QVariantList to console
function printMeBruh()
{
console.log("modelData contains:")
console.log("-------------------")
for (var i = 0; i < 3; i++)
{
console.log(myModel[i])
}
}
Component.onCompleted: printMeBruh()
}

Answer 3

In your example you just need to return QList of QObject* from a Q_INVOKABLE function. Note, that all objects returned that way will have JavaScript ownership and will be garbage collected when your JavaScript function returns. To prevent this behavior use setObjectOwnership before pushing objects into your QList collection.
For more information about using collections in QML see QML Data Models