How can I use the filter input from the component outside in the blade file , while still being able to filter the table which is in the vuejs file?
ie: I want to restructure where the filter input.
In my Invoice Component vuejs file -
<template>
<div class="my-5 container-fluid">
<h2>Invoice inner</h2>
<b-input-group class="mt-3 mb-3" size="sm">
<b-form-input v-model="keyword" placeholder="Filter" type="text"></b-form-input>
</b-input-group>
<b-table :fields="fields" :items="items" :keyword="keyword"></b-table>
</div>
</template>
<script>
.....
</script>
In my blade template-
#section('content')
<section class="user-info d-md-flex justify-content-between py-4 mb-5">
<div class="d-flex align-items-center pb-3">
<img class="rounded-circle user-img"
src="https://images.pexels.com/photos/3095439/pexels-photo-3095439.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="" />
</div>
<form class="form-inline">
**//i want the filter input in this area and not above the table in the vue component and still be able to filter the table**
</form>
</section>
<invoices-component />
#endsection
Register your component as a window object
const app = new Vue({
...
});
window.app = app;
Then create a input which would change the model of the app
<input type="text" onchange="window.app.keyword = this.value" />
Related
I'm confused why it didn't work on my vue file when Im trying to auto import components in my view, the documentation says link you just need to set the components into true inside nuxt.config.js file, I tried but it doesn't work, do I properly import the custom vue?
this is my directory
Components
>Timeline.vue
>TimelineItem.vue
This will works fine but I want to automate and remove the importfrom script
<template id="timeline-template">
<ul class="timeline">
<li
is="TimelineItem"
v-for="(item, index) in items"
:key="index"
:item="item"
></li>
</ul>
</template>
<script>
import TimelineItem from './TimelineItem.vue'
export default {
components: { TimelineItem },
props: ['items'],
}
</script>
So I just updated my script like this I just removed the import file since I want to automate it
<script>
export default {}
</script>
Then in my nuxt.config.js I set the component into true
components: true,
This is my TimelineItem.vue
<template id="timeline-item-template">
<li class="timeline-item">
<div class="timeline-badge" :class="item.icon_status">
<i :class="item.icon_class"></i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">{{ item.title }}</h4>
<div class="timeline-panel-controls">
<div class="controls">
<a
v-for="(control, index) in item.controls"
:key="index"
:control="control"
>
</a>
</div>
<div class="timestamp">
<small class="text-muted">{{ item.created }}</small>
</div>
</div>
</div>
<div class="timeline-body">{{ item.body }}</div>
</div>
</li>
</template>
<script>
export default {
props: ['item'],
}
</script>
Updated
I tried using <TimelineItem/> instead using is="TimelineItem but it doesn't work
<template id="timeline-template">
<ul class="timeline">
<TimelineItem v-for="(item, index) in items" :key="index" :item="item" />
</ul>
</template>
<script>
export default {
props: ['items'],
}
</script>
OP's issue was fixed by importing TimelineItem inside of components.js!
Everything is working fine, as expected.
My vue js component doesnt show on my project. I don't see any errors from my part as I have seen many examples before and this is the right logic to implement it. Can anyone help me?
index.blade.php file
<div id="app">
<div class="d-flex align-items-center pb-3">
<div class="h3">{{ $user->username}}</div>
<follow-button></follow-button>
</div>
</div>
FollowButton.vue file
<template>
<div>
<button class="btn btn-primary ml-4"> Follow Me </button>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
app.js file
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('follow-button', require('./components/FollowButton.vue').default);
const app = new Vue({
el: '#app',
});
ExampleComponent.vue file
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Example Component</div>
<div class="card-body">
I'm an example component.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
make sure you use <div id="app"> inside write all vuejs code
Add this in app.js
Vue.component('follow-button', require('./components/FollowButton.vue').default);
after register follow-button you can use
<div id="app">
<div class="d-flex align-items-center pb-3">
<div class="h3">{{ $user->username}}</div>
<follow-button> </follow-button>
</div>
</div>
after that run npm run dev
Note: - make sure index.blade.php here you added app.js file
For anyone who might have the same problem with me, somehow I had two divs with the same id="app" and that made sure that my vue.js file not to be implemented on my laravel project.
try to add to index.blade.php file
<script src="{{ mix('/js/app.js') }}"></script>
I have Laravel app, and create search box with algolia everything is good and the search is find but my question now for this code of Vue :
<template>
<ais-index app-id="myid" api-key="mykey" index-name="users">
<ais-input class="search form-control shadow-sm rounded" placeholder="Search"></ais-input>
<ais-results>
<template slot-scope="{result}">
<div>
<h2>{{ result.name }}</h2>
<h4>{{ result.email }}</h4>
</div>
</template>
</ais-results>
</ais-index>
</template>
<script>
export default {};
</script>
I need spare the form ( ais-input ) in a place and put the result ( ais-results ) in another place of course same page
Something like that make two component one for input and second for result ( blew it will be in blade file ) :
<div class="col-md-2">
<search-box/> (<ais-input/>)
</div>
<div class="col-md-2">
<result-box/> (<ais-results/>)
</div>
Considering they seem to already be components, you can try to use them directly.
You can create two new Vue components, where you add the existing components:
<template>
<div class="col-md-2">
<ais-input class="search form-control shadow-sm rounded" placeholder="Search"></ais-input>
</div>
</template>
And the you can use them in your template as you wish.
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
My view blade laravel like this :
<section class="content">
<product-list :product-data="{{json_encode($products)}}"></product-list>
</section>
In the view blade call vue component
The vue compoponent like this :
<template>
<div class="box">
...
<div class="box-body">
<div class="box-footer">
<!-- call view blade -->
</div>
</div>
</div>
</template>
<script>
export default {
...
}
</script>
In the vue component, I want to call view blade laravel
The view blade like this :
{{$products->links()}}
I want to call it because the pagination only run in view blade
How can I do it?
You'd have to use a slotted component:
Vue Components:
<template>
<div class="box">
...
<div class="box-body">
<div class="box-footer">
<slot></slot>
</div>
</div>
</div>
</template>
<script>
export default {
...
}
</script>
Blade file
<section class="content">
<product-list :product-data="{{json_encode($products)}}">
{{$products->links()}}
</product-list>
</section>