php - vue rend la page de liste, premier problème de chargement de données

Question

Supposons qu'il existe une page de liste et que le v-for de vue soit utilisé pour afficher la page.
Ainsi, lorsque la page est chargée, les données de v-for sont demandées via ajax lorsque la page est chargée
ou les données sont-elles mises en boucle par le programme back-end ?
Quelque chose comme ceci :

<p id="data">
    <table class="table table-striped table-hover">
        <tr v-for="todo in datas">
            <td>{{todo.title}}</td>
            <td>{{todo.learn_name}}</td>
            <td>{{todo.is_exist}}</td>
            <td>{{todo.is_download}}</td>
        ≪/tr>
    </tableau>
</p>

 var data = new Vue({
        el:'#données',
        données:{
            données :[
                <?php foreach ($données en $valeur) :?>
                {
                    titre : '<?php echo $value["title"]?>'
                    learn_name : '<?php echo $value["learn_name"]?>',
                    is_exist : '<?php echo $value["is_exist"]?>',
                    is_download : '<?php echo $value["is_download"]?>'
                },
                <?php endforeach;?>
            ]
        }
    });

Answer 1

Il est préférable de demander des données via ajax

Plus le couplage entre front-end et back-end est faible, mieux c'est

Answer 2

Il n'y a rien de mal avec ce que vous avez fait ci-dessus.

Mais puisque j'ai évoqué la question du premier chargement, je dirai quelques mots supplémentaires.

Il semble que vos pages soient toutes rendues directement par PHP, il est donc préférable de sortir les données de la première page directement dans le cache. Cela peut enregistrer la première requête ajax et restituer directement les données, ce qui peut améliorer la vitesse de chargement de. le premier écran

Si vous devez prendre en compte le référencement, vous pouvez également envisager d'utiliser php pour afficher directement la structure HTML lors du premier chargement de la page. Les demandes de changement de page ultérieures utilisent ajax combiné avec la logique v-if 与 v-else de vuejs.

Answer 3

Tout va bien, donnez simplement une valeur initiale aux données et remplacez-la une fois qu'Ajax a obtenu les données.

Answer 4

Lorsque vue est montée, appelez une méthode pour obtenir des données de manière asynchrone

Answer 5

Maintenant que vous utilisez Vue, n'utilisez plus de boucles back-end Parce que Vue est basé sur les données, laissez ces problèmes de traitement et d'affichage des données à Vue

.

Answer 6

La fonction back-end est transformée en API et le front-end peut être appelé à l'aide de Vue. Pas besoin de les mélanger.

Vous êtes trop intimidateur pour être vu et vous ne pourrez pas obtenir de données.

Answer 7

Merci pour vos réponses. J'utilise vue-resource pour récupérer les données lors du premier chargement et les décharger dans la méthode créée.
html :

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/vue.resource/1.3.1/vue-resource.min.js"></script>
<p id="data">
    <table class="table table-striped table-hover">
        <tr v-for="todo in datas">
            <td>{{todo.title}}</td>
            <td>{{todo.learn_name}}</td>
            <td>{{todo.is_exist}}</td>
            <td>{{todo.is_download}}</td>
        </tr>
    </table>
    <button  v-bind:class="[{ 'btn btn-success': list.is_show ,'btn btn-info': !list.is_show }]" v-for="list in lists" v-on:click="clickEvent(list.no)">{{list.no}}</button>
</p>

js :

var cache = {};
var url = '<?php echo Yii::$app->urlManager->createUrl("/collect-data-copy/vue")?>';
var ajaxGetData = function (page) {
    if(page in cache){
        data.datas = cache[page].data;
        data.lists = cache[page].list;
    }else{
        Vue.http.post(url, {page:page,'<?= Yii::$app->request->csrfParam ?>': '<?= Yii::$app->request->getCsrfToken() ?>'},
            {'emulateJSON':true}).then(function (res) {
            data.datas = res.body.data;
            data.lists = res.body.list;
            cache[page] = res.body;
        });
    }
};

var data = new Vue({
    el:'#data',
    data:{
        datas:{},
        lists:{}
    },
    created:function(){
        ajaxGetData(45);
    },
    methods:{
        clickEvent:function (page) {
            ajaxGetData(page);
        }
    }
});