javascriptlistviewnativescriptnativescript-vuenativescript-telerik-ui

ListView.setClickable() doesn't work. (Nativescript-Vue)


I'm writting Nativescript-Vue app.

I have a component with two child components in it. So when I'm tapping a button placed in the second one, I need to disable scrolling of ListView placed in the first one.

So I took my ListView element via "ref=" and put it in store (Vuex)

<ListView ref="listViewEl" ></ListView>
...
mounted() {
    store.commit('putElInStore', this.$refs.listViewEl)
}

...

putElInStore(state, element) {
    state.listViewEl = element
}

I need to make ListView scrolling disabled when I'm tapping a button in the second child component. So I do it using store.commit:

<Button @tap="disableListViewScrolling"></Button>
...
disableListViewScrolling() {
    store.commit('disableScrolling')
}

...

disableScrolling(state) {
    state.listViewEl.nativeView.android.setClickable(false)
}

So I don't get any errors in this case, but there is no any reaction at all. It just doesn't work.

I also tried using setEnabled(false) instead of. It works, but incorrectly.

What do I miss? Where is my mistake?

Thanks in advance.


Solution

  • There shouldn't be any need to store the element in Vuex. Without the full code I'll give a you a general layout of how this could be performed.

    <Parent>
        <childOne ref="listViewChild"></childOne>
        <childTwo @disableButtonTapped="$refs.listViewChild.disableClick()"></childTwo>
    </Parent>
    
    <childOne> 
       <ListView ref="list"></ListView>
    </childOne>
    
    <script>
    export defaults {
      methods: {
        disableClick () {
          this.$refs.list.nativeView.android.setClickable(false)
        }
      }
    }
    </script>
    
    <childTwo> 
       <Button @tap="$emit('disableButtonTapped')"></Button>
    </childTwo>
    

    Obviously this code isn't exact.