How can I access and change a item in Component in QML

Question

In a Qml file ,the code like:

StackView {
    id: stackView
    anchors.right: parent.right
    width: parent.width/2-20
    initialItem:patientdetail

    Component{
        id:patientdetail
        Column {
            id:detailcolumn
            spacing: 2
            anchors.right: parent.right
            width: parent.width/2-20

            Label {
                id: label
                color: "#ffffff"
                text: qsTr("User ID")
            }

            TextField {
                id: textField_id
                readOnly: true
                placeholderText: qsTr("")
            }
        }
      }
    Component{
        id:component2
        //...other component will add to stackview
      }
   }

And I want to change the text of TextField by a JS function(in same file) like:

function updatedetail(clear,rowindex){
    if(clear){
        textField_id.text="";
    }
    else{
        textField_id.text=jsonModel1.model.get(rowindex).id;
    }
}

But there is a error:

ReferenceError: textField_id is not defined

Where the error occurred？

Answer 1

As you try to change an Object that is not yet instantiated, it will fail. But even when it is instantiated, its id will be in a different scope, that can't be reached like that.
This is necessary, as the same Component might be instantiated multiple times (e.g. as a delegate in a ListView) so it would not be unique in the context anymore.

Uppon instantiation of your StackView, your Component will be instantiated an pushed on the StackView. Now you have an instance and might alter exposed properties by using:

currentItem.textFieldText = newValue

in your function. For this to work you need to expose the property:

Component{
    id:patientdetail
    Column {
        id:detailcolumn
        spacing: 2
        anchors.right: parent.right
        width: parent.width/2-20

        property alias textFieldText: textField_id.text // in this context, you have access to the id. Expose it, to change it from the outside.

        Label {
            id: label
            color: "#ffffff"
            text: qsTr("User ID")
        }

        TextField {
            id: textField_id
            readOnly: true
            placeholderText: qsTr("")
        }
    }
}

However, as the instance might be destroyed and recreated later, this change would not be permanent, so it would be better to bind the TextField.text to a property of an object, that will survive as long as necessary. This could be a contextProperty exposed from C++ or a QtObject passed as a model, or just a property, e.g. in the StackView.

StackView {
    id: stackView
    anchors.right: parent.right
    width: parent.width/2-20
    initialItem:patientdetail

    // Change this property. The textField_id.text will be bound to it.
    property string textFieldText

    Component{
        id:patientdetail
        Column {
            id:detailcolumn
            spacing: 2
            anchors.right: parent.right
            width: parent.width/2-20

            Label {
                id: label
                color: "#ffffff"
                text: qsTr("User ID")
            }

            TextField {
                id: textField_id
                readOnly: true
                placeholderText: qsTr("")
                text: stackView.textFieldText
            }
        }
    }
}