How can I set selected option based on the boolean value.
country.show can be 0 or 1, and based on that, I want to have preselected option. This is the code snippet:
<td>
<select name="show" class="form-control country-show">
<option value="0" :selected="country.show == 0">No</option>
<option value="1" :selected="country.show == 1">Yes</option>
</select>
</td>
Typically this is done with v-model. You could also use :value="country.show" assuming you just want to initialize it and use v-model for some other bind.
console.clear()
new Vue({
el: "#app",
data: {
country: {
show: 0
}
}
})
<script src="https://unpkg.com/vue#2.2.6/dist/vue.js"></script>
<div id="app">
<div>
<h2>Using v-model</h2>
<select name="show" v-model="country.show">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
<div>
<h2>Using :value</h2>
<select name="show" class="form-control country-show" :value="country.show">
<option value="0">No</option>
<option value="1">Yes</option>
</select
</div>
<div>
<h2>Using code from your question</h2>
<select name="show" class="form-control country-show">
<option value="0" :selected="country.show == 0">No</option>
<option value="1" :selected="country.show == 1">Yes</option>
</select
</div>
</div>
FWIW, what you have works to pre-select a value, it's just not how you would normally do it in Vue.
The value property of option element is string in HTML. You can try this get selected option based on a boolean value
<td>
<select name="show" class="form-control country-show" v-model="country.show">
<option v-bind:value="false">No</option>
<option v-bind:value="true">Yes</option>
</select>
</td>
Related
I am using Laravel with alpinejs version 3.2.4. I would like to show/hide some input elements and show them based on what the user selects. This is my code:
<form x-data="{payFor: ''}">
<select x-model="payFor" name="payFor">
<option value="service">Service</option>
<option value="product">Product</option>
</select>
<div x-show="payFor == 'service'">
<select name="serviceId">
#foreach($services as $service)
<option value="{{ $service->id }}">{{ $service->service_name }}</option>
#endforeach
</select>
</div>
<div x-show="payFor == 'product'">
<select name="productId">
#foreach($products as $product)
<option value="{{ $product->id }}">{{ $product->product_name }}</option>
#endforeach
</select>
</div>
</form>
This doesn't seem to be working on my forms and I cannot figure out why. When the form loads, all the controls are shown and on selection, none hides. Even when I try to set default x-data="{payFor: 'service'}" it still doesn't work either. Any solution to this?
Not sure if this has any relations so laravel, but this is how you do it in plain html (this would also work in your context):
document.getElementById('payFor').addEventListener("change", function (e) {
if (e.target.value === 'product') {
document.getElementById('services').style.display = 'none';
document.getElementById('products').style.display = 'block';
} else {
document.getElementById('products').style.display = 'none';
document.getElementById('services').style.display = 'block'
}
});
<!DOCTYPE html>
<html>
<body>
<form>
<label for="payFor">Select what to pay for: </label>
<select name="payFor" id="payFor">
<option disabled selected value>-</option>
<option value="service">Service</option>
<option value="product">Product</option>
</select>
<div style="display: none;" id="services">
<select name="serviceId">
<option disabled selected value>-</option>
<option value="service1">service 1</option>
<option value="service2">service 2</option>
</select>
</div>
<div style="display: none;" id="products">
<select name="productId">
<option disabled selected value>-</option>
<option value="product1">product 1</option>
<option value="product2">product 2</option>
</select>
</div>
</form>
</body>
</html>
Just add the selectors to your div, and add this script to get the job done.
I figured another way out. Since I am using livewire, I had to use #if... #else...#endif statement in the HTML class attribute to toggle the divs using show or hide tailwind classes.
I have two independent dropdowns in a form. Below is the code:
<form v-on:submit.prevent="submitForm">
<div>
<label for="tenant">Tenant</label>
<select
class="form-select"
name=""
id="tenant_id"
v-model="formValues.tenant_id" >
<option disabled value="">Select Tenant</option>
<option value="" v-for="tenant in tenants" :key="tenant.id">{{tenant.tenant_name}}</option>
</select>
</div>
<div>
<label for="chart_type">Type</label>
<select
class="form-select"
name=""
id="chartOf"
v-model="formValues.chartOf"
>
<option disabled value="">Type</option>
<option value="diagnosis">Diagnosis</option>
<option value="symptom">Symptom</option>
<option value="comorbidity">Comorbidity</option>
</select>
</div>
<div>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
Method for submitting form :
submitForm(){
console.log('Form values: ', this.formValues)
}
When I select Tenant(1st dropdown), it's fine But when I select 2nd dropdown, the first dropdown resets to the default position(Select Tenant).
I am not able to understand what's happening, as I started learning vue few days ago.
The option value should be bound to field like id :
<option :value="tenant.id" v-for="tenant in tenants" :key="tenant.id">{{tenant.tenant_name}}</option>
Vuelidate is not able to validate a Select/Dropdown element?
HTML
<div :class="{ 'form-group--error': $v.subscription.$error }">
<label for="">Year Subscription</label>
<select name="subscription" #change="subscriptionChange()" v-model="$v.subscription.$model" class="custom-select" id="inputGroupSelect04">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
JS Code
subscription : {required }
I have a problem binding a select on Server side blazor. The passed on the onchange event is the options text(label).
Here is my select element:
<div class="form-group row">
<div class="form-group col-md-6">
<label>Role</label>
<select class="form-control form-control form-control-sm"
placeholder="Role"
disabled="#IsReadOnly"
#onchange="(e) => RoleChanged(e)">
<option value="">Select Role...</option>
<option value="Member">Member</option>
<option value="Admin">Admin</option>
<option value="Pioneer">Pioneer</option>
<option value="Retailer">Retailer</option>
</select>
<ValidationMessage For="#(() => Model.Role)" class="row" />
</div>
Upon debugging the RoleChanged method
It gets the option text as Value when the event is triggered.
Also the client validation is not firing
Refactor you code to use form components :
<div class="form-group row">
<div class="form-group col-md-6">
<label>Role</label>
<InputSelect class="form-control form-control form-control-sm"
placeholder="Role"
disabled="#IsReadOnly" Value="Model.Role" ValueChanged="RoleChanged" ValueExpression="#(() => Model.Role)">
<option value="">Select Role...</option>
<option value="Member">Member</option>
<option value="Admin">Admin</option>
<option value="Pioneer">Pioneer</option>
<option value="Retailer">Retailer</option>
</InputSelect >
<ValidationMessage For="#(() => Model.Role)" class="row" />
</div>
// an async method must return Task or ValueTask
private async Task RoleChanged(string value)
{
// your logic
}
I need to figure out how to order by date ascending and how I can add search to my list.
Here is example structure: https://jsfiddle.net/franso/jr7dsef3/
<div id="app">
<input type="text" v-model="search" placeholder="Search">
<select v-model="title">
<option value="Show all">Show all</option>
<option value="Title 1">Title 1</option>
<option value="Title 2">title 2</option>
</select>
<select v-model="name">
<option value="Show all">Show all</option>
<option value="Name 1">Name 1</option>
<option value="Name 2">Name 2</option>
</select>
<div class="list" v-for="post in filteredAndOrdered">
<div class="list__wrapper">
<div class="list__item">{{ post.title }}</div>
<div class="list__item">{{ post.name }}</div>
<div class="list__item">{{ post.FinalApplicationDate }}</div>
</div>
</div>
</div>
You can use array.sort() for sorting date and use #change function on input tag for using search
Sort Javascript Object Array By Date