Actuellement, j'apprends la vue avec laravel. Je crée un site todo simple. Je fais tout ce qui est dans welcome.blade.php . Je suis capable de stocker des todos, mais je ne peux pas voir tous les todos. Voici ce que j'ai essayé
welcome.blade.php
Route::get('/', function () {
return view('welcome');
});
Route::post('create-todo', 'TodoController@store');
code de vue
const app = new Vue({
el: '#todo',
data: {
todo: {
taskName: ''
}
},
methods: {
createTodo: function createTodo() {
var _this = this;
var input = this.todo;
axios.post('/create-todo', input).then(function (response) {
_this.todo = {'taskName': ''};
_this.getVueItems();
});
},
getData: function getData(){
axios.get('/').then(function (response) {
this.todo = response.data;
})
}
},
mounted: function () {
this.getData();
}
});
web.php
<div class="card-body">
<div class="col-md-12">
<div class="form-group">
<input type="submit" @click.prevent="createTodo()" value="Create">
<input type="text" class="form-control col-md-10" v-model="todo.taskName">
</div>
</div>
<hr>
<div class="content">
@{{ todo }}
</div>
</div>
J'ai confondu que comment renvoyer des données. Parce que / route renvoie directement la vue.
3 Réponses :
Essayez d'ajouter un autre itinéraire comme:
Route::get('/', function (Request $request) {
if($request->ajax()){
return Todo::all();
} else{
return view('welcome');
}
});
et à votre avis:
public function index(){
return Todo::all();
}
votre contrôleur devrait être comme:
axios.get('/get-todos').then(function (response) {
this.todo = response.data;
})
si vous souhaitez utiliser la même URL, essayez ceci:
Route::get('get-todos', 'TodoController@index');
merci J'y ai pensé, mais je veux montrer ces données sur la même page avec la même URL. Est-ce possible??
vous devez également ajouter use Illuminate\Http\Request; et use App\Todo; en haut de votre fichier web.php
essayez de remplacer la function (response) par (response)=> pour éviter certains problèmes
merci, ça marche. mais cela fonctionne avec ceci mounted: function () { axios.get('/').then((response) => { this.todo = response.data; console.log(this.todo) }) } pas avec ceci mounted: function () { this.getData(); } pourquoi ?? pourriez-vous s'il vous plaît expliquer
ah oui, l'erreur est ici getData: function getData(){ .. ça devrait être comme getData: function(){ ... ou getData(){ ... , la même chose pour `createTodo`
methods: { createTodo() { var _this = this; var input = this.todos; axios.post('/create-todo', input).then(function (response) { _this.todos.taskName = {'taskName': ''}; }) }, getData() { axios.get('../').then((response) => { var _this = this; _this.todos = response.data; }) } }, mounted: function () { this.getData(); } après cela, je peux afficher les données, mais je ne peux pas les stocker.
Chaque fois que vous utilisez VueJS, vous utilisez un outil frontal. Cet outil frontal récupérera les données d'une partie «backend». Vous devez renvoyer des données et non le HTML (sauf si vous avez une raison spécifique de le faire)
Renvoyer les données:
axios.get('/').then(response => {
this.todo = response.data;
})
À Vue:
Route::get('/', function () {
return Todo::all();
});
Notez la response => {...} . Si vous n'utilisez pas la notation ECMA6, this fera référence à la fonction elle-même et non à l'instance de Vue.
Puisque vous êtes un débutant, je vous conseille vivement de vérifier ceci https://developers.google.com/web/tools/chrome-devtools/network/
Ce tutoriel vous aidera à comprendre (voir) les données renvoyées et à comprendre ce qui se passe "sous le capot"
ÉDITER
Également un peu plus: vous renvoyez une collection que vous devrez parcourir. Sinon, vous afficherez l'objet json
merci, mais il montre directement toutes les données. Il n'affiche pas le contenu html
@MaulikShah c'est exactement le comportement attendu. On s'attend à ce que VueJS (axios) obtienne des données et non du contenu HTML
mais je veux aussi montrer que les données au format bien signifie dans les balises html
Depuis le backend, vous devez transmettre des données et en face, vous devez récupérer des données.
axios.get('/').then(response => {
this.todo = response.data;
})
À Vue:
Route::get('/', function () {
return Todo::all();
});