this is my Axios component
<template>
<div>
<div class="comment">
<div class="body">
<p>{{fulluser.name}}</p>
</div>
<img class="image" :src="userimg" alt="" width="50px" height="50px">
</div>
</div>
</template>
<script>
import axiosRetry from 'axios-retry';
export default {
name: "commentcomponent",
props:
[
"comment"
],
data()
{
return{
fulluser:null
}
},
computed:
{
userimg()
{
return "/images/"+this.fulluser.image;
}
},
created() {
// axiosRetry(axios, { retries: 5 });
axios.get("/comment/userimage/"+this.comment.id)
.then(res=>
{
this.fulluser=res.data;
console.log(this.fulluser.id)
})
},
methods:
{
userimg()
{
return "/images/"+this.fulluser.image;
}
}
}
</script>
when I open the browser it works correctly but when I inspect it give me this error
app.js:44975 [Vue warn]: Error in render: "TypeError: Cannot read property 'name' of null"
but it works in the browser and it gives me all images and names
how can I fix this?
Calling axios is asynchronous. That means the component is rendered before initializing fulluser value.
So you need to consider when fulluser is null even though it may be a short period.
<p>{{fulluser && fulluser.name || ''}}</p>
Or
data()
{
return{
fulluser: {
name: ''
}
}
},
Related
I have the following Problem:
I have a table with the names of some companies on a full set up laravel and i want them to be displayed via vue.js
i got the following done with a tutorial but it wont work out as it's intended to. I just get the Table Header.
It has to be solved via the API.
Please help :)
Welcome.vue
<script setup>
import { Head, Link } from '#inertiajs/inertia-vue3';
import axios from 'axios';
</script>
<template>
<Head title="Welcome" />
<div class="body">
<FirmenListe :firmas = "firmas"></FirmenListe>
</div>
</template>
<script>
import FirmenListe from "./FirmenListe.vue"
export default {
name: "App",
components: {
FirmenListe
},
data(){
return{
url: "http://localhost:5174/routes/api.php",
firmas: []
};
},
methods: {
getFirma(){
axios.get(this.url).then(data => {
this.firmas = data.data;
})
}
},
created(){
this.getFirma();
}
}
</script>
FirmenListe.vue
<template>
<div class="firma-liste">
<div class="data">
<table class="ui celled table">
<tr>
<th>ID</th>
<th>Firmenname</th>
</tr>
<body>
<tr>
<Firmen
v-for="firmas in firmas"
:key="firmas.id"
:firmas="firmas"/>
</tr>
</body>
</table>
</div>
</div>
</template>
<script>
import Firmen from "./Firmen.vue";
export default {
name: "FirmenListe",
components: {
Firmen
},
props: {
firmas: {
type: Array
}
}
}
</script>
Firmen.vue
<template>
<td>{firmas.id}</td>
<td>{firmas.firmenname}</td>
</template>
<script>
export default {
name: "firmas",
props: {
firmas: {
type: Object
}
}
}
</script>
routes/api.php
<?php
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\FirmaController;
use App\Http\Controllers\MitarbeiterController;
/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/
Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
return $request->user();
});
Route::resource('firma', 'FirmaController');
Route::resource('mitarbeiter', 'MitarbeiterController');
You call a wrong route
try this :
return{
url: "http://localhost:5174/api/firma",
firmas: []
};
},
I have created a blade layout that uses #yeild and has a script to get some json data, this looks like this:
...
<div class="col-lg-6" id="comments">
<h3>Comments</h3>
#yield("comment_list")
</div>
...
<script>
const Comments = {
data() {
return {
comments: []
}
},
mounted() {
axios.get("{{route('api.comments.index')}}")
.then(response=> {
this.comments = response.data;
})
.catch(response => {
console.log(response);
})
}
}
Vue.createApp(Comments).mount('#comments');
</script>
Then I add to the "comment_list" in a different file.
I know I can loop through the response like this:
<li v-for="comment in comments">
#{{ comment.title }}
</li>
However I need this in a custom blade component, an example of what I want to achieve is this:
#foreach($comment in comments)
<x-comment-view :title="$comment->title" :content="$comment->content" :author="$comment->user->name"/>
#endforeach
Any help would be appreciated, I'm not sure what to do here.
Backend Laravel with scout and algolia search, Lighthouse-php
Below laravel grapql:
products(search: String #search, orderBy: _ #orderBy(columns: ["created_at"])): [Product!]! #paginate
Graphql-playground search work perfectly:
products(first: 5, search: $searchText) {
data {
id
name
description
}
paginatorInfo {
currentPage
lastPage
}
}
}
Vue template need advice how to complete my code with search functionality?:
<template>
<div class="py-16 px-16 text-gray-800">
<div>
Search
<input v-model="search" type="search" />
</div>
<div v-for="product in products" :key="product.slug">
?????
</div>
</div>
</template>
<script>
import ALL_PRODUCTS from '#/graphql/AllProducts.gql'
export default {
apollo: {
products: {
fetchPolicy: 'network-only',
query: ALL_PRODUCTS,
variables() {
return {
searchText: this.search,
}
},
skip() {
return !this.search
},
},
},
data() {
return {
search: '',
}
},
head: {
title: 'Products',
},
}
</script>
Please advice. Thank you!
Finally resolve my issue:
<div class="py-16 px-16 text-gray-800">
<div>
Search
<input v-model="search" type="search" #input="searchResults()" />
</div>
<div v-if="products">
<div v-for="product in products.data" :key="product.slug">
<NuxtLink
:to="{ name: 'products-slug', params: { slug: product.slug } }"
>{{ product.name }}</NuxtLink
>
</div>
</div>
</div>
</template>
<script>
import ALL_PRODUCTS from '#/graphql/AllProducts.gql'
export default {
apollo: {
products: {
fetchPolicy: 'network-only',
query: ALL_PRODUCTS,
variables() {
return {
searchText: this.search,
}
},
skip() {
return !this.search
},
},
},
data() {
return {
search: '',
}
},
methods: {
searchResults() {
return this.products
},
},
head: {
title: 'Products',
},
}
</script>
I am creating commenting system. Now, I want to post a new comment, but when I send a comment, I got an error in http://127.0.0.1:8000/comments/51.
The GET method is not supported for this route. Supported methods:
POST.
I want to post a comment in this URL http://127.0.0.1:8000/results/51.
In my chrome dev tool console, I have this error
Failed to load resource: the server responded with a status of 500
(Internal Server Error)
web.php
Route::middleware(['auth'])->group(function(){
//post a comment
Route::POST('comments/{post}', 'CommentController#store')->name('comment.store');
});
//comment area
Route::get('results/{post}/comments', 'CommentController#index');
Route::get('comments/{comment}/replies', 'CommentController#show');
comments.vue
<template>
<div class="commentarea" >
<div class="comment-posts" >
<div v-if="!auth" class="user-comment-area" >
<div class="user-post">
<!---<img src="{{asset('people/person7.jpg')}}" class="image-preview__image">--->
<input v-model="newComment" type="text" name="comment">
</div>
<div class="comments-buttons">
<button class="cancel-button">Cancel</button>
<button #click="addComment" class="comment-button" type="submit">Comment</button>
</div>
</div>
<h4>Comments ()</h4>
<div class="reply-comment" v-for="comment in comments.data" :key="comment.id">
<div class="user-comment">
<div class="user">
<!---<img src="{{ $comment->user->img }}" class="image-preview__image">--->
<avatar :username="comment.user.name"></avatar>
</div>
<div class="user-name">
<span class="comment-name">{{ comment.user.name }}</span>
<p>{{ comment.body }}</p>
</div>
</div>
<div class="reply">
<button class="reply-button">
<i class="fas fa-reply"></i>
</button>
</div>
<replies :comment="comment"></replies>
</div>
</div>
<div>
<button v-if="comments.next_page_url" #click="fetchComments" class="load">Load More</button>
</div>
</div>
</template>
<script>
import Avatar from 'vue-avatar'
import Replies from './replies.vue'
export default {
props: ['post'],
components: {
Avatar,
Replies
},
mounted() {
this.fetchComments()
},
data: () => ({
comments: {
data: []
},
newComment: '',
auth: ''
}),
methods: {
fetchComments() {
const url = this.comments.next_page_url ? this.comments.next_page_url : `/results/${this.post.id}/comments`
axios.get(url).then(({ data }) => {
this.comments = {
...data,
data: [
...this.comments.data,
...data.data
]
}
})
.catch(function (error) {
console.log(error.response);
})
},
addComment() {
if(! this.newComment) return
axios.post(`/comments/${this.post.id}`, {
body: this.newComment
}).then(( {data} ) => {
this.comments = {
...this.comments,
data: [
data,
...this.comments.data
]
}
})
}
}
}
</script>
commentsController.php
public function store(Request $request, Post $post)
{
return auth()->user()->comments()->create([
'body' => $request->body,
'post_id' => $post->id,
'comment_id' => $request->comment_id
])->fresh();
}
comment.php
protected $appends = ['repliesCount'];
public function post()
{
return $this->belongsTo(Post::class);
}
public function getRepliesCountAttribute()
{
return $this->replies->count();
}
I am glad if someone helps me out.
your URL is : http://127.0.0.1:8000/results/51.
your routes should be :
Route::group(['middleware' => 'auth'],function () {
Route::post('comments/{post_id}', 'CommentController#store')->name('comment.store');
});
your controller will be :
public function store(Request $request,$post_id)
{
return auth()->user()->comments()->create([
'body' => $request->body,
'post_id' => $post_id,
'comment_id' => $request->comment_id
])->fresh();
}
Thank you, I put catch method, and the issue was I did not include protected $fillable ['body','post_id', 'comment_id'] in comment model.
I am creating a web app having dashboard using laravel and vue.
When I pass data from controller to vue file data is received properly but when I set it to vue variable the value is not set in the variable. All data is received and its displayed in the console but when I set it to the vue variable, the variable doesn't update its value.
This is my Controller class:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\User;
class UsersController extends Controller
{
//
public function index()
{
$users=User::all();
return response()->json($users);
}
}
This is myTeam.vue for receiving and displaying the data:
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card card-default">
<div class="card-header">Example Component</div>
<h1>
This request list
Hello,{{this.items}}
</h1>
<ul class="list-group">
<li class="list-group-item" v-for="t in items">{{items}}</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
//items: []
items:[],
}
},
created() {
var self=this;
axios.get('/allusers').then((response) => self.items=response.data) .catch((error)=>console.log(error));
axios.get('/allusers') .then(response => console.log(response.data));
console.log('Component mounted.'+this.items)
},
}
</script>
Now when I run it the console prints the array properly means data is received but when I set it to items variable the data is not set.
My Output is this:
This is the output image file
Please check it and thanks in advance ...
This is never print items array because it's execute before the ajax response is filled.
console.log('Component mounted.'+this.items)
That's why your console is always blank. You can search about blocking and non blocking programming.
your code have small bug. Update your code and try this:
<h1>
This request list
Hello,{{items}}
</h1>
<ul class="list-group">
<li class="list-group-item" v-for="t in items">{{t}}</li>
</ul>
...
<script>
export default {
data(){
return {
items:[],
}
},
mounted: function () {
this.getList();
}
methods: {
let _this = this;
axios.get('/allusers')
.then((response) => _this.items = response.data)
.catch((error)=>console.log(error));
},
}
</script>
This can help you. Good luck.