I'm using vue2.
I want to get select option object in v-for
HTML:
<select
class="custom-select"
#change="onPlanSelected($event)"
v-model="selectedPlan.objectId">
<option
v-for="plan in plans"
:key="plan.objectId"
:value="plan.objectId">
{{ plan.title }}
</option>
</select>
JS:
data () {
return {
selectedPlan: {}
}
}
onPlanSelected (event) {
this.selectedPlan = this.plans.find(plan => {
return plan.objectId === event.target.value
})
}
when I change the select option, I get the error:
As you can see selectedPlan is data not vuex.
Btw, how to get an object from a select v-for option
Thanks
First of all I don't see the need of using #change in your case. v-model should be sufficient for handling the selected option.
Here is a sample fiddle: https://jsfiddle.net/z11fe07p/567/
As long as you have the whole object as :value and v-model as well you always have the selected option along with it's id.
Related
I have a Posts model which has many Comments and every comment has one User model.
If I run
#foreach( $post->comments as $comment )
<div>{{ $comment->text }} <br>{ $comment->user->name }}</div>
#endforeach
it generates one query to user for every loop in comments foreach. How to write this code so the Laravel makes only one query for all users?
Controller code looks like
public function detail(Post $post)
{
return view('home.detail')->with([
'post' => $post->with('comments', 'comments.user')->get()->first()
]);
}
Thanks a lot.
I populated a select input field with a collection in aldeed:autoform.
Field Declaration
{{> afFormGroup name="patientID" type="select" options=patientIDs}}
Helper
patientIDs:function () {
return Meteor.users.find({}).map(function (user) {
return {label: user.profile.firstName, value: user._id};
});
}
But it turned out to be the drop down too large to select an option. Therefore I need to implement a functionality similar to HTML datalist in the autoform. How to implement this in meteor aldeed:autoform?
There is a select2 add-on for autoform, which might help get you what you want. See here.
I saw this question: Generate drop-down list input with values from DB table, but the answer was not clear.
So, how can I generate form using Illuminate/HTML and database values in Laravel?
It's this simple.
First, you have to pass an array with the select values from the controller:
/**
* Show the form for creating a new resource.
*
* #return Response
*/
public function create()
{
$categories = Category::lists('name','id');
return view('myformview', compact('categories'));
}
Where "Category" is the model I want to retrieve data from. Note I am passing two values to the array. The first one is the text will be displayed in the select, and the second one is the value of the option.
Let's see now the form:
{!! Form::label('category_id', 'Category:') !!}<br>
{!! Form::select(
'category_id',
$categories
)
!!}
The first parameter of Form::select is the name of the select. The second one is the array with the options values.
In my particular case I get back this HTML code:
<select id="category_id" name="category_id">
<option value="5">First category</option>
<option value="6">Second category</option>
<option value="7">Third category</option>
</select>
I hope this will be helpful for you. I tested it in Laravel 5
I'm trying to create a laravel form that have an input select generating from array of strings coming from controller.
How can I set values of options manually?
In controller :
public function create()
{
$eventTypes = EventType::all()->lists('title');
return View::make('events.create')->with(compact('eventTypes'));
}
In view (blade) :
{{ Form::label('eventType', 'Type') }}
{{ Form::select('eventType', $eventTypes, null, array('class'=> 'form-control')) }}
And select created as :
<select class="form-control" id="eventType" name="eventType">
<option value="0">Sport Competition</option>
<option value="1">Movie</option>
<option value="2">Concert</option>
</select>
I just want to set values manually.
The value in the options is just the key of the array. The second parameter to the lists() method will let you choose a field to use as the key:
// use the 'id' field values for the array keys
$eventTypes = EventType::lists('title', 'id');
If you want to do something more custom than that, you'll need to manually build your array with the key/value pairs you want.
Edit
As mentioned by #lukasgeiter in the comments, there is no need to call all() first.
EventType::all()->lists() will first generate a Collection of all the EventType objects. It will then call lists() on the Collection object, meaning it will loop through that Collection to build an array with your requested fields.
EventType::lists() will call lists() on the query builder object, which will just select the two requested fields and return those as the array. It will not build any EventType objects (unless you select a field built by a Model accessor).
I feel like I'm missing something very basic, but I can't get a dropdown menu to work as I expect using Knockout.js.
I have a set of objects I want to present in a menu, and I need to find the selected option and post that to the server. I can get the menu to render, but can't seem to get the value of the selected item. My view model looks like this:
function ProjectFilterItem( name, id ) {
this.Name = name;
this.Id = id;
}
function FilterViewModel() {
this.projectFilters = ko.observableArray([
new ProjectFilterItem( "foo", "1" ),
new ProjectFilterItem( "bar", "2" ),
new ProjectFilterItem( "baz", "3" )
]);
this.selectedProject = ko.observable();
}
ko.applyBindings( new FilterViewModel() );
and my view markup looks like this:
<select
id = "projectMenu"
name = "projectMenu"
data-bind = "
options: projectFilters,
optionsText: 'Name', /* I have to enquote the value or I get a JS error */
optionsValue: 'Id', /* If I put 'selectedProject here, nothing is echoed in the span below */
optionsCaption: '-- Select Project --'
"
></select>
<b>Selected Project:</b> <span data-bind="text: selectedProject"></span>
How do get the selected menu item to display in the span, and to post to the server? (I assume the observable I render in the span is the same one I'd post.) Do I need another property in the ProjectFilterItem, like this.selected = ko.observable(false); ? If so, how would I declare it as the target of the value?
You just need use with the value binding to bind the selected value:
From the options documentation:
Note: For a multi-select list, to set which of the options are
selected, or to read which of the options are selected, use the
selectedOptions binding. For a single-select list, you can also read
and write the selected option using the value binding.
In your example:
<select
id = "projectMenu"
name = "projectMenu"
data-bind = "
value: selectedProject,
options: projectFilters,
optionsText: 'Name',
optionsValue: 'Id',
optionsCaption: '-- Select Project --'
"
></select>
See Demo.