Vuejs Option. Get an ID from a selected item - javascript

I'm actually using VueJS and encountered a little problem
I have a selector, that needs to memorize an ID to be sent in an axios request later. In the "selected" var, we need to keep only the name of the "type" for user friendly reasons. So, I need to get the ID selected by the user without displaying it. Actually, the code looks like this.
<select v-model="selected">
<label for="lg_type" class="sr-only">Type de personnage</label>
<option disabled value="">Choisir un type</option>
<option v-for="onetype in playertype" class="form-control" id="lg_type" name="lg_type" v-bind:key="onetype.idType">
{{onetype.idType}}-{{ onetype.name }}
</option>
</select>
Selected is the actual name of the selected type. Since it's vue, when I click on another Type from my selector, it changes it automatically
onetype contains two things : A name, and an idType
playertype contains an array of all types
As we can see in the code, i display things like this "idType - name", but I only want to display "name" (so just erase onetype.idType), but I need to get the id to send it elswhere (I can't use onetype.idType to get the id to my axios method)
I don't know if it's clear enough, but I need to send the onetype.idType to an axios method, but I can't use it this way.
Thanks you in advance, this is driving me crazy and I feel I've missed something obvious ><

Use value attribute and you will get it in v-model instead of displayed option:
<select v-model="selected">
<label for="lg_type" class="sr-only">Type de personnage</label>
<option disabled value="">Choisir un type</option>
<option
v-for="onetype in playertype"
:value="onetype.idType"
class="form-control"
id="lg_type"
name="lg_type"
v-bind:key="onetype.idType"
>{{ onetype.idType }}-{{ onetype.name }}</option>
</select>

Related

add data attributes to <options> rendered by django form library

I have django choice field
The HTML rendered by django looks like this:
<select id="id_action" name="action">
<option value="" selected="selected">---</option>
<option value="query-action-take">Take</option>
<option value="query-action-forward">Forward</option>
</select>
Before executing the action which was choosen by the user, a confirmation should happen. But not all actions need a confirmation. In this example "delete" needs, but "take" does not need a confirmation.
I would like to add html data attributes the options
The result should look like this:
<select id="id_action" name="action">
<option value="" selected="selected">---</option>
<option value="query-action-take" data-need-confirm="False">Take</option>
<option value="query-action-delete" data-need-confirm="True">Delete</option>
</select>
Up to now I found no way to inject the data "need confirmation" into individual choices.
... or am I on the wrong track here?
This question is only about "how to get the data into the html". The evaluation of the data (confirmation popup) is not part of this question.
You need to create a custom Widget for this. If you check out the Django docs for the Select widget (django.forms.Select), you will find a render_option() method. So best to subclass the default Select class and override this method.
The template renderer definitely contains the functionality to add the data, the question is where you get it from.
<select id="id_action" name="action">
<option value="" selected="selected">---</option>
{% for action in actions %}
<option value="{{action.value}}" data-need-confirm="{{action.isConfirm}}">{{action.name}}</option>
{% endfor %}
</select>
Would this be something you want to add to a model? Probably not. But you can add it as a hard coded dictionary too.

How to display country, state and city dependency in Angularjs?

I want to display the country in response from dropdown. I tried a lot and I could not find any solution.
I am using a JavaScript link "http://iamrohit.in/lab/js/location.js".
I am getting the selected country name from JSON response but can't compare it with the dropdown list and display the response value.
My HTML :
<select name="country" class="form-control1 drop countries" required ng-model="model.country" placeholder="select" id="countryId sel1"><option value="" disabled selected>Select</option>
My controller :
$scope.model.country = "India"; //from json response
I saw this "<option value="? string:India ?"></option>" when I inspect the country field in the profile page.
If you want to view what option is selected, the you will indeed put your ng-model in your tag.
But if I understand correctly, you want to create different options according to your JSON data.
I suggest using:
<select>
<div ng-repeat= "x in model.country">
<option> {{x.Name}} </option> //I suggest dividing your JSON information
</div>
</select>
I hope this answers your questions. Let me know if you need more precise information!

Vue JS not rendering the value attribute of Option elements

I've got a weird thing going on using a Select element with Vue JS:
The following code:
<select id="nameDd" v-model="name" >
<option v-for="n in names" v-bind:value="n.key" " >
{{ n.value }}
</option>
</select>
renders the Select without the Value attribute in the Options elements:
<select id="nameDd">
<option>Carol</option>
<option>Carl</option>
<option>Clara</option>
</select>
This of course means that the correct Option cannot be selected when required. In my scenario an entry in a table is clicked and the edit form is shown (using v-show) but the Select remains empty instead of selecting the right value. In the background, the v-model 'name' does have the right value.
Confusingly, as soon as I select one Option, it adds the Value attribute:
<select id="nameDd">
<option value="1">Carol</option>
<option value="2">Carl</option>
<option value="3">Clara</option>
</select>
Now the (even more) confusing part. This actually shows the Value attribute in the Option elements:
<select id="nameDd" v-model="name" >
<option v-for="n in names" v-bind:value="n.key+'X'" " >
{{ n.value }}
</option>
</select>
...but of course with an appended X, which again avoids the right Option being selected.
- Is this some VueJs feature that I don't get? What am I doing wrong?
Why is there a second double-quote (") after v-bind:value in the option tag?
<option v-for="n in names" v-bind:value="n.key" " >
I can't find any other issue with your code. I practically wrote the same code again and it worked. Here is a working jsFiddle for reference: https://jsfiddle.net/mani04/3x0z3vzk/
As you can see, I really don't have much code, just the 3 lines:
<select v-model="selectedPerson">
<option v-for="person in people" :value="person.key">{{person.name}}</option>
</select>
I don't know if the second double quote was causing the issue. Vue expects perfect markup so that it can do its model-view bindings properly. When I tried to put a stray double-quote like yours, I got a console error, not the missing option value that you noticed.
I hope this example helps to fix your code!

Meteor - get the value from a custom attribute

I got a problem, I making a litte game where you come through stages, and in every stage you have to make a choose.
I want to save some of the information that the user pick, in "hola" and "chao", and later in the helpers save that info in sessions.
But I dont know how to get the value of "hola"---> {{fidelidadSegmento}}
<select class="form-control" id="select0" name="categ">
<option value = "0" selected="selected"> Stay </option>
{{#each op in opciones}}
<option value="{{op.costo}}" hola="{{fidelidadSegmento}}" chao="{{op.nombre}}"> {{fidelidadSegmento}} con {{op.nombre}} , eficiencia: {{op.eficiencia}}</option>costo
{{/each}}
</select>
what I see in the browser is :
<select id="select0" class="form-control" name="categ">
<option selected="selected" value="0"> Stay </option>
<option value="3" hola="Awereness" chao="tv"> Awereness con tv , eficiencia: 0.8</option>
<option value="2" hola="Awereness" chao="magazine"> Awereness con magazine , eficiencia: 0.7</option>
</select>
And I want to get the value of the attribute "hola" and "chao"
console.log($(this).attr('hola')); get me undefined
and $(event.target).find("hola") get me [object Object]
If you are trying to use jQuery then try accessing the selected option using:
$("select option:selected")
But remember the default option does not have the attributes 'hola' or 'chao'. You will have to test for the attribute to be undefined or add the 'hola' and 'chao' attributes to the default option.
// This will return undefined for the default option
$("select option:selected").attr("hola");
This post might be helpful to you also.

How to properly handle empty, missed, default form values?

I have html form, where it is possible that:
(1) user input's nothing, for ex., in case with text input field;
<input type="text" class="input-xlarge" id="first-name" name="first-name">
(2) user leaves default empty value, like with select:
<select id="prof-area" class="input-xlarge">
<option value="0" selected="selected"></option>
(3) user leaves empty value, like with multiple options select:
<select multiple="multiple" id="reason" name="reason" class="input-xlarge">
<option value="001">reason001</option>
<option value="002">reason002</option>
In each case on GAE side I should understand that this is empty value.
first_name = None
if self.request.get('first-name'):
first_name = self.request.get('first-name')
works well with case (1).
prof_area = None
if self.request.get('prof-area') and self.request.get('prof-area') !='0':
prof_area = self.request.get('prof-area')
should work for case (2), but doesn't look well. Is there any better way to handle the same?
You don't need all this work unless you have added the required=True argument. If you put an entity missing some property, GAE create or update the entity with the property missed empty. See this docs
You do not have a name parameter for your prof-area field which is prob why you are't seeing data at the server.
Anyways, try this ...
At the client, just put an empty string in your empty select option, like this:
<select id="prof-area" name="prof-area" class="input-xlarge">
<option value="" selected="selected"> -- select -- </option>
</select
then at the server, first grab all the values into local variables - makes it easier for others to see whats going on ...
first_name = self.request.get('first_name')
prof_area = self.request.get('prof-area')
reason = self.request.get('reason')
you can then check each param in turn ...
if first_name:
# do something with first_name
if prof_area:
# do something with prof_area
if reason:
# do something with reason

Categories

Resources