When i put my script code in seperate file in js then my component is not working, only when i directly write code in view. Any suggestion why is that happening?
https://jsfiddle.net/coligo/txpy7ug4/
<div id="app">
<div class="container-fluid">
<ul class="list-group">
<post v-for="comment in comments" :post="comment"></post>
</ul>
<div id="comment-box">
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter a comment..." v-model="comment" #keyup.enter="postComment">
<span class="input-group-btn">
<button class="btn btn-primary" type="button" #click="postComment">Submit</button>
</span>
</div>
</div>
</div>
</div>
<template id="post-template">
<li class="list-group-item">
<i class="glyphicon glyphicon-chevron-up" #click="upvote" :class="{disabled: upvoted}"></i>
<span class="label label-primary">#{{ votes }}</span>
<i class="glyphicon glyphicon-chevron-down" #click="downvote" :class="{disabled: downvoted}"></i>
<a>#{{ post.title }}</a>
</li>
</template>
If your HTML is in different file than your JS code, You have to require that in your vue instance like explained here:
component.js
module.export = {
template: require('./templates/template.html'),
data: function(){
return {
text: "Hello World!"
};
}
};
template.html
<h1>{{ text }}<h1>
Related
I want to open a model for edit item. I have added wire:click on a div but that only works for the first item of foreach.
Livewire Method
public function selectMealPlan($mealId)
{
$this->dispatchBrowserEvent('openEditMealModal');
}
View file
#foreach ($meal_plans as $meal)
<div class="meals-plan-item">
<div class="meals-plan-item-type">
<div class="meals-plan-item-label" wire:click="test">MEAL TYPE:</div>
<div class="meals-plan-item-value">{{ $meal->meal_type }}</div>
</div>
<div class="meals-plan-item-names">
<div class="meals-plan-item-label">MEAL NAMES:</div>
<div class="meals-plan-item-value">{{ $meal->getMealItems() }}</div>
</div>
<div class="meals-plan-item-actions">
<div class="action-button edit" wire:click="selectMealPlan({{ $meal->id }})">
<i class="fas fa-pencil"></i>
</div>
<div class="action-button delete" data-toggle="modal" data-target="#deletePlan{{ $meal->id }}">
<i class="fas fa-trash"></i>
</div>
</div>
</div>
#endforeach
<script>
window.addEventListener('openEditMealModal', function() {
alert('hello');
})
</script>
The component should have only one root element, a div for example:
<div class="meals-plan-item">
#foreach ($meal_plans as $meal)
<div class="meals-plan-item-type">
<div class="meals-plan-item-label" wire:click="test">MEAL TYPE:</div>
<div class="meals-plan-item-value">{{ $meal->meal_type }}</div>
</div>
<div class="meals-plan-item-names">
<div class="meals-plan-item-label">MEAL NAMES:</div>
<div class="meals-plan-item-value">{{ $meal->getMealItems() }}</div>
</div>
<div class="meals-plan-item-actions">
<div class="action-button edit" wire:click="selectMealPlan({{ $meal->id }})">
<i class="fas fa-pencil"></i>
</div>
<div class="action-button delete" data-toggle="modal" data-target="#deletePlan{{ $meal->id }}">
<i class="fas fa-trash"></i>
</div>
</div>
#endforeach
</div>
I have vue.js components in my app. This is the first time ever receiving this message in the console.
The picture where 3 boxes are shown is the local machine, where it works and shows the users info.
The next picture only show 1 out of 3 boxes, with the "example" component.
Code:
The component:
<template>
<div>
<loading-spinner v-if="!data_is_fetched"></loading-spinner>
<div v-else-if="data_is_fetched">
<!-- Modalbox -->
<div>
<div v-if="modalbox" #close="modalbox = false">
<edit-user-information-modal v-if="modalboxType === 1" #close="modalbox = false" #postSucces="fetchData()"
:student="record.user">
</edit-user-information-modal>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-sm-12">
<div class="card box-shadow border-0">
<div class="card-header bg-transparent justify-content-between d-flex align-text-center">
Min bruger
</div>
<div class="card-body">
<div class="row">
<div class="col-6">
<p><span class="font-weight-bold">Navn:</span></p>
<p><span class="font-weight-bold">Fødselsdato:</span></p>
<p><span class="font-weight-bold">Email:</span></p>
<p><span class="font-weight-bold">Telefonnummer:</span></p>
<p><span class="font-weight-bold">Brugertype:</span></p>
<p><span class="font-weight-bold">Vejnavn & husnummer:</span></p>
<p><span class="font-weight-bold">Postnummer og by:</span></p>
<p><span class="font-weight-bold">Land:</span></p>
</div>
<div class="col-6">
<p>
<span v-if="record.user.name">{{ record.user.name }}</span>
<span v-else class="font-italic">Intet navn</span>
</p>
<p>
<span v-if="record.user.birthday">{{ record.user.birthday }}</span>
<span v-else class="font-italic">Ingen fødselsdato</span>
</p>
<p>
<span v-if="record.user.email">{{ record.user.email }}</span>
<span v-else class="font-italic">Ingen email</span>
</p>
<p>
<span v-if="record.user.phone">{{ record.user.phone }}</span>
<span v-else class="font-italic">Intet telefonnummer</span>
</p>
<p>
<span v-if="record.user.role_id = 1">Elev</span>
<span v-else-if="record.user.role_id = 2">Kørelærer</span>
<span v-else-if="record.user.role_id = 3">Køreskoleadministrator</span>
<span v-else-if="record.user.role_id = 4">MitKørekort - Support</span>
<span v-else-if="record.user.role_id = 5">MitKørekort - Superbruger</span>
</p>
<p>
<span v-if="record.user.address_1">{{ record.user.address_1 }}</span>
<span v-else class="font-italic">Ingen addresse</span>
</p>
<p>
<span v-if="record.user.zip_code">{{ record.user.zip_code }}</span>
<span v-else class="font-italic">Intet postnummer</span>
</p>
<p>
<span v-if="record.user.country">{{ record.user.country }}</span>
<span v-else class="font-italic">Intet land</span>
</p>
</div>
</div>
<button class="btn btn-primary" #click="modalbox = true; modalboxType = 1">Rediger</button>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="card box-shadow border-0">
<div class="card-header bg-transparent">Ny adgangskode?</div>
<div class="card-body text-center">
<a class="mt-2 btn btn-primary btn-block" href="/nulstil/kodeord">Nulstil min adgangskode</a>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import FormMixin from '../../FormMixin.js';
export default {
mixins: [ FormMixin ],
data() {
return {
record: {},
fetchUrl: 'v1/account/fetch',
data_is_fetched: false,
modalbox: false,
modalboxType: 0,
}
},
mounted() {
console.log('Component mounted.')
this.fetchData()
},
methods: {
fetchData() {
axios.get(this.fetchUrl)
.then(response => (
this.record = response.data
))
.finally( this.data_is_fetched = true)
},
},
}
</script>
The component registration
// Account
// Profile page
Vue.component('page-show-account', require('./pages/account/Show.vue').default);
My issue was that the server had the newest compiled files in "public" and not "public_html".
So there wasn't anything missing or wrong in the code itself, but the server didn't use the correct files.
Can you drop your code?
I guess maybe you have a problem with registering the component, maybe you did not type correct path, or etc.
My advice is to read carefully
https://v2.vuejs.org/v2/guide/components-registration.html
I am trying to create a search show hide feature. I have a click event that shows the search bar, but if I click somewhere in the put it get removed again. I tried with click.stop but it doesn't work. I am using vue.js inside a laravel project.
Here is my code
<template>
<div>
<div class="menu_srch d-flex" #click.stop="dos">
<i class="fa fa-search search_btn"></i>
<div class="header_serch " v-if="showSearch">
<div class="header_serch_input">
<input type="" name="" placeholder="Search">
</div>
<div class="header_serch_i">
<i class="fa fa-search"></i>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
showSearch : false,
}
},
methods: {
dos(){
this.showSearch = !this.showSearch
}
},
}
</script>
using click.self doesn't even work.. dos method doesn't run when click.self is used.
Vue.js version : "^2.6.11"
You can capture the click event end to stop the propagation one level down.
<template>
<div>
<div class="menu_srch d-flex" #click="dos">
<i class="fa fa-search search_btn"></i>
<div #click.stop class="header_serch" v-if="showSearch">
<div class="header_serch_input">
<input type name placeholder="Search">
</div>
<div class="header_serch_i">
<i class="fa fa-search"></i>
</div>
</div>
</div>
</div>
</template>
Or you need to restructure your template.
<template>
<div>
<div class="menu_srch d-flex" #click="dos">
<i class="fa fa-search search_btn"></i>
</div>
<div class="header_serch" v-if="showSearch">
<div class="header_serch_input">
<input type name placeholder="Search">
</div>
<div class="header_serch_i">
<i class="fa fa-search"></i>
</div>
</div>
</div>
</template>
I'm new to ajax and I have two little problems.
With my code I can write the data in the database. I get no error messages and the data are not synonymous directly loaded into the view.
how can I load the data directly into the view without reload the page?
if the privacy is 1, the code should be displayed in the right column, and if the privacy is 0, the code should be displayed in the left column.
How can I output the error messages with my errormessage code?
view
<div id="content" class="dashboard padding-10">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<a data-toggle="modal" data-target=".todolist-create-modal" class="btn btn-success btn-block btn-sm margin-bottom-10">Neue Liste erstellen</a>
</div>
<div class="col-md-6">
<div id="panel-misc-portlet-l3" class="panel panel-default text-center">
<div class="panel-heading nohover">
<span class="elipsis">
<strong>Private Tasks</strong>
</span>
</div>
</div>
<div class="alert alert-danger margin-bottom-30 {{ $todolistpublic->count() ? 'hidden' : '' }}">
Es wurden keine <strong>Einträge</strong> gefunden.
</div>
#foreach ($todolistpublic as $list)
<div id="todo-list-{{$list->id}}" class="panel panel-default panel-primary margin-bottom-0">
<div class="panel-heading panel-pointer">
<span class="elipsis"><!-- panel title -->
<strong>{{ $list->title }}</strong> <span class="label label-info white">0</span>
</span>
<ul class="options pull-right relative list-unstyled hover-visible">
<li><a data-toggle="modal" data-target=".task-modal" class="btn btn-success btn-xs white hover-hidden">
<i class="fa fa-plus"></i> Erstellen
</a>
</li>
<li><a data-toggle="modal" data-target=".todolist-modal" data-id="{{ $list->id }}" data-title="{{ $list->title }}" data-description="{{ $list->description }}" class="btn btn-info btn-xs white hover-hidden">
<i class="fa fa-edit"></i> Bearbeiten
</a>
</li>
<li><a data-toggle="modal" data-target=".todolist-delete-modal" data-id="{{ $list->id }}" data-title="{{ $list->title }}" data-description="{{ $list->description }}" class="btn btn-danger btn-xs white hover-hidden">
<i class="fa fa-times"></i> Löschen
</a>
</li>
<li></li>
</ul>
</div>
<div class="panel-body">
<div class="slimscroll" data-always-visible="false" data-rail-visible="false" data-railOpacity="1" data-height="100">
{{ $list->description }}
</div>
</div>
</div>
#endforeach
<div class="panel-footer mtm-10">
<span id="todo-list-counter-public">{{ $todolistpublic->count() }}</span> <span>{{ $todolistpublic->count() > 1? 'Listen' : 'Liste' }}</span>
</div>
</div>
<div class="col-md-6">
<div id="panel-misc-portlet-l3" class="panel panel-default text-center">
<div class="panel-heading nohover">
<span class="elipsis">
<strong>Öffentliche Tasks</strong>
</span>
</div>
</div>
<div class="alert alert-danger margin-bottom-30 {{ $todolistprivate->count() ? 'hidden' : '' }}">
Es wurden keine <strong>Einträge</strong> gefunden.
</div>
#foreach ($todolistprivate as $list)
<div id="todo-list-{{$list->id}}" class="panel panel-default panel-primary margin-bottom-0">
<div class="panel-heading panel-pointer">
<span class="elipsis"><!-- panel title -->
<strong>{{ $list->title }}</strong> <span class="label label-info white">0</span>
</span>
<ul class="options pull-right relative list-unstyled hover-visible">
<li><a data-toggle="modal" data-target=".task-modal" class="btn btn-success btn-xs white hover-hidden"><i class="fa fa-plus"></i> Erstellen</a></li>
<li><a data-toggle="modal" data-target=".todolist-modal" class="btn btn-info btn-xs white hover-hidden"><i class="fa fa-edit"></i> Bearbeiten</a></li>
<li><i class="fa fa-times"></i> Löschen</li>
<li></li>
</ul>
</div>
<div class="panel-body">
<div class="slimscroll" data-always-visible="false" data-rail-visible="false" data-railOpacity="1" data-height="100">
{{ $list->description }}
</div>
</div>
</div>
#endforeach
<div class="panel-footer mtm-10">
<span id="todo-list-counter-private">{{ $todolistprivate->count() }}</span> <span>{{ $todolistprivate->count() > 1? 'Listen' : 'Liste' }}</span>
</div>
</div>
#include('elements.addTodoList')
#include('elements.createTodoList')
#include('elements.addTask')
</div>
</div>
$(document).ready(function () {
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
$('#add-todo-list').click(function(e) {
e.preventDefault();
var _token = $("input[name='_token']").val(); // get csrf field.
var title = $("input[name='title']").val();
var description = $("textarea[name='description']").val();
var privacy = $("select[name='privacy']").val();
$.ajax({
url:'{{ route('todolists.store') }}',
type: 'POST',
data: {_token:_token, title:title, description:description, privacy:privacy},
success: function (data) {
console.log(data);
}
});
});
});
Controller
public function store(Request $request)
{
$validator = Validator::make($request->all(), [
'title' => 'required|min:5',
'description' => 'required|min:10',
'privacy' => 'required|integer'
]);
$attributeNames = array(
'title' => 'Title',
'description' => 'Description',
);
$validator->setAttributeNames($attributeNames);
//Redirect back if validation fails
if($validator->fails()) {
return response()->json(['error'=>$validator->errors()->all()]);
}
else{
$todolists = new Todolists;
$todolists->admin_id = auth::user();
$todolists->title = $request->title;
$todolists->description = $request->description;
$todolists->privacy = $request->privacy;
$todolists->save();
return response()->json(['success'=>'Your enquiry has been successfully submitted!']);
}
}
modal
<div class="modal fade todolist-create-modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Erstelle eine neue Liste</h4>
</div>
<div class="modal-body">
<form action="{{ route('todolists.store') }}" method="post">
{{ csrf_field() }}
<div class="form-group">
<label for="" class="control-label">Titelname</label>
<div class="fancy-form">
<i class="fa fa-header"></i>
<input id="title" name="title" type="text" class="form-control input-lg" placeholder="Titel">
</div>
</div>
<div class="form-group">
<label for="" class="control-label">Beschreibung</label>
<div class="fancy-form">
<textarea id="description" name="description" rows="2" class="form-control" placeholder="Beschreibe deine Aufgabe"></textarea>
<i class="fa fa-comments"><!-- icon --></i>
</div>
</div>
<div class="form-group">
<label for="" class="control-label">Privatsphäre</label>
<div class="fancy-form fancy-form-select">
<select id="privacy" name="privacy" class="form-control">
<option selected value="0">Öffentlich</option>
<option value="1">Privat</option>
</select>
<i class="fancy-arrow"></i>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success" id="add-todo-list">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
errormessages
#if (count($errors) > 0)
<div class="toastr-notify"></div>
#foreach ($errors -> all() as $e)
<script type="text/javascript">
_toastr("{{$e}}","top-right","error",false);
</script>
#endforeach
#endif
#if (session('fail'))
<div class="toastr-notify"></div>
<script type="text/javascript">
_toastr("{{ session('fail') }}","top-full-width","warning",false);
</script>
#endif
#if (session('status'))
<div class="toastr-notify"></div>
<script type="text/javascript">
_toastr("{{ session('status') }}","top-full-width","info",false);
</script>
#endif
#if (session('success'))
<div class="btn btn-info toastr-notify"></div>
<script type="text/javascript">
_toastr("{{ session('success') }}","top-full-width","success", false);
</script>
#endif
#if (session('error'))
<div class="toastr-notify"></div>
<script type="text/javascript">
_toastr("{{ session('error') }}","top-full-width","error",false);
</script>
#endif
I believe you have a typo in your ajax backend code; this line to be specific:
$todolists->admin_id = auth::user();
This should be:
$todolists->admin_id = auth()->user()->id;
The typo is generating a Throwable error, which is getting caught by the laravel exception handler and it's detecting that the code is being executed under a ajax request and hence returning a 500 internal server error.
<div class="panel panel-primary">
<div class="panel-heading">Add user Status</div>
<form action="{{ route('post.create') }}" method="post">
<div class="panel-body">
<div class="form-group">
<textarea class="form-control" name="body" id="new-post" rows="5" placeholder="Your Post"></textarea>
</div>
</div>
<div class="panel-footer clearfix">
<button class="btn btn-info pull-right"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></i> Post</button>
</div>
<input type="hidden" value="{{ Session::token() }}" name="_token">
</form>
</div>
<div id="main" class="main">
<header><h3>What other people say...</h3></header>
#foreach($top_15_post as $status)
{!!
view ('layouts.app-internal.user-status-layaout',[
'status' =>$status,
'user' =>\App\User::find($status->user_id),
'comments'=>\App\Comment::where('status_id',$status->id)->get(),
'countcomment'=>\App\Comment::where('status_id',$status->id)->count(),
'countlike'=>\App\Like::where('like',1)->where('post_id',$status->id)->count() ,
'countdislike'=>\App\Like::where('like',0)->where('post_id',$status->id)->count(),
])->render()
!!}
#endforeach
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Right part -->
</div>
</div>
</div>
This is my home.blade.php in laravel. im simply implementing a posting text system which user can comment and like to the posts.I'm passing above variables to the user-status-layaout.blade.php, it shows the comments and likes as well as the posts.
This is my user-status-layaout.blade.php.My like and dislike functions are working properly. but i want update like count using ajax.How do i update countlike and countdislike variable instantly using ajax?
<div class="panel panel-default">
<div class="panel-heading">{{ $status->user->name }} Posted on {{ $status->created_at }}</div>
<div class="panel-body">
<div class="row">
<div class="col-md-1">
<img src="{{Auth::user()->getavatar()}}" class="img-responsive">
</div>
<div class="post" data-postid="{{ $status->id }}">
<p>{{ $status->body }}</p>
<div class="interaction">
{{ Auth::user()->likes()->where('post_id', $status->id)->first() ? Auth::user()->likes()->where('post_id', $status->id)->first()->like == 1 ? 'You like this post' : 'Like' : 'Like' }} |
{{ Auth::user()->likes()->where('post_id', $status->id)->first() ? Auth::user()->likes()->where('post_id', $status->id)->first()->like == 0 ? 'You don\'t like this post' : 'Dislike' : 'Dislike' }}
#if(Auth::user() == $status->user)
|
Edit |
<form method="get" action="{{ route('post.delete', ['post_id' => $status->id]) }}" accept-charset="UTF-8" style="display:inline">
<button class="btn btn-xs btn-danger" type="button" data-toggle="modal" data-target="#confirmDelete" data-title="Delete Post" data-message="Are you sure you want to delete this post ?">
<i class="glyphicon glyphicon-trash"></i> Delete
</button>
</form>
#endif
<ul class="list-unstyled list-inline ">
<li>
<button class="btn btn-xs btn-info" type="button" data-toggle="collapse" data-target="#view-comments-{{$status->id}}" aria-expanded="false" aria-controls="collapseExample">
<i class="fa fa-comments"></i>View & Comment </button>
</li>
<li>{{$countcomment}} comments</li>
<li >{{$countlike}} likes</li>
<li>{{$countdislike}} dislikes</li>
</ul>
</div>
</div>
</div>
</div>
<div class="panel-footer clearfix">
<div class="form-group">
<form action="{{ route('comment.create') }}" method="post">
<div class="input-group">
<input type="text" class="form-control" name="comment-text" id="comment-text" placeholder="Add Comment">
<span class="input-group-btn">
<button class="btn btn-info btn-xs" type="submit"><span class="glyphicon glyphicon-plus"></span>Add </button>
</span>
<input type="hidden" value="{{ $status->id }}" name="id" id="id">
</div><!-- /input-group -->
<input type="hidden" value="{{ Session::token() }}" name="_token">
</form>
</div>
<div class="collapse" id="view-comments-{{$status->id}}">
#if($comments->first())
#foreach($comments as $comment)
<blockquote >
<div class="row" >
<div class="col-md-1" >
<img src="{{\App\User::find($comment->user_id)->getavatar()}}" class="img-responsive">
</div>
<div class="col-md-11">
<ul class=" list-inline list-unstyled ">
<li>
{{\App\User::find($comment->user_id)->name}}
</li>
</ul>
<div class="comment" data-commentid="{{ $comment->id }}">
<p> {{$comment->comment_text}}</p>
<div class="interaction1">
#if(Auth::user() == $comment->user)
Edit |
<form method="get" action="{{ route('comment.delete', ['comment_id' => $comment->id]) }}" accept-charset="UTF-8" style="display:inline">
<button class="btn btn-xs btn-danger" type="button" data-toggle="modal" data-target="#confirmDeleteComment" data-title="Delete Comment" data-message="Are you sure you want to delete this comment ?">
<i class="glyphicon glyphicon-trash"></i> Delete
</button>
</form>
#endif
</div>
</div>
</div>
</div>
<p> posted {{$comment->created_at->diffForHumans()}}</p>
</blockquote>
#endforeach
#else
<p>This status no comment</p>
#endif
</div>
</div>
You could create a timer function using WindowTimers.setTimeout()
$('some-selector').load(function(){
function likeTimer() {
setTimeout(function(){
// Some JSON request that updates the elements' values.
likeTimer();
}, 1000);
}
});
Or you could poll the server periodically with WindowTimers.setInterval()
$('some-selector').load(function(){
setInterval(function() {
// Some JSON request that updates the elements' values.
}, 1000);
});
Then just define a route in Laravel that returns JSON for the data you want to update.