import VueSelect from 'vue-next-select';
const app = createApp({})
app.component('vue-select', VueSelect)
<vue-select v-model="tankno" :options="tanks1" searchable #input="form.tankno = $event.target.value" close-on-select label-by="tankno" class="text-left h-10 sinput" search-placeholder=" Search Tank No" placeholder="Select Tank No" track-by="tankno"></vue-select>
When I submit form, vue-select not selecting value but only get on search input
<vue-select
v-model="tankno"
:options="tanks1"
searchable
#input="form.tankno = $event.target.value"
close-on-select label-by="tankno"
class="text-left h-10 sinput"
search-placeholder=" Search Tank No"
placeholder="Select Tank No"
track-by="tankno"
#selected="onSelected"
ref="selectRef"
>
</vue-select>
const onSelected = (e) => {
selectRef.value.input.input.value = e;
}
In my case using Vue js 3, I create template refs (selectRef), then pass the selected value to the search input field.
Related
I make a dropdown for a form, I will show the code below. However, when I click the submit button, there is an error saying,
SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'brand' cannot be null (SQL: insert into supplier_details.
The data that I chose from the dropdown is actually null. Actually, I'm new to Laravel.
I don't want to make a dropdown list from a database, I just want to display the option and the option will be inserted into the database when the user clicks the submit button after filling in the form.
<div class="form-group row">
<label style="font-size: 16px;" for="id" class = "col-sm-2">Item Brand </label>
<label for="supp_name" class = "col-sm-1">:</label>
<div class="col-sm-7">
<select name="brand" class="form-control js-example-basic-single" required>
<option >Please select item brand</option>
<option value="machine1"> Item Brand 1 </option>
<option value="machine1"> Item Brand 2 </option>
<option value="machine1"> Tem Brand 3 </option>
</select>
</div>
</div>
Controller
public function createsupplierdetails()
{
return view ('frontend.praiBarcode.getweight');
}
public function supplierdetails(Request $r)
{
$details = new SupplierDetail;
$getuserPO = Supplier::where('PO',$r->PO)->first();
$details->brand = $getuserPO->brand;
$details->container_no = $getuserPO->container_no;
$details->date_received = $getuserPO->date_received;
$details->gross_weight = $getuserPO->gross_weight;
$details->tare_weight = $getuserPO->tare_weight;
$details->net_weight = $getuserPO->net_weight;
$details->save();
return view ('frontend.praiBarcode.viewsupplierdetails')
->with('details',$details);
}
This to check to verify if it is working:
Make sure you are submitting the correct form.
Try doing dd on your controller dd($request->all())
If data is reaching the controller and not inserted into the database, check on your model, if it is added to fillable or if there is only id in the guarded array. You can know about more here in https://laravel.com/docs/9.x/eloquent#mass-assignment
Error should be fixed, as soon as you fix it.
Controller
use Validator;
public function store(Request $request)
{
$validator = Validator::make($request->all(), [
'brand' => 'required',
]);
if ($validator->fails()) {
return redirect()->back()->with('error', $validator->errors()->first());
}
$details = new SupplierDetail();
$details->brand = $request->brand;
$details->container_no = $request->container_no;
$details->date_received = $request->date_received;
$details->gross_weight = $request->gross_weight;
$details->tare_weight = $request->tare_weight;
$details->net_weight = $request->net_weight;
$details->save();
if ($trending) {
return redirect(route('details.index'))->with('success', 'Field added successfully');
} else {
return redirect()->back()->with('error', 'Field has been not added successfully');
}
}
There is a dropdownlist, if user choose a option, some q-tab-panel will show/hide to make a response. But how can I dynamically set the q-tab-panel show/hide by code? Hope someone can make suggestions here. Thanks
<q-select filled
v-model="datasource.datasourcetype"
:options="datasource.options"
option-value="value"
option-label="label"
emit-value
map-options
:label="ui.datasourcetype" />
<q-tabs v-model="dataEntryTab"
dense
class="bg-grey-2 text-teal"
align="left">
<q-tab name="tabCustomized" v-if="dataentry.showOptionsTab" icon="mail" :label="ui.datasourceOptions" />
<q-tab name="tabEntryInfo" v-if="dataentry.showDataEntryTab" icon="alarm" :label="ui.datasourceEntryInfo" />
<q-tab name="tabCascadeField" v-if="dataentry.showCascadeFieldTab" icon="movie" :label="ui.datasourceCascadeField" />
</q-tabs>
<q-tab-panels v-model="dataEntryTab" animated>
<q-tab-panel name="tabCustomized">
<q-input :label="ui.dataentryOptions"
v-model="dataentry.options"
filled
type="textarea" />
</q-tab-panel>
<q-tab-panel name="tabEntryInfo">
</q-tab-panel>
<q-tab-panel name="tabCascadeField">
</q-tab-panel>
</q-tab-panels>
For example, there are 3 q-tabs, if the user only want to let 2 of them to show, and 1 of them to hide after a dropdown option selected.
There is an event #input about q-select, and we can trigger a model variable for every q-tab. It works for me
onDataSourceTypeChanged (event) {
var dstype = this.datasource.datasourcetype
if (dstype === 'datasourcetype.Customized') {
this.dataentry.showOptionsTab = true
this.dataentry.showDataEntryTab = false
this.dataentry.showCasacdeFieldTab = false
} else {
this.dataentry.showOptionsTab = false
this.dataentry.showDataEntryTab = true
this.dataentry.showCasacdeFieldTab = true
}
}
Like to know if a button was clicked or how integrate the actionButton of shiny need to know if a option was selected then used to run something
New using shiny, just want to do a easy dashboard
library(shiny)
library(bs4Dash)
ui <-
bs4DashPage(
enable_preloader = TRUE,
navbar = bs4DashNavbar(border = FALSE,
rightUi = HTML('<div class="dropdown">
<button class = "btn btn-outline-primary dropdown-toggle"
type = "button"
id = "dropdownMenuButton"
data-toggle ="dropdown"
aria-haspopup="true"
aria-expanded="false">
Período de Consulta
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<button id = "yr_anterior" class="dropdown-item" type="button">Año Pasado</button>
<button id = "mes_anterior" class="dropdown-item" type="button">Mes Pasado</button>
<button id = "sem_anterior" class="dropdown-item" type="button">Ultima Semana</button>
</div>
</div>')),
sidebar = bs4DashSidebar(title = "Opciones",skin = "light",status = "info",brandColor = "primary"),
footer = bs4DashFooter(),
title = "test",
body = bs4DashBody(
textOutput("valor")
)
)
server <- function(input, output,session) {
observeEvent(input$yr_anterior,{
output$valor <- renderText("hola")})
}
# Run the application
shinyApp(ui = ui, server = server)
I think the function pickerInput from shinyWidgets package can generate what you are looking for. You can use it like this with the labels in your example, and input$InputMenu gives the selected option on your server function
pickerInput(inputId = 'InputMenu',
choices = c("Período de Consulta","Año Pasado","Mes Pasado","Ultima Semana"),
options = list(style = "btn-outline-primary dropdown-toggle") )
or adding a label instead of that first choice label="Período de Consulta:"
I have an input where passing the value of my star-rating module. When i use my function with v-model, the value of my input change (for example '4'), but the value it's not read with my function #input.
My code in template:
<div v-if="question.element_type=='notation'">
<star-rating
inactive-color="#4c514c"
v-bind:star-size="30"
v-model="selectedNote"
#rating-selected ="next"
:rounded-corners="true"
:show-rating="false">
</star-rating>
<textarea
v-model="selectedNote"
class="myTextarea"
maxlength="1"
:name="'q'+question.id"
#input="next">
</textarea>
</div>
my two functions :
setRating: function(rating) {
this.selectedNote = rating
},
next(evt){
this.selectedNote = evt.target.value
if(evt.target.value.length)
this.affichageSuivant = true
else
this.affichageSuivant = false
},
and my state of seletedNote
selectedNote: 0,
I am using a parent component travelerInput that creates travelerListForm using model in my component and iterate it extracting travelerForm which is then passed to the nested child components using #Input:
for (let i = 1; i <= numberOfTravelers; i++) {
const tId = `${ptc}_0${i}`;
const Id = `${TravelerInput.pIndex++}`;
const traveler = new Traveler({passengerTypeCode: ptc, id: Id, tid: tId, names: [new Identity({
firstName: "",
middleName: "",
lastName: "",
title: "",
nameType: "native",
isDisplayed: false
})],
dateOfBirth: undefined ,
gender: "unknown",
accompanyingTravelerId: "",
accompanyingTravelerTid: ""
});
travelerList.push(traveler);
}
HTML
<div class="alpi-section col-xs-12 col-sm-12 col-md-12 col-lg-12"
*ngFor="let travelerForm of travelerListForm.controls; let tIndex = index;">
<o3r-simple-traveler-input
[config]="config.simpleTravelerInput"
[travelerForm]="travelerForm"
[index]="tIndex">
</o3r-simple-traveler-input>
Now we have a drop down in parent component with a list of travelers. The selected passenger in the drop down will have its information prepopulated in the form fields which are nested child components. I am using travelerForm which is iterated over travelerListForm in child components as #Input. On change of drop down I am binding the value of the passenger information to the corresponding index of travelerListForm which is also getting updated but on UI there is no update.
pickSelectedADTPassenger(adult:any, index: number){
this.selectedADTId= this.ADTTravelerId[adult];
this.travelerListForm.controls[index].value.names[0].firstName = this.selectedADTId.IDENTITY_INFORMATION.FIRST_NAME; //ASSISGNMENT
}
Have also tried using ngModel in the child component input field where I want the value to be prepopulated but it did not work:
<input type="text"
[(ngModel)]="travelerForm.controls.firstName.value"
class="form-control"
placeholder="FIRST NAME"
maxlength="52"
formControlName="firstName">
</div>
Please suggest.