Component createObject has no effect

[exru]

   Rectangle{
        id: selectedArea
        color: "transparent"

        anchors.top: topLeft.top
        anchors.left: topLeft.left
        anchors.right: bottomRight.right
        anchors.bottom: bottomRight.bottom

        Component{
            id: verticalLine
            ShapePath {
                strokeColor: "red"
                strokeWidth: 1
                startY: 0
                PathLine {
                    x: 0
                    y: 100
                }
                Component.onCompleted: {
                    console.log(startX);
                }
            }
        }

        Shape {
            id: net
            anchors.fill: parent
            z:1
            Component.onCompleted: {
                for(var i = 0; i != 10; i ++){
                    verticalLine.createObject(net, {startX: i * 10}); // object created but nothing visible
                }
            }
        }



    }

[fcarney]

@exru
You need to manage the list of items in the data property of Shape. This is a list. So I added your object to the list:

Rectangle{
        id: selectedArea
        color: "transparent"

        anchors.fill: parent

        Component{
            id: verticalLine
            ShapePath {
                strokeColor: "red"
                strokeWidth: 1
                startY: 0

                PathLine { x: 0; y: 100 }

                Component.onCompleted: {
                    console.log(startX);
                }
            }
        }

        Shape {
            id: net
            anchors.fill: parent

            z:1
            Component.onCompleted: {
                var obj

                for(var i = 0; i !== 10; i ++){
                    obj = verticalLine.createObject(net, {startX: i * 10})
                    data.push(obj)
                }
            }
        }
    }

You can also create a new list, push items onto list, and substitute:

var list=[]
var obj
...
obj = createObject...
list.push(obj)
...
data = list

[6thC]

vertical line is just a component. You have to use it.

https://doc.qt.io/qt-5/qml-qtqml-component.html#createObject-method
https://doc.qt.io/qt-5/qtqml-javascript-dynamicobjectcreation.html
https://doc.qt.io/qt-5/qml-qtquick-repeater.html
https://doc.qt.io/qt-5/qml-qtquick-loader.html

[fcarney]

@exru
You need to manage the list of items in the data property of Shape. This is a list. So I added your object to the list:

Rectangle{
        id: selectedArea
        color: "transparent"

        anchors.fill: parent

        Component{
            id: verticalLine
            ShapePath {
                strokeColor: "red"
                strokeWidth: 1
                startY: 0

                PathLine { x: 0; y: 100 }

                Component.onCompleted: {
                    console.log(startX);
                }
            }
        }

        Shape {
            id: net
            anchors.fill: parent

            z:1
            Component.onCompleted: {
                var obj

                for(var i = 0; i !== 10; i ++){
                    obj = verticalLine.createObject(net, {startX: i * 10})
                    data.push(obj)
                }
            }
        }
    }

You can also create a new list, push items onto list, and substitute:

var list=[]
var obj
...
obj = createObject...
list.push(obj)
...
data = list