QML TypeError: Property 'xx' of object yy is not a function

Question

I have this main.qml:

import QtQuick 2.13
import QtQuick.Window 2.13
import QtQuick.Controls 2.5

ApplicationWindow {
   ...

   Item {
     // This Item is to provide needed properties for functionality in the original app that was elided out in this example.
     // It was left in in case it's relevant to the problem.
     ...

     Column {           
        ...

        Text {
           text: qsTr("Masked text")

           SlidingMask {
              id: testMask
              anchors.fill: parent                    
              ...
           }
        }

        Row {
           Button {
              id: btnRevealText
              text: qsTr("Reveal")
              ...
           }

           Button {
              id: btnHideText
              text: qsTr("Hide")
              ...
           }
        }
     }
  }

  Connections {
     target: btnRevealText
     onPressed: testMask.reveal()
  }

  Connections {
     target: btnHideText
     onPressed: testMask.hide()
  }
} 

And this SlidingMask.qml that's registered in the qml.qrc:

import QtQuick 2.0

Rectangle {
           ...

           function hide() {
                            ...
           }
           function reveal() {
                            ...
           }
}

When I run the app and try to press the buttons, I get the following errors:

TypeError: Property 'hide' of object SlidingMask_QMLTYPE_7(0x19991132c50) is not a function
TypeError: Property 'reveal' of object SlidingMask_QMLTYPE_7(0x19991132c50) is not a function

However, if I try changing the Connections to alter a property of the SlidingMask instead of calling a function, it works fine.

I've also tested this component previously and didn't run into any problems then, although I wasn't using Connections in that test.

I've searched here and on Google for an answer, but nothing I've found seems relevant to my situation. How would I fix this?

Answer 1

Here is a simple example which works properly:

//main.qml
ApplicationWindow {
    id: window
    width: 640
    height: 480
    visible: true

    Column{
        ItemWithFunction{
            id: sc
            width: 100
            height: 100
        }

        Button{
            id: btn1
            text: 'Test Connection'
        }
    }

    Connections{
        target: btn1
        onPressed: sc.testFunction();
    }

}

//ItemWithFunction.qml
Rectangle{
    color: 'red'

    function testFunction(){
        console.log("SOMETHING HAPPENED")
    }
}

It seems that you are not putting your functions in SlidingMask root but in one of its child components.