How to select json items base on their parent in vue.js - javascript

I'd like to have two select boxes for users to mention their location data.
When user chooses the province Bar from the first select box, the second selct box should be populated with the cities of the province:
Here is the json data:
Provinces: [
{
"Province": "Foo",
"Cities": [
{
"name": "Fooland"
},
{
"name": "Fooville"
}
} ,
{"Province": "Bar",
"Cities": [
{
"name": "Barland"
},
{
"name": "Barville"
},
{
"name": "Barak"
}
}
]
The province select box works fine:
<select v-model="province">
<option v-for="(p, index) in provinces" :key="index" >{{ p.Province }}</option>
selected: {{province}},
</select>
But I can not get the cities of Bar in the second select box:
<select v-model="city">
<option v-for="(c, index) in provinces.province.Cities" :key="index">{{ c.name }}</option>
</select>
Appreciate your hints on how to fix this?

TLDR: Change the first <select>'s value to be the selected province object (which contains Cities), and use that value to populate the second <select>'s options.
The value of <select> is the value of the selected <option>. if you don't explicitly specify a value for an <option>, the default value is the <option>s inner text (standard behavior). So, you can assign a value that is different from the <option> label, and the value can be an object:
<option :value="myOptionValue">My Option Label</option>
Thus, you can assign the underlying province object model (i.e., p in this case) to the <option>s in the provinces <select>:
<option :value="p" v-for="(p, index) in provinces">
Notice the :value="p", where p is the province object, containing Cities.
After selecting the province, province can be used in the cities <select> to populate its <options> with city names:
<select v-model="city">
<option v-for="(c, index) in province.Cities" :key="index">{{ c.name }}</option>
</select>
const Provinces = [
{
"Province": "Foo",
"Cities": [
{ "name": "Fooland" },
{ "name": "Fooville" }
]
},
{
"Province": "Bar",
"Cities": [
{ "name": "Barland" },
{ "name": "Barville" },
{ "name": "Barak" }
]
}
];
new Vue({
el: '#app',
data() {
return {
province: '',
city: '',
provinces: Provinces
}
},
watch: {
province(newValue) {
// reset city when province changes
this.city = '';
}
}
})
<script src="https://unpkg.com/vue#2.5.17"></script>
<div id="app">
<select v-model="province">
<option value="" disabled>Select province</option>
<option v-for="(p, index) in provinces" :value="p" :key="index">{{ p.Province }}</option>
</select>
<select v-model="city" :disabled="!province">
<option value="" disabled>Select city</option>
<option v-for="(c, index) in province.Cities" :key="index">{{ c.name }}</option>
</select>
</div>

Related

how to pass the key as select option value from v-for when changed (VueJS)

I'm working with Vue 3 and Bootstrap 5.
I have a select with multiple options. Now I'm displaying my option.TEXT and this value will also be passed into my methods when I change something. But I want to pass the key (option.ID) when I change something.
But I also want my v-model to be my option.ID but displaying my option.TEXT.
How can I achieve this without checking it in the methods itself.
SELECT:
<select class="form-select" v-model="value" #change="get_key()">
<option v-for="option in options" :key="option.ID">
{{ option.TEXT }}
</option>
</select>
OPTIONS ARRAY:
[
{ "ID": 1,
"TEXT": "One"
},
{ "ID": 2,
"TEXT": "Two"
},
{ "ID": 3,
"TEXT": "Three"
},
]
The option attribute value should be bound to the option.ID :
<select class="form-select" v-model="value" #change="get_key()">
<option v-for="option in options" :key="option.ID" :value="option.ID">
{{ option.TEXT }}
</option>
</select>

JS/Vue: How to make a select dropdown for US States autocomplete?

I have an array of state objects:
options = [
{text: "California", value:"CA"},
{text: "New York", value: "NY"},
]
Browser autocomplete works when I set the v-model to only value field:
<select>
<option v-model="selectedState" v-for="option in options" :value="option.value">
{{ option.text }}
</option>
</select>
/// selectedState = "NY"
But I need the selectedState v-model to be the object and that is what is stopping autocomplete from filling in the state:
<select>
<option v-model="selectedState" v-for="option in options" :value="option.value">
{{ option.text }}
</option>
</select>
/// selectedState = {"text": "New York", "value": "NY"}
Do I have any options to accomplish this?
You can use computed property to return desire object from selected value
computed: {
selectedState() {
return this.states.find( i => i.value == this.selected );
}
}
Here is Codepen sample

laravel vue select selected option not display value

i'm trying to get the selected option of a user task.
myresult
what my expected result is like this expected
Here is my Html code
<div class="form-group has-float-label">
<input v-model="form.name" type="text" name="name" placeholder="Name" class="form-control" :class="{ 'is-invalid': form.errors.has('name') }">
<has-error :form="form" field="name"></has-error>
</div>
<div class="form-group">
<select name="tasks" v-model="form.tasks" id="tasks" class="form-control" :class="{ 'is-invalid': form.errors.has('tasks') }">
<option disabled value="">Please select one</option>
<option v-for="t in alltask" :key="t"
v-bind:value="t" >{{t.name}}
</option>
</select>
<br />
{{form.tasks}}
</div>
Below is my JS code
<script>
export default {
data() {
return {
editmode: false,
users : {},
alltask : {},
form : new Form({
id: '',
name: '',
tasks: {},
})
}
},
methods: {
loadUsers(){
axios.get("/api/v1/users").then(({ data }) => (
this.alltask = data.alltask,
this.users = data.users
));
},
editModal(user){
this.editmode = true;
this.form.reset();
$('#users').modal('show');
this.form.fill(user);
}
},
created() {
this.loadUsers();
}
}
</script>
this is my json response
{
"users": [
{
"id": 1,
"name": "zxc",
"username": "zxc",
"tasks": [
{
"id": 1,
"name": "cooking"
}
]
},
{
"id": 2,
"name": "foo",
"username": "foo",
"tasks": [
{
"id": 2,
"name": "cleaning"
}
]
}
],
"alltask": [
{
"id": 1,
"name": "cooking"
},
{
"id": 2,
"name": "cleaning"
}
]
}
the value of v-model is the same with option value but i don't get it to get pre selected upon clicking update button, but if i change the option the v-model code that i put below the v-model itself is getting changed following the option list and i can update it to the db
The Problem is that you bind the whole object as value. Even though the object you receive from your call and the object you used to bind the value property to have the same "content" (props & values) they are not the same. So it will not be preselected.
What you actually should do is only bind the id of the task and if you want to display the result find the object that has the id from your alltask list
https://jsfiddle.net/eywraw8t/382079/
<select v-model="form.task">
<option>Please Select</option>
<option :value="t.id" v-for="(t, i) in alltask" :key="i">{{ t.name }}</option>
</select>
<p>
{{ selectedTask }}
</p>
As you only select one task I was wondering why you have "form.tasks" - for my example I changed it to singular.
The computed prop selectedTask could look like this
computed: {
selectedTask() {
return this.alltask.find(task => {
return task.id === this.form.task
})
}
}

Get Id of selected item in datalist

I am having an input element and a datalist for suggestions. I am feeding the an array of object to datalist for suggestions which looks like this
[
{
"id": "9cb98eab-7cd4-47d0-8b30-5512a826a3c0",
"type": "Person",
"name": "Shahrukh Khan"
},
{
"id": "8133586f-ef81-4200-96e8-aff71858ade4",
"type": "Person",
"name": "B. Jayashree"
},
{
"id": "f9d186d9-5fb9-484b-93c7-274d0ca75eb7",
"type": "Person",
"name": "B. Jayashree"
},
{
"id": "b39279f5-e7d4-4013-a785-ce88013d9a76",
"type": "Person",
"name": "E T Mohammed Basheer"
},
{
"id": "8ea077b0-609e-45c6-a839-7735a87557d7",
"type": "Person",
"name": "E. T. Mohammed Basheer"
}
]
I want to know the id of selected option of datalist. I know how to get the value (via value of input element). But I don't want the value of selected item, I want the id.
Here is my input and datalist element
<div>
<Input className="add-tag-name-input" id="name-field" list='languages' onChange={this.onNameValueChanged.bind(this)}/>
<datalist id='languages'>
{this.state.existing_faces && this.state.existing_faces.map((item,i)=>{
return <option value= {item.name} />
})}
</datalist>
</div>
Consider existing_faces as the array I have shown above. How can I get the id of selected option. (There is an id in each object in above array)
Pass the selected item as complete object. Not just the name. Only display the name. In your code you only return the name. But you could return the item or the item.id. The value should be the item. You can still display the name of the item. But passed the object for handling.
Like (Pseudo code):
<option value=item>{item.name}</option>
Or only the id:
<option value={item.id}>{item.name}</option>
Maybe you have to adjust a bit to conform with your code. but the main message is, that you can set a tag value and pass the item as object as option value.
<option value={what-ever-you-want}>{what-the-user-will-see}</option>
Working native HTML example:
<select onchange="console.log(this.value)">
<option value="id-1">Name 1</option>
<option value="id-2">Name 2</option>
<option value="id-3">Name 3</option>
<option value="id-4">Name 4</option>
</select>
Will print the id of the selected item in console of the browser. (Press F12 or Ctrl + Shift + i to show the console)
You could put the id from the array as a value in the JSX.
<option value= {item.name} data-id={item.id} />

Nest ng-repeat in a <select> dropdown

I'd like to create a nested ng-repeat that allows me to include all questions in all chapters of a survey JSON in a dropdown <select> menu. What's the "right way" to do this? I could see creating an array just for this particular use case, but would rather not do that.
<select class="form-control" ng-model="chapter.jumpId">
<span ng-repeat="chap in survey.chapters">
<option ng-repeat="question in chap.questions" value="question.verbose">
{{ question.id }}
</option>
</span>
</select>
Html:
<select ng-repeat="chap in survey.chapters">
<option ng-repeat="question in chap.questions" value="question.verbose">
{{ question.id }}
</option>
</select>
-----
<select>
<option ng-repeat="sOption in sOptions" value="sOption.verbose">
{{ sOption.id }}
</option>
</select>
Js:
$scope.survey = {
"chapters" : [
{
"questions" : [
{
"verbose" : "que1_verbose1",
"id": "que1_1"
},
{
"verbose" : "que1_verbose2",
"id": "que1_2"
}
]
},
{
"questions" : [
{
"verbose" : "que2_verbose1",
"id": "que2_1"
},
{
"verbose" : "que2_verbose2",
"id": "que2_2"
}
]
}
]
};
$scope.sOptions = [];
angular.forEach($scope.survey.chapters, function(chapter) {
angular.forEach(chapter.questions, function(question) {
$scope.sOptions.push(question);
});
});
http://jsfiddle.net/9bc06fdv/27/

Categories

Resources