Блог

Главная - Вопросы по программированию - Как я могу поместить данные внутри в компонент с Vue

Как я могу поместить данные внутри в компонент с Vue

#vue.js

#vue.js

Вопрос:

Я пытаюсь выполнить разбивку на страницы, но я не могу указать динамический итог, который я делаю так:

 <v-pagination v-model="currentPage" 
                        :page-count="total"
                        :classes="bootstrapPaginationClasses"
                        :labels="paginationAnchorTexts"
                        ></v-pagination>

Как вы можете увидеть общее количество ОС в:page-count, это динамическое общее количество, потому что я получаю данные из базы данных, мой vue-код такой:

 <script>
import vPagination from 'vue-plain-pagination';

export default {
    created() {
        this.getPosts();
    },
    methods: {
        getPosts() {
            fetch('/api/bank')
            .then(response => response.json() )
            .then(json => { 
                this.posts = json.data.data;
                this.total = json.data.last_page;
                this.current_page = json.data.current_page;
            });
        }
    },
    components: { vPagination },
    data: function() {
        return {
            postsSelected: "",
            posts: [],
            currentPage: 1,
            total: this.total,
            bootstrapPaginationClasses: {
                ul: 'pagination',
                li: 'page-item',
                liActive: 'active',
                liDisable: 'disabled',
                button: 'page-link'  
            },
            paginationAnchorTexts: {
                first: 'Primera',
                prev: 'amp;laquo;',
                next: 'amp;raquo;',
                last: 'Última'
            }
        }
    }
}
</script>

Как вы можете видеть, я использую выборку для получения данных из базы данных, а затем разделяю их на разные данные, такие как total, и я использую эту информацию внутри data: function() {} .

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

 [Vue warn]: Invalid prop: type check failed for prop "pageCount". Expected Number with value NaN, got Undefined

и я думаю, что это потому, что:

  1. total: this.total в функции data() {} является плохим или:
  2. как я могу поместить динамическую переменную total в

Как я мог это исправить?

Спасибо!

Комментарии:

1. Не создавайте свойства данных с тем же именем, что и props

2. @Phil У меня такая же проблема, и я обновляю код, ошибка: [Предупреждение Vue]: неверный реквизит: проверка типа не удалась для реквизита «pageCount». Ожидаемое число со значением NaN, не определено, что это может быть?

3. В свойстве data просто добавьте total: 0, . Надеюсь, это решит вашу проблему. Также проверьте, получаете ли вы данные из api, и выведите значение json.data.last_page просто для уверенности.

4. @beingyogi но если я добавлю total: 0, как я могу узнать общее количество данных из базы данных? потому что я получаю эти данные из fetch this.total

5. Вы можете подробно ознакомиться с реактивностью vue здесь

Ответ №1:

Если вы хотите узнать данные, полученные из API, вы можете консольно регистрировать возвращенные данные следующим образом:

 getPosts() {
            fetch('/api/bank')
            .then(response => response.json() )
            .then(json => { 
                console.log(json.data)
                this.posts = json.data.data;
                this.total = json.data.last_page;
                this.current_page = json.data.current_page;
            });
        }

Кроме того, у вас не должно быть атрибута data и атрибута props с одинаковым именем! Поэтому измените атрибут total data на другое имя и вместо этого инициализируйте его значением 0.

На самом деле, вам вообще не нужно заботиться о передаче Prop total, поскольку ваш метод getPosts не зависит от Prop! Таким образом, у вас могут быть только total: 0 данные, и это должно решить ваши проблемы