Here is section of code applied on
<div class="container" data-ng-app="myApp" ng-controller="hController">
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
Controller Implementation
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://localhost:8080/rest/hotel")
.success(function(response) {$scope.names = response.records;});
});
</script>
</head>
Error i can see in web console
Error: [ng:areq] http://errors.angularjs.org/1.3.14/ng/areq?p0=hotelController&p1=not%20a%20function%2C%20got%20undefined
at Error (native)
at http://localhost:8080/resources/js/angular.min.js:6:417
i have already added angular.min.js in path
conflicts in naming of your controllers
app.controller('customersCtrl'....)
and in the Template you have used "hController"
<div class="container" data-ng-app="myApp" ng-controller="hController">
Use the same name in both the places or else angular doesn't find the the directive ng-controller defined in your Template and hence produces error out . ng-controller is a angular built-in directive which attaches controller to the view .
Related
I am working on single SPA using laravel and inertia js. I am using multi language as well. So I am passing language as prefix parameter like this.
Route::group(['prefix' => '{language}'],function(){
Route::get('events',[HomeController::class,'event'])->name('events');
Route::get('events-details/{id}',[HomeController::class,'eventDetail'])
->name('events.reservations.index');
});
my controller
public function eventDetail($land,$id)
{
$events = $this->repository->getAllEvents();
$event_details = $this->repository->findById($id);
$time_interval = ReservationHelper::getTimeInterval();
return Inertia::render('Frontend/Pages/Reservation/Index', compact('events','event_details','time_interval'));
}
Calling in vue component like this
<Link
:href="
route('events.reservations.index', [$page.props.current_locale, id])
"
>
<div class="sao-box1 text-center">
<img :src="imgSrc" alt="" class="img-fluid rounded_img" />
<h3>{{ title }}</h3>
<div class="event-description" v-html="description"></div>
<a class="sl-btnBook">Book</a>
</div>
</Link>
when I click on that link I am getting error as
Error: Ziggy error: 'id' parameter is required for route 'events.reservations.index'
I don't know where I am going wrong.
thank you
change this line only from :-
:href="route('events.reservations.index', [$page.props.current_locale, id])"
to :
:href="route('events.reservations.index', {language : $page.props.current_locale, id: id})"
thanks
I am trying to get data from my laravel app, and display it in Vue CLI.
I see the Response, but I can not display it in the VUE application.
When i do get to example API it's works, but not from my laravel server.
<template>
<div id="app">
<h1>{{ results }}</h1>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return{
results: null
}
},
mounted() {
axios.get('http://127.0.0.1:8000/api/')
.then(response => {
this.results = response.data.results
})
}
}
</script>
Your results are being received as an array of objects, a JSON encoded Laravel collection. You need to single out the object you want to display, and then a property of that object.
<div id="app">
<h1>{{ results[0].name }}</h1>
</div>
However, you should really only be returning one object if this is the case from your controller method, not an array of objects. (e.g., ->first() instead of ->get())
<div id="app">
<h1>{{ result.name }}</h1>
</div>
Collections are generally for displaying multiple results in lists, table, options, etc.:
<div id="app">
<ul>
<!-- v-for will loop through results -->
<li v-for="(result, index) in results">{{ result.name }}</li>
</ul>
</div>
EDIT:
Also, your results declaration needs to be adjusted according to the Network response.
this.results = response.data.results;
Should be:
this.results = response.data;
Or alternatively, your controller response needs to be:
return response()->json(['results' => $results]);
The answer was Cross-Origin Resource Sharing.
To connect laravel API with front-end i need to do add barryvdh/laravel-cors by composer.
composer require barryvdh/laravel-cors
Next add middleware in app/Http/Kernel.php to enable using API outside laravel APP. In my problem to Vue Cli.
Firstly I'm Laravel Spark and have successfully integrated into the mix installation so my js is being deployed into app.js already
I am getting errors when I setup a new component for a project;
blade file
#extends('spark::layouts.app')
#section('content')
<div class="container">
<!-- Application Dashboard -->
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Sprints</div>
<div class="panel-body">
<os-sprints></os-sprints>
<input type="text" v-model="newSprint">
<button #click="addSprint">add</button>
</div>
</div>
</div>
</div>
</div>
<template id="my-sprints">
<ul class="list-group">
<li class="list-group-item" v-for="sprint in sprintlist">
<a :href="'/sprints/' + sprint.id">#{{ sprint.title }} #{{ sprint.id }} </a>
</li>
</ul>
</template>
#endsection
and my js
Vue.component('os-sprints', {
template: '#my-sprints',
data() {
return {
sprintlist: [],
newSprint: ''
};
},
created() {
this.getSprints();
},
methods: {
getSprints() {
axios.get ('/api/team/sprints')
.then(response => {
this.sprintlist = response.data;
});
},
addSprint() {
alert("hit");
// this.sprintlist.push(this.newSprintname);
// this.newSprintname = '';
},
}
});
The errors I'm getting in console;
app.js:42229 [Vue warn]: Property or method "newSprint" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
(found in <Root>)
warn # app.js:42229
app.js:42229 [Vue warn]: Property or method "addSprint" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
(found in <Root>)
warn # app.js:42229
app.js:42229 [Vue warn]: Property or method "sprintlist" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
(found in <Root>)
warn # app.js:42229
app.js:42229 [Vue warn]: Invalid handler for event "click": got undefined
I'm getting a sprintlist data fine but even without the text field and button I'm getting errors and my button method never hits.
Any feedback would be greatly appreciated
Chris!
This type of warning is usually caused by a variable not being defined yet. (I know, not very helpful). What I mean:
You passing a variable from one component A to another component B
While a variable is still being passed (have not reached the desired component B), component B is already being mounted
since a component B is already mounted, it is trying to use a variable that hasn't reached yet (ta da -> a warning)
Then a variable reached, Vuejs reacted and updated the view accordingly
This warning can be avoided by adding a v-if to an element or a wrapper
That's because you reference your data object properties and methods of a child component in parent component.
Move
<input type="text" v-model="newSprint">
<button #click="addSprint">add</button>
into your child component's template and you should be fine.
Ok I worked it out, I had tried to do what MatWaligora had suggested previously but the issue was I didn't realise I needed a single "parent" within the template. After I changed it to the below I got the functionality working. I'm still getting Vue warning messages as above but the page works.
<template id="my-sprints">
<div>
<ul class="list-group">
<li class="list-group-item" v-for="sprint in sprintlist">
<a :href="'/sprints/' + sprint.id">#{{ sprint.title }} #{{ sprint.id }} </a>
</li>
</ul>
<input type="text" id="sprinttext" v-model="newSprint">
<button #click="addSprint">add</button>
</div>
</template>
For me it was an extra closing tag in the loop.
<div v-for="(item, index) in items" :key="index">
<a :href="item.url">{{ item.name }} </a>
</div> // <- the issue
</div>
Double check all tags if other answers didn't help you.
I need to build an application using laravel 5.3 and vuejs 2, because I need to use two-way binding rather than use jquery.
I need to set up the views with blade templates. Then, I need to use vuejs in each page as mentioned below.
resources/asserts/js/components/List.vue
<script>
const panel = new Vue({
el: '#list-panel',
name: 'list',
data: {
message: 'Test message'
},
methods: {
setMessage: function(){
this.message = 'New message';
}
}
})
</script>
resources/asserts/views/post/index.blade.php
<div id="panel" class="panel panel-default">
<div class="panel-heading">Posts</div>
<div class="panel-body">
<p>{{ message }}</p>
<button v-on:click="setMessage">SET</button>
</div>
</div>
There is Add.vue to create.blade.php etc...
In Add.vue el: '#add-panel'
This is my app.js. I already commented default code like follows.
Vue.component('list', require('./components/List.vue'));
Vue.component('add', require('./components/Add.vue'));
// const app = new Vue({
// el: '#app'
// });
I hardly checked most of documentations and tutorials. But they use a single js file. They use components for small elements with template, not only js.
Is it possible to use vuejs this way? Do I need to use app.js. What is the best way to do this?
If you want to sprinkle a bit of vuejs within your blade files you have basically two options:
Option #1
Declare global Vue components
Example
// in laravel built in app.js file
Vue.component('foo', require('./components/Foo.vue'));
Vue.component('bar', require('./components/Bar.vue'));
const app = new Vue({
el: '#app'
});
create a main layout file where the root div has an id of #app
// layout.blade.php
<html>
<header></header>
<body>
<div id="app">
#yield('content')
</div>
</body>
</html>
Finally in your views:
//some-view.blade.php
#extends('layout')
#section('content')
<foo :prop="{{ $someVarFromController }}"></foo>
#endsection
Option #2
This is what I am currently using, and gives me more flexibility actually
// in laravel built in app.js file
const app = new Vue({
el: '#app',
components: {
Foo: require('./components/Foo.vue'),
Bar: require('./components/Bar.vue')
}
});
In the layout file you will be using vuejs dynamic components
<html>
<header></header>
<body>
<div id="app">
#if (isset($component))
<component :is={{ $component }} inline-template>
#endif
#yield('content')
#if (isset($component))
</component>
#endif
</div>
</body>
</html>
In your views:
//some-view.blade.php
#extends('layout', ['component' => 'foo'])
#section('content')
// all the vue stuff available in blade
// don't forget to use the # symbol every time you don't want blade to parse the expression.
// Example: #{{ some.vue.propertie }}
#endsection
And finally you can create the vue components like you always would
// resources/assets/js/components/foo.vue
<script>
export default {
// the component
}
</script>
Create your 'app' for every page in seperate JS files. Good practice would be using the same name as page name to get it clear where it belongs.
Name you main div the same as the file (fileName.php + assets/js/fileName.js).
Use #fileName' as yourel`
in blade use #{{ vue expressions }} to let Blade skip this and allow VueJS handle that.
Done. Good luck!
I seem to be misunderstanding how to pass data to a Vue.js component with an ajax call.
My understanding of how this should work:
I need to create an empty object called campaigns in the data section of my component.
Then call method "fetchCampaigns" on page ready to replace the data object.
fetchCampaign method completes an AJAX call and inside of the success callback use this.$set('campaigns', campaigns) to replace the empty campaign object with the newly returned campaign object
Use v-for on the template to iterate through the campaign object and access values with #{{campaign.type}}
My html (I am use vue router, vue resource and laravel blade) :
<router-view></router-view>
<template id="campaignBlock" v-for="campaign in campaigns">
<div class="row">
<div class="block">
<div class="block-title">
<h2>Type: <em>#{{campaign.id}}</em></h2>
</div>
<div class="row"><!-- Grid Content -->
<div class="hidden-sm hidden-xs col-md-4 col-lg-4">
<h2 class="sub-header">#{{campaign.title}}</h2>
</div>
</div>
</div><!-- END Grid Content -->
</template>
Vue component
Vue.component('app-page', {
template: '#campaignBlock',
data: function() {
return{
campaigns: []
}
},
ready: function () {
this.fetchCampaigns();
},
methods: {
fetchCampaigns: function () {
var campaigns = [];
this.$http.get('/retention/getCampaigns')
.success(function (campaigns) {
this.$set('campaigns', campaigns);
})
.error(function (err) {
campaigns.log(err);
});
},
}
})
This is the result of my ajax call from console:
{"campaigns":[{"id":1,"user_id":2,"target_id":1,"name":"Test Campaign","description":"This is a test Campaign","target":"Onboarding","created_at":"-0001-11-30 00:00:00","updated_at":"-0001-11-30 00:00:00","deleted_at":null}]}
I'm not sure why I can't get my vue component to recognize the new data. Anyone see what I'm missing? TIA
Turns out that v-for="campaign in campaigns" should not go on the template tag, but inside of it.
So this:
<template id="campaignBlock" v-for="campaign in campaigns">
<div class="row">
Should be changed to this:
<template id="campaignBlock">
<div class="row" v-for="campaign in campaigns">