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

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
}
}
}
}