I am working on a Laravel 5.7 application, that has a view with a Jarvis Widget [http://data.edwardsaquifer.org/widgets.php] inside of a VueJS component. However I can't seem to get the Jarvis widget to function while wrapped within the Vue Component.
The Vue instance wraps two Vue components, and two Jarvis widgets. I ruled out any issue with the Jarvis widget setup itself, by removing the Jarvis widgets outside of the Vue instance. The widgets work fine in this case, so I'm assuming it has something to do with the scope of the Jarvis widget variables not being accessible within the Vue instance, however I am unsure of how to fix this.
My relevant view source code:
@section('content')
<section id="widget-grid">
<div class="row">
<article class="col-xs-12 col-sm-12 col-md-12 col-lg-12 sortable-grid ui-sortable">
<prospects inline-template class="">
<div>
<div class="jarviswidget jarviswidget-sortable" id="wid-id-0" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-deletebutton="false" data-widget-custombutton="false" role="widget">
<header class="ui-sortable-handle">
<div class="widget-header">
<div id="prospectTabs" class="d-none pull-right">
<ul>
<li id="prospectTabsSearch"><a href="#search-tab"><i class="fa fa-search"></i> Search Leads</a></li>
<li id="prospectTabsAdd"><a href="#add-tab" v-html="formProspect.headerText"></a></li>
</ul>
</div>
</div>
</header>
<!-- widget div-->
<div role="content">
<!-- widget content -->
<div class="widget-body" id="prospectTabsContent">
<div id="search-tab">
<form class="smart-form" id="searchProspectsForm">
@csrf
<div class="row">
<div class="col-md-3">
<label>Search by Restaurant Keyword(s):</label>
<input type="text" class="form-control" />
</div>
<div class="col-md-3">
<label>Search by Zip Code, City, or Location:</label>
<input type="text" class="form-control" />
</div>
<div class="col-md-3">
<label>Filter By Contact Status:</label>
<input type="text" class="form-control" />
</div>
<div class="col-md-3">
<label>Search Radius:</label>
<select class="form-control">
<option value="">Exact Match</option>
<option value="5">5 Miles</option>
<option value="10">10 Miles</option>
<option value="20">20 Miles</option>
<option value="50">50 Miles</option>
</select>
</div>
</div>
<div class="widget-footer">
<label class="mr-4">
<label class="vcheck">
<input type="checkbox" /> <span></span> Show Results on Map
</label>
</label>
<button class="btn text-white bg-orange"><span class="fa fa-search"></span> Search Restaurants</button>
</div>
</form>
</div>
<div id="add-tab" class="d-none">
<h4 v-html="formProspect.headerText"></h4>
<hr class="simple" />
<form class="smart-form" id="addProspectsForm">
@csrf
<div class="row form-group">
<div class="col-md-3">
<label for="">Restaurant Name: <span class="text-orange">*</span></label>
<input v-model="formProspect.inputs.name" type="text" class="form-control" :class="{ 'is-invalid': formProspect.errors.name }" name="name" value="" />
<span v-if="formProspect.errors.name" class="invalid-feedback" role="alert"><strong>@</strong></span>
</div>
<div class="col-md-3">
<label for="">Phone:</label>
<input v-model="formProspect.inputs.phone" type="text" class="form-control" :class="{ 'is-invalid': formProspect.errors.phone }" name="phone" value="" />
<span v-if="formProspect.errors.phone" class="invalid-feedback" role="alert"><strong>@</strong></span>
</div>
<div class="col-md-3">
<label for="">Website:</label>
<input v-model="formProspect.inputs.website" type="text" class="form-control" :class="{ 'is-invalid': formProspect.errors.website }" name="website" value="" />
<span v-if="formProspect.errors.website" class="invalid-feedback" role="alert"><strong>@</strong></span>
</div>
<div class="col-md-3">
<label for="">Food Category: <span class="text-orange">*</span></label>
<select id="food_cat_id" v-model="formProspect.inputs.food_cat_id" class="form-control" :class="{ 'is-invalid': formProspect.errors.food_cat_id }" name="food_cat_id" required>
@foreach(Cache::get('food_cats') as $c)
<option value=""></option>
@endforeach
</select>
<span v-if="formProspect.errors.food_cat_id" class="invalid-feedback" role="alert"><strong>@</strong></span>
</div>
</div>
<hr />
<div class="row form-group">
<div class="col-md-4">
<label for="">Contact First Name:</label>
<input v-model="formProspect.inputs.contact_fname" type="text" class="form-control" :class="{ 'is-invalid': formProspect.errors.contact_fname }" name="contact_fname" value="" />
<span v-if="formProspect.errors.contact_fname" class="invalid-feedback" role="alert"><strong>@</strong></span>
</div>
<div class="col-md-4">
<label for="">Contact Last Name:</label>
<input v-model="formProspect.inputs.contact_lname" type="text" class="form-control" :class="{ 'is-invalid': formProspect.errors.contact_lname }" name="contact_lname" value="" />
<span v-if="formProspect.errors.contact_lname" class="invalid-feedback" role="alert"><strong>@</strong></span>
</div>
<div class="col-md-4">
<label for="">Contact Title:</label>
<input v-model="formProspect.inputs.contact_title" type="text" class="form-control" :class="{ 'is-invalid': formProspect.errors.contact_title }" name="contact_title" value="" />
<span v-if="formProspect.errors.contact_title" class="invalid-feedback" role="alert"><strong>@</strong></span>
</div>
</div>
<hr />
<div class="row form-group">
<div class="col-md-6">
<label for="">Address:</label>
<input v-model="formProspect.inputs.address" type="text" class="form-control" :class="{ 'is-invalid': formProspect.errors.address }" name="address" value="" />
<span v-if="formProspect.errors.address" class="invalid-feedback" role="alert"><strong>@</strong></span>
</div>
<div class="col-md-6">
<label for="">Address Line 2:</label>
<input v-model="formProspect.inputs.address2" type="text" class="form-control" :class="{ 'is-invalid': formProspect.errors.address2 }" name="address2" value="" />
<span v-if="formProspect.errors.address2" class="invalid-feedback" role="alert"><strong>@</strong></span>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label for="">City: <span class="text-orange">*</span></label>
<input v-model="formProspect.inputs.city" type="text" class="form-control" :class="{ 'is-invalid': formProspect.errors.city }" name="city" value="" />
<span v-if="formProspect.errors.city" class="invalid-feedback" role="alert"><strong>@</strong></span>
</div>
<div class="col-md-4">
<label for="">State: <span class="text-orange">*</span></label>
<select id="state_id" v-model="formProspect.inputs.state_id" class="form-control" :class="{ 'is-invalid': formProspect.errors.state_id }" name="state_id" required>
<option value="">--Select State</option>
@foreach(Cache::get('us_states') as $s)
<option value=""></option>
@endforeach
</select>
<span v-if="formProspect.errors.state_id" class="invalid-feedback" role="alert"><strong>@</strong></span>
</div>
<div class="col-md-4">
<label for="">Zip Code:</label>
<input v-model="formProspect.inputs.zip" type="text" class="form-control" :class="{ 'is-invalid': formProspect.errors.zip }" name="zip" value="" />
<span v-if="formProspect.errors.zip" class="invalid-feedback" role="alert"><strong>@</strong></span>
</div>
</div>
<hr />
<div class="row form-group">
<div class="col-md-12">
<label for="">Response Notes / Comments:</label>
<textarea class="form-control" :class="{ 'is-invalid': formProspect.errors.response_notes }" rows="3" name="response_notes" v-model="formProspect.inputs.response_notes"></textarea>
<span v-if="formProspect.errors.response_notes" class="invalid-feedback" role="alert"><strong>@</strong></span>
</div>
</div>
</form>
<div class="widget-footer">
<button class="btn text-white bg-orange" v-html="formProspect.btnText" @click.prevent="(formProspectMode == 'add') ? addProspect() : saveProspect()"></button>
</div>
</div>
</div>
<!-- end widget content -->
</div>
</div>
<!-- end jarviswidget div -->
<div class="jarviswidget jarviswidget-sortable" id="wid-id-1" data-widget-editbutton="false" data-widget-deletebutton="false">
<header class="ui-sortable-handle">
<div class="widget-header">
<h2><i class="fa fa-list"></i> Prospects/Leads List</h2>
</div>
<button class="btn btn-sm btn-danger" @click="deleteSelectedProspects" id="btnDeleteSelectedProspects"><span class="fa fa-trash"></span> Delete Selected</button>
</header>
<!-- widget div-->
<div role="content">
<!-- widget content -->
<div class="widget-body">
<table id="prospectsTable" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>
<label class="vcheck">
<input type="checkbox" id="toggleCheckAllProspects" value="1" /> <span></span>
</label>
</th>
<th>Name</th>
<th>Food Category</th>
<th>Contact</th>
<th>Admin Comments</th>
<th></th>
</tr>
</thead>
<tbody>
<tr is="prospect"
v-for="(prospect, index) in prospects"
:prospect="prospect"
:key="prospect.id"
@delete-prospect="removeProspect(index)"
@update-contacted="updateContacted(index)">
</tr>
</tbody>
</table>
</div>
<!-- end widget content -->
</div>
</div>
<!-- end jarviswidget div -->
</div>
</prospects>
</article>
</div>
</section>
@endsection
My relevant Layout Source:
<div class="sa-content" id="adminDashboard">
<div id="alertMsgWrapper">
<div id="alertMsgContainer">
@if (session('errorMsg'))
<div class="alert alert-danger" role="alert">{!! session('errorMsg') !!}</div>
@elseif(session('successMsg'))
<div class="alert alert-success" role="alert">{!! session('successMsg') !!}</div>
@endif
</div>
</div>
@yield('content')
</div>
My Vue instance initialization:
Vue.component('prospects', require('./components/Admin/dashboard/Prospects.vue').default);
Vue.component('prospect', require('./components/Admin/dashboard/Prospect.vue').default);
var adminDashboard = new Vue({
el: '#adminDashboard',
mount() {}
});
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire