Почему v-for не видит переменную?

Question

[Vanya Huk]

вот когда у фигурных скобках вывожу, то все норм, а когда даю ее v-for то невидит (last_page -
интовое число)

<template>
    <div v-if="this.$parent.pages.last_page > 1" class="col-xs-12 text-center">

        <ul class="list-unstyled pagination">

            <li  v-if="this.$parent.pages.last_page < ( this.$parent.pages.step * 2 + 6 )" class="page__item" onclick="filter.get_products(this)" >

             </li>

            {{this.$parent.pages.last_page}}
        </ul>
    </div>
</template>

Comments

[Николай Семенов]

вы бы показали как не выводит, фраза "когда даю ее v-for то не видит" это как?

[Vanya Huk]

Николай Семенов: вот смотрите - есть

v-if="this.$parent.pages.last_page < ( this.$parent.pages.step * 2 + 6 )"

и в том же теге пишу цыкл
v-for="i in this.$parent.pages.last_page"
тогда и выдает ошыбку
Cannot read property 'pages' of undefined

[Николай Семенов]

Vanya Huk: а
this.$parent.pages.last_page}
что выводит?

[Vanya Huk]

Николай Семенов: переданое мной значене

[Николай Семенов]

Vanya Huk: я это к тому, вы уверены что там массив?
Если last_page - интовое число

[Vanya Huk]

Николай Семенов : там и есть интовое число, но я убрал this и вроде как заработало

Answer 1

[Антон Антон]

в шаблонах не надо использовать this, ну и использовать доступ к родительскому компоненту через $parent - не очень хорошо. Попробуйте связать компоненты через props, или использовать shared storage или vuex

Comments

[Vanya Huk]

Антон Антон: а как через props обратиться к родительскому свойству data?

[Антон Антон]

Vanya Huk: как-то так: https://jsfiddle.net/88yj2t19/1/
общий принцип - в дочерние компоненты передаем props, в родительский - отправляем события.
Это позволяет переиспользовать дочерние компоненты в разных родителях, не привязываясь к структуре данных конкретного родителя

[Vanya Huk]

Антон Антон: спасибо, кстати, а почему v-for в компоненте не видит значения, которое возвращает computed?

<ul class="list-unstyled pagination">

            <li v-for="page as get_pages" class="page__item" onclick="filter.get_products(this)">
{{page}}
            </li>
        </ul>

computed: {

            get_pages: function () {

              return [1,2,3,4,5]
            }
}

пишет, что нету такого значения page

[Антон Антон]

Vanya Huk: потому что не as, а in

[Vanya Huk]

Антон Антон: блииин, 2 часа сидел ))