i'm using Laravel 5.7 and WampServer to develop a project thats giving me a weird problem: it is taking an eternity to load up on my browser and I don't know whats going on. I have another Laravel project that works just fine but this one just crashed for one day to another. What can I do in order to fix this? I don't know where to start.
EDIT 1: I've commented the next component and my project runs fine. Either way, I can't see a problem in there. Can anybody help me with it?
<template>
<div class="card">
<div class="card-header text-center text-uppercase">{{ userEmailNotFound ? 'Ingresa tu correo electrónico' : 'Responde a la siguiente pregunta' }}</div>
<div class="card-body">
<div class="input-group mb-3" v-show="userEmailNotFound">
<div class="input-group-prepend">
<span class="input-group-text mdi mdi-email" id="email-addon"></span>
</div>
<input v-model="userEmail" name="email" type="email" class="form-control" id="email" placeholder="Correo electrónico" aria-describedby="email-addon" required>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
import swal2 from '../mixins/swal2'
// this.swalMixin('success', '¡Artículo creado!')
export default {
data() {
return {
userEmail: '',
userEmailNotFound: true
}
},
methods: {
//
}
}
</script>
<style lang="scss" scoped>
</style>
When I said "commented" i meant this:
#extends('layouts.app')
#section('content')
<div class="row justify-content-center">
<div class="col-md-6">
{{-- <question-password-component></question-password-component> --}}
</div>
</div>
#endsection
Related
I tried to get data but it says computed method is undefined in vue dev tool
my methods are
<script>
export default{
name:"about",
mounted(){
this.$store.dispatch('getFrontAbouts');
},
computed:{
about(){
return this.$store.getters.about;
}
},
}
</script>
store2.js file where i get those data by axios call
export default{
state: {
aboutData:[],
},
getters:{
about(state){
return state.aboutData;
},
},
actions:{
getFrontAbouts(data){
axios.get("get-front-about").then((response)=>{
data.commit('about',response.data.about);
}).catch((error)=>{
})
},
},
mutations: {
about(state,data){
return state.aboutData = data;
},
}
}
my controller file where i am fetching data
public function about(){
$about = About::where('publication_status',1)->orderBy('id','ASC')->take(1)->first();
return response()->json(['about',$about],200);
}
here is my vue component where computed about method is being executed
<div class="row topmargin bottommargin gutter-lg-50 align-items-center">
<div class="col-lg-12 p-lg-5">
<div class="heading-block border-bottom-0 mb-0">
<h2 class="nott font-weight-semibold mb-4 text-secondary" style="color: #1ABC9C;">Our Story</h2>
<p v-if="about">{{about.about_us}}</p>
<div class="row">
<div class="col-6 col-sm-6 mb-4">
<div class="counter color font-weight-semibold"><span data-from="1" data-to="3" data-refresh-interval="2" data-speed="600"></span>+</div>
<h5 class="mt-0 font-weight-medium">Branches</h5>
</div>
<div class="col-6 col-sm-6 mb-4">
<div class="counter color font-weight-semibold"><span data-from="1" data-to="37" data-refresh-interval="11" data-speed="900"></span>+</div>
<h5 class="mt-0 font-weight-medium">Single Studios</h5>
</div>
<div class="col-6 col-sm-6 mb-4">
<div class="counter color font-weight-semibold"><span data-from="1" data-to="21" data-refresh-interval="3" data-speed="1000"></span>+</div>
<h5 class="mt-0 font-weight-medium">Events per Month</h5>
</div>
<div class="col-6 col-sm-6 mb-4">
<div class="counter color font-weight-semibold"><span data-from="100" data-to="4500" data-refresh-interval="100" data-speed="1500"></span>+</div>
<h5 class="mt-0 font-weight-medium">Active Members</h5>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="row justify-content-center topmargin-sm">
<div class="col-md-5 offset-md-1">
<h3 class="text-dark"><i class="icon-line-circle-check color mr-1 position-relative" style="top: 2px;color: #1ABC9C;"></i> Why do you choose DreamsEye?</h3>
<p v-if="about">{{about.choice_us}}</p>
</div>
<div class="col-md-5 pl-md-5">
<h3 class="text-dark"><i class="icon-line-circle-check color mr-1 position-relative" style="top: 2px;color: #1ABC9C;"></i> Our Address</h3>
<p v-if="about">{{about.address}}</p>
</div>
<div class="clear"></div>
</div>
</div>
here is my vue dev tool screenshot
enter image description here
here is my response screenshot
enter image description here
You are accessing the computed property using about, but the computed property is defined as About.
JavaScript is case sensitive.
First it is a typo change this About() to thisabout() . it is because vuejs is case sensitive.
Second as you are geting about in array type you need to loop through it to get the data of each column so try this
<div v-for="abt in about" :key="abt.id"class="heading-block border-bottom-0 mb-0">
<h2 class="nott font-weight-semibold mb-4 text-secondary" style="color: #1ABC9C;">Our Story</h2>
<p v-if="about">{{abt.about_us}}</p>
you guys just look at my methods and vue component...But the actual problem was in my controller where...
$about = About::where('publication_status',1)->orderBy('id','ASC')->take(1)->first();
return response()->json(['about',$about],200);
to
$about = About::where('publication_status',1)->orderBy('id','ASC')->take(1)->first();
return response()->json(['about'=>$about],200);
I'm trying to set up E2E testing of a Vue application with Cypress.
I can log into the app with my regular Chrome browser. However, the browser opened up by Chrome won't let me log in. Both the automatic login via Cypress and manual login fail.
Is there a setting I'm missing?
My Vue element:
<template>
<div class="d-flex justify-content-center">
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Username</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input v-model="username" class="input" type="text"
placeholder="Your username">
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Password</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input v-model="password" class="input" type="password"
placeholder="Your password">
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label">
<!-- Left empty for spacing -->
</div>
<div class="field-body">
<div class="field">
<div class="control text-center">
<button v-on:click="login()" class="button is-primary">
Login
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
My test file:
describe('Logging in', () => {
it('Logs in as admin', () => {
cy.visit('/')
.get('input[type="text"]')
.type('Admin')
.get('input[type="password"]')
.type('Pass1234')
.get('button').click()
.location().should((loc) => {
expect(loc.pathname).to.eq('/dashboard-main/dashboard');
})
})
})
Update: some suggestions here: https://github.com/cypress-io/cypress/issues/1759#issuecomment-391729559
Do you get to see anything during the e2e test when it runs? Like Cypress typing in that fields?
Besides the fact that I wouldn't use very generic locators, I would stop in the .click() and then check the new path with cy.url()
My Vuejs component isn't being rendered in my blade view. What am I doing wrong?
My component is called "star-rating".
Blade view
<div class="container">
<div class="row">
<div class="col-md-4">
**<star-rating></star-rating>**
</div>
<div class="col-md-4">
Rating - statistics
</div>
<div class="col-md-4">
#if(auth()->check())
<form method="post" action="{{ route('review.store') }}">
{{ csrf_field() }}
<h5>Form title</h5>
<div class="form-group">
<label for="headline"><strong>Headline</strong></label>
<input type="text" class="form-control" name="headline" id="headline" placeholder="Review title">
</div>
<div class="form-group">
<label for="headline"><strong>Rating</strong></label>
<input type="text" class="form-control" name="rating" id="rating" placeholder="A number from 1 - 5">
</div>
<div class="form-group">
<label for="headline"><strong>Description</strong></label>
<input type="text" class="form-control" name="description" id="description" placeholder="Tell us about your experience">
</div>
<input type="hidden" name="product_id" value="{{ $product->id }}">
<button class="btn btn-primary" type="submit">Save</button>
</form>
#else
Write a review
#endif
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<ul>
#forelse($product->reviews as $review)
<li>{{ $review->headline }}</li>
#empty
<h6>There are not reviews for this product</h6>
#endforelse
</ul>
</div>
</div>
</div>
#section('scripts')
<script src="{{asset('js/app.js')}}"></script>
#endsection
In the Vuejs, I have imported package for creating a rating system. If you would like to see the docs, are these Star Rating System Vuejs
Vuejs File
import VueStarRating from 'vue-star-rating'
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component',
require('./components/ExampleComponent.vue'));
Vue.component('star-rating', VueStarRating);
const app = new Vue({
el: '#app'
});
I'm getting this two errors:
1) [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
2) CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token
1) Make sure you are compiling the script that you wrote in app.js with
npm run watch
command.
2) I dont see any div element which has #app id. You are saying that I will target #app element with
const app = new Vue({ <br>
el: '#app'
});
But you dont have any. Try to put it:
<div class="container" id="app">
The solution to my problem was solved in two steps:
1) run: npm run dev
2) run: npm run watch
Now, it works
I am getting a 422 response from the server when expected and the correct server-side messages appear in the console but I cant seem to get these messages to display in my view. Any ideas?
I am using Laravel 5.6 with Vue.js 2 and Axios and following the lessons for Vus.js on laracasts (great lessons).
<template>
<div class="container">
<div class="page-header">
<h1>Create Person</h1>
</div>
<form #submit.prevent="onSubmit" action="POST">
<div>
<label for="fname" class="col-md-3 control-label ">First Name:</label>
<div class="col-md-8">
<input type="text" name="fname" v-model='fname' id="fname" autocomplete='off'>
<span v-text="errors.get('fname')"></span>
</div>
</div>
<div>
<label for="lname" class="col-md-3 control-label ">Last Name:</label>
<div class="col-md-8">
<input type="text" name="lname" v-model='lname' id="lname" autocomplete='off'>
<span v-text="errors.get('lname')"></span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-8 col-md-offset-4">
<button type="submit" class="btn btn-trans-green square pull-right card-1">
Submit
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</template>
<script>
class Errors {
constructor(){
this.errors = {};
}
get(field){
if (this.errors[field]){
return this.errors[field][0];
}
}
record(errors){
this.errors = errors;
}
}
export default {
data: function() {
return {
fname:'',
lname:'',
errors: new Errors()
}
},
methods: {
onSubmit(){
axios.post('/customers', this.$data)
.then(response => alert('Success'))
.catch(error =>
this.errors.record(error.response.data));
}
}
}
</script>
In Laravel 5.5 (I think) the JSON response for validation errors changed from being just an object of errors to an object containing errors and a single message. So to access the error messages in the response you will actually need to do:
this.errors.record(error.response.data.errors)
I would suggest, if you don't have it already, to get Vue Devtools the addon/extension to help you debug your code and just see what's going on in general.
Finally, just an FYI, Spatie made a package for this a while back (based on Jeff's lesson). You could use it as a point of reference if you're just going through the lessons and want to build it yourself.
Spatie - Form Backend Validation
i am using Ckeditor for blog posting in my project when i submit the form nothing i am get in controller can any one suggest me solution for that.
my view is looking like
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Post</div>
<div class="panel-body">
<form class="form-horizontal" role="form" method="POST" action="{{ route('store-post') }}">
{{ csrf_field() }}
<div class="form-group">
<label for="category_id" class="col-md-2 control-label">Select Categories</label>
<div class="col-md-8">
<select class="form-control" id="category_id" name="category_id">
#foreach($categories as $category)
<option value="{{$category->url_name}}">
{{$category->category_name}}</option>
#endforeach
</select>
</div>
</div>
<div class="form-group">
<label for="email" class="col-md-2 control-label">Post Title</label>
<div class="col-md-8">
<input id="post_title" type="text" class="form-control" name="post_title" value="{{ old('post_title') }}">
</div>
</div>
<div class="form-group">
<label for="post_content" class="col-md-2 control-label">Post Description</label>
<div class="col-md-8">
<textarea id="post_content" rows="10" cols="60" class="span8" placeholder="Image Title Goes Here" name="post_content"></textarea>
</div>
</div>
<div class="form-group">
<label for="p_url" class="col-md-2 control-label">Post Url</label>
<div class="col-md-8">
<input id="p_url" type="text" class="form-control" name="p_url" value="{{ old('p_url') }}">
</div>
</div>
<div class="form-group">
<label for="p_title" class="col-md-2 control-label">Meta Title</label>
<div class="col-md-8">
<input id="p_title" type="text" class="form-control" name="p_title" value="{{ old('p_title') }}">
</div>
</div>
<div class="form-group">
<label for="p_keyword" class="col-md-2 control-label">Meta Keyword</label>
<div class="col-md-8">
<input id="p_keyword" type="text" class="form-control" name="p_keyword" value="{{ old('p_keyword') }}">
</div>
</div>
<div class="form-group">
<label for="email" class="col-md-2 control-label">Meta Description</label>
<div class="col-md-8">
<textarea class="form-control" id="p_mdesc" name="p_mdesc" rows="3">
</textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-8 col-md-offset-2">
<button type="submit" class="btn btn-primary">
Submit
</button>
</div>
</div>
<!--Error start-->
#if ($errors->any())
<div class="alert alert-danger">
<ul>
#foreach ($errors->all() as $error)
<li>{{ $error }}</li>
#endforeach
</ul>
</div>
#endif
<!--error ends-->
</form>
</div>
</div>
</div>
</div>
</div>
my controller code is
public function store(Request $request){
/*$this->validate($request, [
'category_id' => 'required',
'post_title' => 'required',
//'post_content' => 'required',
'p_url' => 'required',
'p_title' => 'required',
'p_keyword' => 'required',
'p_mdesc' => 'required',
]);*/
$post=new Post;
echo $post_content=$request->input('post_content');
}
in previous project ie designed in CI i just use
$tc=$this->input->post('tc'); in controller for getting the Ckeditor value but in laravel i am not sure how to get it done.
Your view contain 2 name attribute for the post_content field (textarea). Please check.
You can do it like this -
{!! Form::textarea('tc', $tc,array('required', 'class'=>'form-control', placeholder'=>'Your message')) !!}
and then you will have to initialise it
$(document).ready(function () {
CKEDITOR.replace( 'tc' );
});
The documentation has clear examples.
In your Blade you should add ckeditor like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Simple Page with CKEditor</title>
<!-- Make sure the path to CKEditor is correct. -->
<script src="../ckeditor.js"></script>
</head>
<body>
<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'editor1' );
</script>
</form>
</body>
</html>
So the javascript code triggers a replace of a textarea to the editor
Now for the retrieving data part
<script>
var data = CKEDITOR.instances.editor1.getData();
// Your code to save "data", usually through Ajax.
</script>
You need to create an endpoint if you want to send this data indeed trough Ajax. Don't forget to add a CSRF token
As mentioned by #user3888958,
<textarea name="tc" id="post_content" rows="10" cols="60"
class="span8" placeholder="Image Title Goes Here" name="post_content">
the textarea has two name attribute.
You could access the textarea content using the name attribute, remove any one name attribute and pass that in as a parameter to the request
$request->input('tc'); // OR
$request->input('post_content');
and to access the value of
<textarea class="form-control" id="p_mdesc" name="p_mdesc" rows="3">
</textarea>
you could access it using the name
$request->input('p_mdesc');