Implique 3 tableaux de données : utilisateurs, articles, images
Utilisateurs et articles, un-à-plusieurs, c'est-à-dire qu'un utilisateur peut avoir plusieurs articles
Articles et images, un-à-un, c'est-à-dire qu'un article a une image , (Bien que l'image puisse être utilisée comme colonne dans le tableau des articles, nous ne le ferons pas encore ici)
Contrôleur : interrogez les articles de l'utilisateur actuellement connecté et les images correspondant aux articles, renvoyez-les et utilisez vuejs pour les recevoir à la réception.
public function articles()
{
$user=\Auth::user();
$articles = $user->articles()->with('images')->get();
return $articles;
}
javascript :
<script type="text/javascript">
Vue.config.debug = true;
var vm = new Vue({
el: "#app",
data: function(){
return{
items: []
}
},
created() {
var article=this;
/* $.getJSON('/articles/image',function(data){
console.log(data);
article.items=data;
});*/
this.$http.get('/articles/image').then((response) => {
console.log(response.body);
article.items=response.body;
}, (response) => {
// error callback
});
}
});
</script>
html :
<p class="row" v-for="(index, item) in items">
<p class="col-xs-2">
@{{ item.title }}
</p>
<p class="col-xs-2">
@{{ item.image }}
</p>
</p>
Il y a deux questions, le code est dans la partie js :
1 Utilisez $.getJSON
pour envoyer une requête ajax et renvoyer un objet Le champ titre dans le html peut être affiché normalement. Le champ image de la table associée ne peut pas être affiché. Comment dois-je l'écrire pour l'afficher ?
2. Lorsque vous utilisez le code vue-resource pour envoyer une requête ajax, un tableau est renvoyé et les éléments du tableau sont des objets. À ce stade, le champ titre ne peut pas être affiché, et bien sûr le champ image ne sera pas affiché. . Comment faut-il l'écrire pour l'afficher ?
item.image.image
Utilisez plutôt
response.data
或者response.json
response.data