Page 1 of 1

vue listview

Posted: Mon Oct 22, 2018 10:50 pm
by Rinat
Добрый день!
Большое спасибо за чудесный CSS фреймворк, на мой взгляд он минимум более расширенный чем все тот же bootstap, uikit и т.п.

Вопрос следующий:
Есть listview
Есть vue

Code: Select all

        <ul data-role="listview"  data-view="icons-medium">
            <li v-for = "(item) in list"
                v-bind:key="item.name"
                v-bind:data-icon="item.full_icon"
                v-bind:data-caption="item.name"
                v-on:dblclick="goto(item.url)" ></li>
        </ul>
При первой загрузки - все ок.
Но когда мы перезагружаем список, html перезагружается, но отрендеривается всего один элемент. Получается вот такой код:

Code: Select all

<!--тут первый элемент отрендерился !-->
<ul data-v-a9802662="" data-role="listview" data-view="icons-medium" class="listview view-icons-medium" data-role-listview="true"><li data-v-a9802662="" data-icon="<span class = &quot;fg-orange fa mif-folder&quot;></span>" data-caption="Музыка" class="node current current-select"><label class="checkbox" for="checkbox-1540237020764325"><input data-role="checkbox" data-style="1" id="checkbox-1540237020764325" class="" data-role-checkbox="true" type="checkbox"><span class="check"></span><span class="caption"></span></label><span class="icon"><span class="fg-orange fa mif-folder"></span></span><div class="data"><div class="caption">Музыка</div></div></li>

<!-- А остальные - нет
<li data-v-a9802662="" data-icon="<span class = &quot;fg-orange fa mif-folder&quot;></span>" data-caption="тест"></li>
<li data-v-a9802662="" data-icon="<span class = &quot;fg-orange fa fa-file-audio-o&quot;></span>" data-caption="02. The Jumping Cats - Never Mind.mp3"></li><li data-v-a9802662="" data-icon="<span class = &quot;fg-orange fa fa-file-audio-o&quot;></span>" data-caption="03. The Jumping Cats - Crocodile Goes For Porto.mp3"></li>
</ul>
Возможно как-то решить проблему? Подпихнуть метод или функцию, которая перерендерит контент?

Re: vue listview

Posted: Fri Nov 02, 2018 9:02 pm
by olton
Здравствуйте. https://metroui.org.ua/vuejs.html Возможно это Вам поможет. Суть в том, что Vue работает со своим Shadow DOM, поэтому оно сеачала делает deatach всему HTML,а потом, когда все отрендерит, делает atach. Metro 4 нужно подключать после того как произошел mount дерева HTML.