pass data to modal in vue.js app - vue.js

I created a vue app in cli. And I have a List component file:
<template>
<div class="container">
<h1 class="text-center">List member</h1>
<table class="table table-bordered">
<thead>
<tr>
<th class="text-center">ID</th>
<th class="text-center">Name</th>
<th class="text-center">Birthday</th>
<th class="text-center">Score</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
<tr v-for="person in people">
<td class="text-center">{{ person.id }}</td>
<td class="text-center">{{ person.name }}</td>
<td class="text-center">{{ person.birthday }}</td>
<td class="text-center">{{ person.score }}</td>
<td class="text-center">
<b-btn v-b-modal.my-modal>Edit</b-btn>
</td>
</tr>
</tbody>
</table>
And I have modal component in this file:
<!-- Modal Component -->
<b-modal id="my-modal" ref="modal" title="Edit profile" #ok="handleOk"
#shown="clearName">
<form #submit.stop.prevent="handleSubmit">
<b-form-input type="text">{{ person.name }}</b-form-input>
<br>
<b-form-input type="text"></b-form-input>
<br>
<b-form-input type="text"></b-form-input>
</form>
</b-modal>
</div>
</div>
</template>
How can I pass data in a row (person) to modal when I click Edit button?
Thanks

in my case i fixed this with bootstrap modal and JQuery
1- HTML Modal
<div class="modal fade bd-example-modal-lg" id="document-details-modal" tabindex="-1" aria-labelledby="document-details-modal" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">modal-title-details-document</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<p class="mb-3">
<div class="label">label-library-file-title</div>
<span id="document-details-document-title"></span>
</p>
</div>
<div class="col-md-6">
<p class="mb-3">
<div class="label">label-library-file-source-info</div>
<span id="document-details-document-source-info"></span>
</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p class="mb-3">
<div class="label">label-library-file-author</div>
<span id="document-details-document-author"></span>
</p>
</div>
<div class="col-md-6">
<p class="mb-3">
<div class="label">label-library-file-language</div>
<span id="document-details-document-language"></span>
</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p class="mb-3">
<div class="label">label-library-file-description</div>
<span id="document-details-document-description"></span>
</p>
</div>
<div class="col-md-6">
<p class="mb-3">
<div class="label">label-library-file-comments</div>
<span id="document-details-document-comments"></span>
</p>
</div>
</div>
</div>
<div class="modal-footer">
<div class="text-center">
<button type="button" class="btn" data-bs-dismiss="modal" aria-label="Close">ok</button>
</div>
</div>
</div>
</div>
</div>
2- Vuejs Call
<i class="bi bi-info-circle" v-on:click="setDocumentDetails(libraryItem)"></i>
3- Vuejs Funcation
setDocumentDetails: function (libraryItem) {
$('#document-details-document-title').text(libraryItem.Title);
$('#document-details-document-description').text(libraryItem.Description);
$('#document-details-document-source-info').text(libraryItem.SourceInfo);
$('#document-details-document-comments').text(libraryItem.Comments);
$('#document-details-document-author').text(libraryItem.Author);
$('#document-details-document-language').text(libraryItem.Language);
$('#document-details-modal').modal('show');
}

I am not sure this will work, and even less sure that this is elegant, but if they are in the same file, you could try having a currentPerson property that you set to person when this button is clicked. Like
<b-btn #click="currentPerson = person" v-b-modal.my-modal>Edit</b-btn>
and then just use {{currentPerson.name}} in the modal.

Related

I'm getting ERROR [app-router] Error: Route not found: /pane02 when trying to navigate to href inside the HTML in Aurelia

I'm trying to insert a navigation tab that will be displayed underneath the main one when the user clicks on the Pane5, but when I click on the child element (Pane01 or Pane02) I get app-router error. Is this happening because of nesting bootstrap
Here is an example of how HTML is structured in the page:
<template>
<div>
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-6">
<h3 class=""><span t="asset_details"></span>SomeElement</h3>
</div>
<div class="col-lg-6">
<a class="pull-right"><i class="fa fa-window-close fa-2x"></i></a>
</div>
</div>
<div class="row">
<ul class="nav nav-pills">
<li><a data-toggle="tab" href="#pane1"><span>Details</span></a></li>
<li><a data-toggle="tab" href="#pane2"><span>Details</span></a></li>
<li><a data-toggle="tab" href="#pane3"><span>Other</span></a></li>
<li><a data-toggle="tab" href="#pane4"><span>Element</span></a></li>
<li><a data-toggle="tab" href="#pane6"><span>Element</span></a></li>
<li><a data-toggle="tab" href="#pane5"><span>Element</span></a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="pane1">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-4">
</div>
<div class="col-lg-8">
<div class="row">
<div class="col-lg-6">
<compose>
</compose>
</div>
<div class="col-lg-6">
<compose></compose>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<compose></compose>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="pane2">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-12">
<!--<commercial-line device-id.bind="deviceId"></commercial-line>-->
<compose></compose>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="pane3">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-6">
<compose></compose>
</div>
<div class="col-lg-6">
<compose></compose>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="pane4">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-12">
<compose></compose>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="pane5">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-12">
<ul class="nav nav-pills">
<li class="active"><span>History</span></li>
<li if.bind="!history"><span>Param</span></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="pane01">
<div class="col-lg-12">
<div class="row">
<table class="table table-hover table-condensed" ref="theTable">
<thead>
<th>
<span>Afla</span>
</th>
<th class="col-lg-2">
<span>Beta</span>
</th>
<th>
<span>Gama</span>
</th>
<th>
<span>Gama</span>
</th>
<th>
</th>
</thead>
<tbody>
<tr repeat.for="element of Array">
<td>
<span>${element.first}</span>
</td>
<td class="col-lg-2">
<span >${element.second}</span>
</td>
<td>
<span>${element.third}</span>
</td>
<td>
<span>${element.fourth}</span>
</td>
<td >
<span>${element.fifth}</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="tab-pane" id="pane02">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-12">
<table class="table table-hover table-condensed">
<thead>
<th>
<span>Alfa</span>
</th>
<th>
<span>Beta</span>
</th>
<th>
<span>Gama</span>
</th>
<th>
<span>Gama</span>
</th>
<th>
<span>Example</span>
</th>
<th>
<span>Inte</span>
</th>
</thead>
<tbody>
<tr repeat.for="item of array">
<td>
<span date-time>${item.date}</span>
</td>
<div class="divider"></div>
<td>
<span date-time>${item.date2}</span>
</td>
<td>
<span>${item.user}</span>
</td>
<td>
<span>${item.array1}</span>
</td>
<td>
<span>${item.array2}</span>
</td>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="pane6">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-12">
<compose view-model="view-model">
</compose>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
add a router-ignore attribute to your a tag. so that aurelia will not activate the routing logic wen clicked on your link.
more on that topic can be found in the docs: https://aurelia.io/docs/routing/handling-links#basic-concept
Alternative way to href in Bootstrap is data-target. So if you want to do:
<a href="#panel-1">
then you can instead do:
<a data-target="#panel-1">
They are identical. The upside with data-target is it can support multiple selector

render the table on modal in twitter bootstrap

I am facing issue of table not being rendered on twitter bootstrap modal. I am doing similar to mentioned in the jsfiddle (http://jsfiddle.net/iamakshay04/sh26m80o/2/) . So to test it, I tried exactly same mentioned and found that data(table) is rendered on the page instead of the modal.
<div id="classModal" class="modal fade bs-example-modal-lg"
tabindex="-1" role="dialog" aria-labelledby="classInfo" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="classModalLabel">
Class Info
</h4>
</div>
<div class="modal-body">
<table id="classTable" class="table table-bordered">
<thead>
</thead>
<tbody>
<tr>
<td>CLN</td>
<td>Last Updated Date</td>
<td>Class Name</td>
<td># Tests</td>
<td>Test Coverage (Instruction)</td>
<td>Test Coverage (Complexity)</td>
<td>Complex Covered</td>
<td>Complex Total</td>
<td>Category</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
jQuery:
$('#classModal').modal('show')
CSS:
#classModal {}
.modal-body {
overflow-x: auto;
}

Form group static in bootstrap 3

AM using bootstrap 3 for my python web application. I want to use the application in mobile devices also. but the input form fields are become responsive to the width of the device. I want in input field width to be static as in browser . please advice how to achieve this?
below is the html which am using
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-md-2 pull-left">
Add Timesheet Details
</div>
<div class="col-md-8 text-center">
<label class="control-label" for="timesheet_no">Time Sheet Number:01</label>
</div>
</div>
</div>
<div class="panel-body">
<form id="add_detail" class="form-horizontal" action="" method="post" name="page">
<div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value="1434973923##5ac019cd8821a1dfda978dde3710893c8b0ced33"></div>
<div class="form-group">
<div class="repeat" id="dimdetail-fieldset">
<div class="col-md-12">
<div class ="table-responsive">
<table id="table_id" class="wrapper table table-bordered">
<thead>
<tr>
<th class="col-md-2"><button type="button" class="add btn btn-primary pull-left" id="add_time"><i class="glyphicon glyphicon-plus"></i>&nbsp Time</button></th>
</tr>
</thead>
<tbody class="container">
<tr class="success">
<th class="col-md-2">Project</th>
<th class="col-md-2">Total Hours</th>
<th class="col-md-2">TPI Inspector Name</th>
<th class="col-md-2">Inspection Type</th>
<th class="col-md-2">Remarks</th>
<th></th>
</tr>
<tr >
<td class="form-group col-md-2">
<select class="form-control" id="timesheet_time_details-0-project_id" name="timesheet_time_details-0-project_id" style="width:100%"><option value="">-- please choose --</option>
<option value="12997">12997</option></select>
</td>
<td class="form-group col-md-2">
<input class="form-control" id="timesheet_time_details-0-total_hours" name="timesheet_time_details-0-total_hours" type="text" value="10.0">
</td>
<td class="form-group col-md-2">
<input class="form-control" id="timesheet_time_details-0-tpi_inspector_name" name="timesheet_time_details-0-tpi_inspector_name" type="text" value="Ram">
</td>
<td class="form-group col-md-2">
<select class="form-control" id="timesheet_time_details-0-testmethod" name="timesheet_time_details-0-testmethod" style="width:100%"><option value="__None">-- please choose --</option><option selected value="1">UltraSonic Inspection</option></select>
</td>
<td class="form-group col-md-2">
<textarea class="form-control" id="timesheet_time_details-0-remarks" name="timesheet_time_details-0-remarks" rows="3">ok</textarea>
</td>
<td class="col-md-1">
<button class="remove btn btn-danger" type="button" id=""><i class='glyphicon glyphicon-trash'></i> Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<div class="row">
<div class="col-md-10 pull-left">
<button class="btn btn-primary" type="submit" value="Save" name="Save"><i class="glyphicon glyphicon-save"></i>&nbsp Save</button>
<button class="btn btn-success" type="submit" value="Submit for Approval" name="Save"><i class="glyphicon glyphicon-ok-circle"></i>&nbsp Submit for Approval</button>
<button id="delete" class="btn btn-danger" type="submit" value="Delete" name="Save"><i class="glyphicon glyphicon-trash"></i>&nbsp Delete</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
Add the below css
.form-control {width:150px} /*the width you want*/
make sure it renders after your bootstrap css. You are however getting rid of the responsiveness of the row that contains the inputs.
here is a bootply example

unable to make a block responsive using bootstrap

I want to make this responsive on mobile screen
<div class="row well">
<div class="col-sm-3 col-xs-6">
<div class="panel panel-default">
<div class="panel-body">
<img src="//placehold.it/450X300/DD66DD/EE77EE" class="img-responsive">
<div class="caption">
<h3>Plot 1</h3>
<p><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Electronic City
</p>
</div>
</div>
<table class="table" style="padding: 0; margin: 0;">
<tbody>
<tr>
<td>Price</td>
<td>Rs. 1400000</td>
</tr>
<tr>
<td>Total Land</td>
<td>7 acres</td>
</tr>
<tr>
<td>Total Plots</td>
<td>154</td>
</tr>
<tr>
<td>Avaliable Plots</td>
<td>15</td>
</tr>
</tbody></table>
<div class="panel-body">
<input class="btn btn-primary pull-right" type="button" value="ENQUIRY">
</div>
</div>
</div>
<div class="col-sm-3 col-xs-6">
<div class="panel panel-default">
<div class="panel-body">
<img src="//placehold.it/450X300/DD66DD/EE77EE" class="img-responsive">
<div class="caption">
<h3>Plot 1</h3>
<p><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Electronic City
</p>
</div>
</div>
<table class="table" style="padding: 0; margin: 0;">
<tbody>
<tr>
<td>Price</td>
<td>Rs. 1400000</td>
</tr>
<tr>
<td>Total Land</td>
<td>7 acres</td>
</tr>
<tr>
<td>Total Plots</td>
<td>154</td>
</tr>
<tr>
<td>Avaliable Plots</td>
<td>15</td>
</tr>
</tbody></table>
<div class="panel-body">
<input class="btn btn-primary pull-right" type="button" value="ENQUIRY">
</div>
</div>
</div>
<div class="col-sm-3 col-xs-6">
<div class="panel panel-default">
<div class="panel-body">
<img src="//placehold.it/450X300/DD66DD/EE77EE" class="img-responsive">
<div class="caption">
<h3>Plot 1</h3>
<p><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Electronic City
</p>
</div>
</div>
<table class="table" style="padding: 0; margin: 0;">
<tbody>
<tr>
<td>Price</td>
<td>Rs. 1400000</td>
</tr>
<tr>
<td>Total Land</td>
<td>7 acres</td>
</tr>
<tr>
<td>Total Plots</td>
<td>154</td>
</tr>
<tr>
<td>Avaliable Plots</td>
<td>15</td>
</tr>
</tbody></table>
<div class="panel-body">
<input class="btn btn-primary pull-right" type="button" value="ENQUIRY">
</div>
</div>
</div>
<div class="col-sm-3 col-xs-6">
<div class="panel panel-default">
<div class="panel-body">
<img src="//placehold.it/450X300/DD66DD/EE77EE" class="img-responsive">
<div class="caption">
<h3>Plot 1</h3>
<p><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Electronic City
</p>
</div>
</div>
<table class="table" style="padding: 0; margin: 0;">
<tbody>
<tr>
<td>Price</td>
<td>Rs. 1400000</td>
</tr>
<tr>
<td>Total Land</td>
<td>7 acres</td>
</tr>
<tr>
<td>Total Plots</td>
<td>154</td>
</tr>
<tr>
<td>Avaliable Plots</td>
<td>15</td>
</tr>
</tbody></table>
<div class="panel-body">
<input class="btn btn-primary pull-right" type="button" value="ENQUIRY">
</div>
</div>
</div>
</div>
view on desktop , this is fine
view on small screen , the design is getting compressed
And i want to show single plot record in a row , not two as shown below
How to make it responsive in small screen?
i am using bootstrap 3 for this
col-xs- is specifically for mobile phones. And making it col-xs-12 will make it take full width.
Update your columns
from
<div class="col-sm-3">
to
<div class="col-xs-12 col-sm-3">

bootstrap 3 : display items in separate rows on mobile device

i am creating a form where i want to display a input field and a header. here is my code
<div class="container">
<div class="row">
<div class="col-md-6">
<h4 class="pull-left"><b>Hum Members</b></h4>
</div>
<div class="col-md-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Add emails">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Add</button>
</span>
</div>
</div>
</div>
<br><br>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-10 col-xs-10">
<div class="visible-lg visible-md">
<ul class="nav nav-tabs" id="myTab">
<li class="active">
<i class="fa fa-users fa-1x"></i> Members
</li>
<li><i class="fa fa-plus fa-1x"></i> Join Requests</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="members">
<div class="table-responsive">
<table class="table table-hover table-borderless">
<thead>
<tr>
<th>Group Name</th>
<th>Created by</th>
<th>Moderator</th>
<th>Group ID</th>
</tr>
</thead>
<tbody>
<tr>
<td>group 01</td>
<td>test</td>
<td>test</td>
<td>Ag223B3</td>
</tr>
<tr>
<td>group 01</td>
<td>test</td>
<td>tset</td>
<td>Ag223B3</td>
</tr>
<tr>
<td>group 01</td>
<td>est>
</td><td>test</td>
<td>Ag223B3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-sm-2 col-xs-2 visible-sm visible-xs">
<ul class="nav pull-right">
<li class="active"><i class="fa fa-users fa-2x"></i></li>
<li><i class="fa fa-plus fa-2x"></i></li>
</ul>
</div>
</div>
</div>
the header "Hub members" and "input field" are displayed in single line. On mobile phone it is displaying on same row as on desktop. what i want is to display it in separate rows on mobile phones. e.g.
hub members //header
user emails //input field
//rest of view i.e table
How can i resolve it.
Regards,
Following is demo code
Demo here
Is this what you're trying to achieve? Not really sure about your instructions.
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
<h4><b>Hum Members</b></h4>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<h4>User Emails</h4>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<div class="input-group">
<input type="text" class="form-control" placeholder="Add emails">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Add</button>
</span>
</div>
</div>
</div>
Or Probably this?
<div class="row">
<div class="col-md-4">
<h4><b>Hum Members</b></h4>
</div>
<div class="col-md-4">
<h4>User Emails</h4>
</div>
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control" placeholder="Add emails">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Add</button>
</span>
</div>
</div>
</div>