I am very new to Vue,
i tried to simulate this in bellow link.
https://jsfiddle.net/kyncgL7w/9/
I have this simple html select tag. Where I am showing values from object(banks).
now I have used v-on:change so when ever user will select any values, i want to get values of
> ledger_object_type_sub_id and ledger_object_type_sub_name
Now, I can get the ledger_object_type_sub_id from v-bind or v-model,
but how do i pass the value of ledger_object_type_sub_name into a function.
i.e get_existing_bank_id(bank_name_id, **bank_name**) so that i can use that value can be use later on?
Thanks for your help.
Just bind object value on your option tag
<option v-bind:value="bank">..</option>
What you can do is to find in your banks array the ledger_object_type_sub_id who is equal to your bank_name_id.
get_existing_bank_id: function(bank_name_id) {
console.log(this.banks.find(bank => bank.ledger_object_type_sub_id === bank_name_id).ledger_object_type_sub_name);
}
Here is your fiddle update with the working solution : https://jsfiddle.net/sjh038w9/
Related
I am trying make a conditional select-box. There are 2 select-boxes. When select-box1 1's value changes then the 2nd select-box value automatically need to get selected to a value and it will also be disabled.
So far , i am able to do the conditional select where select-box 1's option changes value in select-box2 but it shows error in vue.
Error is--
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"
Also , i can disable the 2nd select-box but when i use dynamic disabled the value doesn't get set.
Question in brief:
1st selectbox has value-- a)one time payment & b)subscription and
2nd selectbox has value--a)held & b) Immediate.
Now, if 1st selectbox's subscription is selected then in the 2nd selectbox, it should be set to immediate and also get disabled.
Below is the Code Sandbox link--
https://codesandbox.io/s/conditional-select-forked-h61po?file=/src/components/HelloWorld.vue
If there is a better way of achieving this, then feel free to share ...
You don't need a ref, you can change the value of selected2 directly because it's not a prop, but a data field. Remove the reference in your component, like so:
<b-form-select
v-model="selected2"
:options="options2"
:disabled="isDisabled"
></b-form-select>
and change your onChange method to this (you don't need the else block as well):
onChange(event) {
if (event === "subscription") {
this.selected2 = "Immediate";
this.isDisabled = true;
}
},
Try it. I've tested it and it works.
I think the best way is to watch the 2-way-binding (selected) with a watcher.
See: https://v3.vuejs.org/guide/reactivity-computed-watchers.html#watch
And if the value changes you can check if the new value is 'subscription'.
And to select the wante option in the 2nd select you just have to asign the wanted value to the 2-way-binding (selected2). And for disabling set isDisabled to true.
I need to do a shortif in a v-model, but eslint gives the folowing problem:
[vue/valid-v-model] 'v-model' directives require the attribute value
which is valid as LHS.eslint-plugin-vue
so the code works. but its not the way it needs to work.
this is the code i have now
<v-text-field
v-show="field.type == 'String'"
v-model="_isMultiple(content_data[tabindex]) && subitem != null ? content_data[tabindex][subitem][field.name]
: content_data[tabindex][field.name]"
:label="field.name"
:counter="field.counter"
max-width="100px"
/>
So this code needs a little explanation to it.
I try to build this as an dynamic module. If I get an array back from my json response it needs to v-model the subitem. If I get an object back from the response it just needs to v-model that object.
The data (content_data[tabindex]) + field do i get from a v-for loop and other loops in my vue html
so I think its not an option to do a computed prop because
I can't get in the right data.
_isMultiple function code:
_isMultiple(content_data) {
return Array.isArray(content_data)
}
any solution for this?
Maybe you should not use v-model, but build it on your own with value binding and event listening.
v-model is only a shorthand: https://v2.vuejs.org/v2/guide/forms.html.
By implementing it on your own you can use a method to set the values and a computed property to get it.
Im using Vuetify in my project. When I insert some data by v-select its working fine. Also when Im edit that data that also works. The only problem is I cant see the selected element when Im click on Edit.
Here is my code
<v-select
prepend-icon="star_rate"
:items="ratings"
v-model="customer.rating"
label="Rating"
item-text="text"
item-value="customer.rating"
single-line
></v-select>
Note: If I use {{customer.rating}} it gives an output like this
{ "id": 1, "text": "Bad" }
and If I select a different element its perfectly change on database. So everything is fine. The only requirement is I want show this value Bad as a selected element when I click on Edit.
Here is the complete code of my project file https://github.com/Shakilzaman87/pukucrm/blob/master/src/components/customers/EditCustomer.vue
Thanks in advance
It's and old question but Let me post my answer to help others as well, after alot of search I have come to this point, and I want to share it with others as well.
//This will load all your ratings in dropdown
<v-select
v-model="customer.ratings"
:items="ratings"
item-text="text"
item-value="id"
label="Rating"
dense>
</v-select>
Now Edit Part
Lets say you want to edit a record, so you will probably pass the record id in edit method of your vuejs then inside edit method of vuejs, you will do an edit axios call for that specific record to first show it inside fields and then you will update. But before update you need to do something inside edit method of your vuejs when you will have already loaded data for that specific id.
Now lets say you have received a record from database according to a specific id, you will see a dropdown id I mean to say a foreign key for a dropdown that you had saved during storing data.
Suppose you have ratings array which holds whole data for a dropdown. Inside this you are having an id and text fields. So you have this ratings array and an object from database during edit for a specific record. Now you are good to go with below code.
Inside Edit Method of vuejs
this.customer.ratings = this.ratings.find(item => item.id === parseInt(res.data.rating_id))
this.customer.ratings = parseInt(this.customer.ratings.rating_id)
Note: I am doing parseInt() it's because when you check in console the primary key is an integer like 1 but foreign key like rating_id is string i-e "1". You can also use two equals == if you are not using parseInt() but I haven't checked that.
For clearly understanding I am just sharing a sample edit code which might help you a bit
editItem(id){
axios.get( `/api/category/${id}` ).then( res => {
if(res.data.status === 200){
console.log(res.data.data)
this.name = res.data.data.name
this.id = res.data.data.id
this.parent_id = this.list_categories.find(item => item.id === parseInt(res.data.data.parent_id))
this.parent_id = parseInt(this.parent_id.id)
this.edited = true
}else{
this.$toaster.error( res.data.message )
}
});
}
I'm not sure what you mean by "... when Im click on Edit." but I will presume you mean when you click on the dropdown menu.
From what you have provided in your jsfiddle, your v-select should be like this:
<v-select
prepend-icon="star_rate"
:items="ratings"
v-model="customer.rating"
label="Rating"
item-text="ratings.text"
item-value="ratings"
single-line
></v-select>
This can be found here, in the API props section.
item-text: Set property of items’s text value
item-value: Set property of items’s value
The text is what you see, I believe that text which is the current value of item-text is either undefined or not declared. If this answer doesn't work, then you need to provide more of your code.
I have a custom component called 'menu-entry':
<menu-entry v-for="field in fields" :id:"field.id" :ref="field.id" v-bind:key="field.id" v-bind:class="[classArray]" v-bind:field="field" v-on:clicked="menuEntryClicked">
</menu-entry>
I need to get one of them (for example field.id = 2) and remove an item from the classArray.
this.$refs[2] is working for HTML elements, but not for custom elements.
this.$el.querySelector isnt working either.
is there another way to remove an item from the classArray of a specific element?
Your question it is not clear but you are trying to set id and ref to field.id so following this logic it is not necessary to do though.
You can just send the id to the method you are executing like below:
<menu-entry
v-for="field in fields"
v-bind:key="field.id"
v-bind:class="[classArray]"
v-bind:field="field"
v-on:clicked="menuEntryClicked(field.id)" // <= send the id here
>
</menu-entry>
I am not sure if i helped but regarding your question, now you can figoure out which id of element is clicked and remove it from classArray or whatever you want
2 is not a valid id selector when you use document.querySelector('#2'); maybe you can use document.getElementById('2') instead - it can work.
I made a template and there is a <select dojotype="dijit.form.ComboBox" dojoAttachPoint="selectPageNumber" id="selectPageNumber">tag with id and dojoAttachPoint be "selectPageNumber". I want to populate it with options upon create so I add some code to the postCreate function:
var select = dijit.byId("selectPageNumber");
or
var select = this.selectPageNumber;
but I always have select being undefined.
What am I doing wrong?
UPD:
The problem with element has been solved spontaneously and I didn't got the solution. I used neither dojo.addOnLoad nor widgetsInTemplate : true, it just started to work. But I have found the same problem again: when I added another tag I can't get it!
HTML:
<select class="ctrl2" dojotype="dijit.form.ComboBox" dojoAttachPoint="selectPageNumber" id="selectPageNumber">
</select>
<select class="ctrl2" dojotype="dijit.form.ComboBox" dojoAttachPoint="selectPageNumber2" id="selectPageNumber2">
</select>
widget:
alert(this.selectPageNumber);
alert(this.selectPageNumber2);
first alert shows that this.selectPageNumber is a valid object and the this.selectPageNumber2 is null.
widgetsInTemplate is set to false.
all the code is within dojo.addOnLoad()
dojo.require() is valid
I am using IBM Rational Application Developer (if it is essential).
WHY it is so different?
Based on your syntax, I am assuming that you are using 1.6. Your question mentions template and postCreate, so i am assuming that you have created a widget that acts as a composite (widgets in the template).
Assuming 1.6, in your widget, have you set the widgetsInTemplate property to true. This will tell the parser that your template has widgets that need to be parsed when creating the widget.
http://dojotoolkit.org/documentation/tutorials/1.6/templated/
I would remove the id from the select. Having the id means that you can only instantiate your widget once per page. You should use this.selectPageNumber within your widget to access the select widget.
If you are using 1.7 or greater, instead of setting the widgets widgetsInTemplate property, you should use the dijit._WidgetsInTemplateMixin mixin.
http://dojotoolkit.org/reference-guide/1.8/dijit/_WidgetsInTemplateMixin.html
Depending on when dijit.byId() is being called, the widget may not have been created yet. Try using dojo.addOnLoad()
dojo.addOnLoad(function() {
var select = dijit.byId("selectPageNumber");
});
I came close to the solution: it seems like there is a some sort of RAD "caching" that doesn't respond to changes made in html code.
Ways to purge the workspace environment with RAD (based on Eclipse) might be a solution.