Анимировать группу элементов в NativeScript + Vue

Question

У меня есть такой список: (он будет сгенерирован для l oop, и каждая строка связана с уникальным ref : ref = " 'dataRow' + id ")

<GridLayout class="mainList">

    <ListView
     for="( sentence , id ) in sentences" 
    ><v-template><StackLayout>

        <GridLayout 
         class="dataRow"
         :ref="'dataRow'+id"
         @tap="tapAction( 'dataRow'+id )"
        >

            ...

        </GridLayout>

    </StackLayout></v-template></ListView>

</GridLayout>

Я хотел бы расширить каждую строку данных, нажав на нее, и я получаю это с помощью этого фрагмента кода:

tapAction ( dR ) {

   this.$refs[dR].nativeView.animate ( {
       height: 300 ,
       duration: 200 ,
       curve: enums.AnimationCurve.easeIn
    } ) 

}

(Кстати, я заметил, что он расширяет несколько строк !! Я думаю, что это связано с природой ListView , но мне кажется немного странным, когда я использовал уникальный ref для каждого ряд данных! любое предложение по этой проблеме было бы полезно, но мой фактический вопрос - кое-что еще.)

моя проблема заключается в следующем:

Я хотел бы свернуть все расширенные строки сразу, но я не могу найти правильный способ сделать это! Первой моей мыслью было установить все элементы с помощью dataRow calssName в значение по умолчанию, но я не могу сделать это так просто, как мы можем выполнить в веб-браузере с помощью css + js.