i want to use v-if in vue js with multiple condition
exp
<div v-for="row in formFields" class="col-md-6">
<div class="form-group">
<label for="formGroupExampleInput">{{row.nameField}}</label>
<input v-model="product[row.nameField]" v-if="row.type == 'Number'&& row.typeField == 'Input'" type="number" class="form-control" id="formGroupExampleInput" :placeholder="row.nameField">
but it dosen't work
can any one help me ?
This should work if you put a space before the AND
<input v-model="product[row.nameField]" v-if="row.type == 'Number'&& row.typeField == 'Input'" type="number" class="form-control" id="formGroupExampleInput" :placeholder="row.nameField">
correct should be
<input v-model="product[row.nameField]" v-if="row.type == 'Number' && row.typeField == 'Input'" type="number" class="form-control" id="formGroupExampleInput" :placeholder="row.nameField">
Related
Could anyone advise how I can style elements so that the p fields were below input fields?
I tried to do so but unfortunatelly I do not know how to do it correctly.
The code:
<template>
<form #submit.prevent class="row justify-content-center">
<input
ref="input"
type="text"
class="input-box"
style="display: block"
v-model="$store.state.medicineNameInput"
v-on:keydown.enter.prevent="addMedicine"
placeholder="Input a medicine"
/>
<p
class="validation"
v-if="getMedicineNameInput === '' || getMedicineNameInput.trim() === ''"
>
This field cannot be empty.
</p>
<p class="validation" v-else-if="getMedicineNameInput.length < 3">
You need to input at least three characters.
</p>
<input
ref="input"
type="date"
class="input-box"
v-model="$store.state.medicineExpiryDateInput"
v-on:keydown.enter.prevent="addMedicine"
placeholder="Input expiry date"
/>
<p class="validation" v-if="getMedicineExpiryDateInput === ''">
Please input a valid date.
</p>
<button
type="submit"
v-if="
getMedicineNameInput.length >= 3 &&
getMedicineExpiryDateInput.length === 10
"
#click="addMedicine"
class="btn btn-warning"
>
Add a medicine
</button>
</form>
</template>
The elements on the page:
I would be gratefull for advice.
Try to wrap every input and paragraph inside a section tag
and give it styles ->
display : “flex”
flex-direction:”column”
It should display the elements below each other
use vue
i want to insert an element when i click createItem:
<template>
<div class="form-row group">
<h5 class="p-2 col-md-12">item</h5>
<div class="form-row">
<div class="form-group mr-2">
<input type="number" class="form-control" placeholder="Num" v-model="tempitemNum">
</div>
<div class="form-group">
<button class="btn btn-primary btn-sm mt-1" #click="createItem">create</button>
</div>
</div>
<div class="items col-md-12 mt-1 mb-1">
//create item here
</div>
</div>
</template>
my script function
createItem: function(){
let items = document.querySelector('.items');
if(this.itemNum == 0){
this.itemNum = parseInt(this.tempitemNum);
for (let i = 0; i < this.itemNum; i++) {
let item = document.createElement('div');
item.className = "col-md-12 mb-1 pl-0 pr-0";
item.innerHTML = `
<div>
<span>${i+1}.</span>
<input type="text" class="form-control">
<input type="text" class="form-control">
<input type="text" class="form-control">
</div>
`
items.insertAdjacentElement("beforeend", item);
}}}
how can i insert item with v-model in every input element?
You can use jsx to render Dom elements and now you can use v-model with it you can check: https://github.com/nickmessing/babel-plugin-jsx-v-model
I'm implementing a project by asp.net core. I have a selectlist item which its options are loaded from a model and it has 2 items. My problem is, I want in the razor view, according to the selected option in selectlist, some TextFields be shown to the user. For example if the user choose the first option, three of the fields be shown to the user and if the user selects the second option, other fields be shown to the user meanwhile the other three field be hidden. For doing this. I have tried some code like below in my Create view:
#model CSDDashboard.Models.ApplicantViewModel
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"> </script>
<script>
$(document).ready(function () {
$('#applicantvm.ApplicantType').change(function () {
var value = $(this).val();
if (value == '1') {
$(".legal").hide();
} else {
$(".person").show();
}
});
});
</script>
#{
ViewData["Title"] = "Create";
}
<h1>Create</h1>
<h4>Applicant</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="applicantvm.ApplicantType" class="control-label"></label>
<select asp-for="applicantvm.ApplicantType" class="form-control" asp-items="ViewBag.ApplicantType"></select>
</div>
<div class="form-group">
<label asp-for="applicantvm.Address" class="control-label"></label>
<input asp-for="applicantvm.Address" class="form-control" />
<span asp-validation-for="applicantvm.Address" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="applicantvm.Description" class="control-label"></label>
<input asp-for="applicantvm.Description" class="form-control" />
<span asp-validation-for="applicantvm.Description" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="applicantvm.Name" class="control-label"></label>
<input asp-for="applicantvm.Name" class="form-control" />
<span asp-validation-for="applicantvm.Name" class="text-danger"></span>
</div>
<div class="form-group legal">
<label asp-for="legalapplicantvm.EconomicCode" class="control-label"></label>
<input asp-for="legalapplicantvm.EconomicCode" class="form-control" />
<span asp-validation-for="legalapplicantvm.EconomicCode" class="text-danger"></span>
</div>
<div class="form-group legal">
<label asp-for="legalapplicantvm.NationalCode" class="control-label"></label>
<input asp-for="legalapplicantvm.NationalCode" class="form-control" />
<span asp-validation-for="legalapplicantvm.NationalCode" class="text-danger"></span>
</div>
<div class="form-group legal">
<label asp-for="legalapplicantvm.RegisterNo" class="control-label"></label>
<input asp-for="legalapplicantvm.RegisterNo" class="form-control" />
<span asp-validation-for="legalapplicantvm.RegisterNo" class="text-danger"></span>
</div>
<div class="form-group person">
<label asp-for="personapplicantvm.BirthCertificateNo" class="control-label"></label>
<input asp-for="personapplicantvm.BirthCertificateNo" class="form-control" />
<span asp-validation-for="personapplicantvm.BirthCertificateNo" class="text-danger"></span>
</div>
<div class="form-group person">
<label asp-for="personapplicantvm.IssuePlace" class="control-label"></label>
<input asp-for="personapplicantvm.IssuePlace" class="form-control"/>
<span asp-validation-for="personapplicantvm.IssuePlace" class="text-danger"></span>
</div>
<div class="form-group person">
<label asp-for="personapplicantvm.NationalCode" class="control-label"></label>
<input asp-for="personapplicantvm.NationalCode" class="form-control" />
<span asp-validation-for="personapplicantvm.NationalCode" class="text-danger"></span>
</div>
<div class="form-group person">
<label asp-for="personapplicantvm.Username" class="control-label"></label>
<input asp-for="personapplicantvm.Username" class="form-control" />
<span asp-validation-for="personapplicantvm.Username" class="text-danger"></span>
</div>
}
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
</div>
</div>
<div>
<a asp-action="Index">Back To List</a>
</div>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
After running the project, the view is the same as before and all the fields will be visible. I appreciate if anyone suggest me a solution.
asp-for="applicantvm.ApplicantType" render the id and name in the html like id="applicantvm_ApplicantType" name="applicantvm.ApplicantType" ,you could use the developer tools to check the Source code.
So you should change your javascript as shown:
<script>
$(document).ready(function () {
$(".person").hide();
$(".legal").hide();
$('#applicantvm_ApplicantType').change(function () {
var value = $(this).val();
if (value == '1') {
$(".legal").show();
if ($(".person").show()) {
$(".person").hide();
}
} else {
$(".person").show();
if ($(".legal").show()) {
$(".legal").hide();
}
}
});
});
</script>
Result:
In Simple terms,
Write ONCHANGE Event in the drop down and invoke a JavaScript function.
From JavaScript, based on the drop down values, show and hide the controls.
I'm actually new in asp.net core and don't know much about it
My question is.
I want to populate a text field on Razor view when an enum item is selected from dropdown list but have no idea about how to do it
I have searched about this but didn't find any thing
I want to populate Price field when item is selected from FightClass
View
#model Airline.Models.BookingModel
#{
ViewData["Title"] = "Buy";
}
<h2>Buy</h2>
<h4>BookingModel</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="Buy">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input asp-for="FlightSkyMiles" type="hidden" value="#ViewBag.Flight.SkyMiles" />
<div class="form-group">
<label asp-for="FlightName" class="control-label"></label>
<input asp-for="FlightName" value="#ViewBag.Flight.FlightName" class="form-control" readonly />
<span asp-validation-for="FlightName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="FlightNo" class="control-label"></label>
<input asp-for="FlightNo" value="#ViewBag.Flight.FlightNo" class="form-control" readonly />
<span asp-validation-for="FlightNo" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="OriginCity" class="control-label"></label>
<input asp-for="OriginCity" value="#ViewBag.Flight.OriginCity" class="form-control" readonly />
<span asp-validation-for="OriginCity" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="DestinationCity" class="control-label"></label>
<input asp-for="DestinationCity" value="#ViewBag.Flight.DestinationCity" class="form-control" readonly />
<span asp-validation-for="DestinationCity" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Departure" class="control-label"></label>
<input asp-for="Departure" type="datetime" value="#ViewBag.Flight.Departure" class="form-control" readonly />
<span asp-validation-for="Departure" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Adult" class="control-label"></label>
<input asp-for="Adult" type="text" name="seats" value="0" class="form-control" />
<span asp-validation-for="Adult" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Children" class="control-label"></label>
<input asp-for="Children" type="text" name="seats" value="0" class="form-control" />
<span asp-validation-for="Children" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Senior" class="control-label"></label>
<input asp-for="Senior" type="text" name="seats" value="0" class="form-control" />
<span asp-validation-for="Senior" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Travelers" class="control-label"></label>
<input asp-for="Travelers" type="text" name="TotalSeats" class="form-control" />
<span asp-validation-for="Travelers" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="FlightClass" class="control-label"></label>
<select class="form-control" asp-for="FlightClass" name="fclass" asp-items="Html.GetEnumSelectList<Classtype>()">
<option selected="selected" value="">Please select</option>
</select>
<span asp-validation-for="FlightClass" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Price" class="control-label"></label>
<input asp-for="Price" class="form-control" readonly />
<span asp-validation-for="Price" class="text-danger"></span>
</div>
<div class="form-group">
<input type="radio" name="Reservation" value="Buy" /> Buy
<input type="radio" name="Reservation" value="Block" /> Block
<span asp-validation-for="ReservationType" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Submit" class="btn btn-default" />
</div>
</form>
</div>
</div>
<div>
<a asp-action="Index">Back to List</a>
</div>
If anyone can help me I will be very thankful
You can set onchange event to select :
<select onchange="getPrice()" class="form-control" asp-for="FlightClass" name="fclass" asp-items="Html.GetEnumSelectList<Classtype>()">
<option selected="selected" value="">Please select</option>
</select>
So that when select changed , you can make ajax call to server side to get price based on Classtype:
<script>
function getPrice() {
$.ajax
({
url: '/home/getPrice',
type: 'post',
data: { 'id' : $("#FlightClass").val() },
success: function (result) {
$("#Price").val(result.price);
},
error: function () {
alert("Error")
}
});
}
</script>
On controller side , you can query the price by id :
public IActionResult getPrice(string id)
{
//get price by id
var price = "";
return new JsonResult(new { price = price });
}
I have tried authentication before, but it has always been with views in my auth folder. I am now doing something different and cant seem to get it working. So I have this route which displays my homepage
Route::get('/', function () {
return view('index');
});
On my homepage, I have my register and login forms. I wont show everything, but my register form looks like the following
<form class="form-horizontal" role="form" method="POST" action="/">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="form-group">
<div class="col-md-12">
<input type="text" class="form-control" name="first_name" value="{{ old('first_name') }}" placeholder="First Name">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="text" class="form-control" name="last_name" value="{{ old('last_name') }}" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="email" class="form-control" name="email" value="{{ old('email') }}" placeholder="Email">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="password" class="form-control" name="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="password" class="form-control" name="password_confirmation" placeholder="Confirm Password">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<button type="submit" class="btn btn-primary">
Register
</button>
</div>
</div>
</form>
I then tried adding my routes for the registration
Route::get('/register', 'Auth\AuthController#getRegister');
Route::post('/register', 'Auth\AuthController#postRegister');
Because this is using the built in authentication, looking at the Traits, things like getRegister return a view in the auth folder. So in my AuthController, I have added
public function getRegister()
{
return view('/');
}
However, if I try to register, I still get a MethodNotAllowedHttpException.
What would be the stages I need to go through in order to get registration and login onto my homepage?
Thanks
Be careful with the action of your form. You action is "/" but you registered the route Route::post('/register'....
So, your action for the form must be: action="/register"
It is going to make the request in the right rout.
Hope it helps.
PS: Check this course: Learn Laravel. There are explained step-by-step some concepts like this.
Best wishes.