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.
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.
I have created some reusable Modal components moving our app away from jQuery and Bootstrap.
I patterned these components after the components in Laravel Jetstream (Inertia) stack.
First I have a top level DialogContainer which houses the transitions and backdrop and then a generic slot. This top level component is also wrapped in a call to portal-vue so that all my modals are sent to the dialog-helper.
For brevity I'll remove all the Tailwind classes which are straight from TailwindUI.
<template>
<portal to="dialog-helper">
<Transition attrs>
...
<div v-show="show" class="classes">
<slot v-if="show" />
</div>
</Transition>
</portal>
</template>
Next I have several different types of Dialogs, a Fullscreen, Footed, Confirm, Plain Panel etc. These all have named slots for different sections, and are wrapped with the DialogContainer
Confirm Dialog
<template>
<DialogContainer :show="show" :max-width="maxWidth" :closeable="closeable" #close="closeDialog">
...
<h3 class="classes">
<slot name="title" />
</h3>
...
<div class="classes">
<slot name="content" />
</div>
...
<div class="classes">
<CancelButton />
<ConfirmButton />
</div>
...
</DialogContainer>
</template>
Then when I want to use the confirm dialog in a template:
<ConfirmDialog :show="isOpen" #close="isOpen = false" #confirmed="someMethod">
<template #title>Are You Sure You Want to Delete This Item?</template>
<template #content>Deleting this will cause a complete nuclear meltdown, this isn't reversable!</template> // this works
<template #content>
<div class="row">
<div class="form-group col-md-12" :class="{ 'has-error': validation.max }">
<label class="control-label">Maximum Percentage</label>
<input class="form-control" v-model="form.max" placeholder="Maximum ..." type="number" />
<span class="help-block" v-if="validation.max">
{{ validation.max[0] }}
</span>
</div>
</div>
</template> // This works fine, no problems.
<template #content>
<div class="alert alert-warning">
Romantic notes required for Christmas will get auto-populated on the document when rendered.
</div>
</template> // won't open and gives no error in console
<template #content>
<WarningAlert> // even wrapped in a component ...
<p>Romantic notes required for Christmas will get auto-populated on the document when rendered.</p>
</WarningAlert>
</template> // NOPE, this doesn't work either.
</ConfirmDialog>
Can anyone tell me what I'm doing wrong, this exact strategy works in Jetstream, but something isn't working for me here.
UPDATE
I've discovered that I'm able to place plain text up to 109 characters in length. After that it fails ... wth?
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" />
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
I would like to use Vue's collapse in my code, but I have an error.
[Vue warn]: <transition-group> children must be keyed: <p>
My component:
<template xmlns:v-model="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<section style="background-color: #dedede;">
<div class="container-fluid">
<div class="Consult-faq container">
<div class="row">
<div class="col-sm-12">
<h2>Cursos</h2>
<a v-for="(course,id) in courses" v-on:click="course.show = !course.show">
<a v-on:click="show = !show">
<div class="col-xs-12" style="border-bottom: solid;border-bottom-color: #999999;border-bottom-width:1px ">
<div class="col-xs-12">
<h4>
<i v-if="course.show" class="fa fa-plus-square text-right" aria-hidden="true"/>
<i v-else class="fa fa-minus-square text-right" aria-hidden="true"/>
{{course.text}}
</h4>
</div>
</div>
<transition-group name="fade">
<p v-if="show">
<div class="col-xs-12">
<article v-for="n in 2" class="Module-content">
<div class=" col-sm-12 col-md-6" style="position: relative;">
<div v-for="(course, index) in course.courses">
<course-card v-if="index % 2 == n - 1" :course="course"></course-card>
</div>
</div>
</article>
</div>
</p>
</transition-group>
</a>
</a>
</div>
</div>
</div>
</div>
</section>
</template>
<script>
export default{
props : [
'courses'
],
data(){
return {
show: false
}
},
mounted() {
console.log(this.courses)
}
}
</script>
So, I'd like to know to collapse item per item. Like this in image.
When I click to expand, all courses expand or close all courses close.
Transition is irrelevant here (though you can get rid of that warning by using transition instead of transition-group, because the transition is only acting on a single node, not a group.)
Right now you're depending on a single variable show to control all of the elements' visibility, so they will all respond to clicks on any of them:
<a v-on:click="show = !show">
<p v-if="show" >
You need individual variables for each element if you want them to expand/collapse separately. You partially did this already, just change the remaining instances of show with course.show and you should be good to go.
(Probably want to clean up that nested <a> within <a> while you're at it; you can just remove the inner one.)
I solved this using vue-resource, I was using Guzzle in Laravel and require data in Controller make this not reactive. And I solved this problem using vue-resource in component.