1. Home
  2. Forum
  3. Vue
  4. ejs-combobox, v-model and dataSource for edit form

ejs-combobox, v-model and dataSource for edit form

Hello,

We are trying to use ejs-combobox not only in a black form, we are trying to use in a edit form.

We are using this definition (simplified for better reading):
<ejs-combobox id='client' ref="clientSelector" floatLabelType="Auto" :fields='clientFields' :dataSource='clients' v-model="form.client_id" ></ejs-combobox>

Relevant definitions:

export default {
...
created() {
            this.fetchClients();
            this.fetch();
        },
...
data: () => ({
            form: new Form({
                client_id: 0,
                date: '',
                total: 0,
                description: '',
                payed: false
            }),
            clients: [],
            payment: [],
            clientFields: { text: 'name', value: 'id' },
....
 methods: {
            fetch() {
                axios.get(`/api/payments/${this.id}`)
                    .then(response => {
                        this.payment = response.data;

                        // Fill the form with user data.
                        this.form.keys().forEach(key => {
                            this.form[key] = this.payment[key];
                        });
                    })
                    .catch(error => console.log(error));
            },
            fetchClients(page) {
                axios.get(`/api/clients/${this.id}`)
                    .then(response => {
                         this.clients = response.data;
                    })
                    .catch(error => console.log(error));
            },
            ...


As you can see:
1) axios request is run asynchronously, so this.form.client_id can be populated after or before this.clients 
2) if we set this.clients to a static array, when form.client_id is set, text is changed sucessfully. (this solution is not possible)
3) ej combo creation status is unknown when this.clients and / or form.client_id are assigned.

We have tryed to execute bind update method, to set this.clients again, etc.

In our opinion, when form.client_id and this.clients change, text must be reevaluated. Seems like control is conceived to work only with the same text/value, not with different fields in object.

Can you aid us?

Thank you.

7 Replies
PM Ponmani Murugaiyan Syncfusion Team August 13, 2020 03:44 PM UTC

Hi Victor, 
 
Greetings from Syncfusion support. 
 
We would like to inform you that with the provide information, we couldn’t replicate the issue in our end. Please provide the below details. 
 
  1. Provide video demonstration for replicate the issue.
  2. If possible provide the issue reproducing sample.
 
The above requested details will helps us to provide you the solution at earliest. 
 
Regards, 
Ponmani M 


VV Victor Vadillo August 13, 2020 04:38 PM UTC

Hello,

Thank you for your answer.

I do not know how to provide you a sample, ¿you need full source code? because it exceed 30MB maximum file upload.

And we can not provide you a video, because it is a behavior in the backend.

clients in data is filled with an array of objects, like { id: number, name: string }
form in data is filled with an object, for the purpose of this question, filled (when request done) with { client_id: number }

The purpose is to get { client_id: number }, assign  to combobox, and this control get text (name) from dataSource.

Currently, we can see only the number in form.client_id, and not the text that should be from the object in dataSource where  id = form.client_id, so dataSource is not read, and text is not being extracted from { id: number, name: string } object in dataSource array of objects.

Please, say me if you need additional data. 

VV Victor Vadillo August 13, 2020 04:41 PM UTC

Attached you will find the .vue file

Attachment: show_3f36b333.zip

VV Victor Vadillo August 18, 2020 01:08 PM UTC

Hello,

If anyone is experiencing same problem, the issue is with "allowFiltering" property.

When enabled, text is not resolved from dataSource (when v-model is set, text and value have same value).

Thank you.

PM Ponmani Murugaiyan Syncfusion Team August 18, 2020 02:33 PM UTC

Hi Victor, 

Thanks for the patience. 

Based on your provided code snippet, we suspect that you are trying to provide the preselect value to the component using v-model, in which before updating the datasource, the value set to the component. So, it will not fetch the corresponding text mapped with ID field. We request you to set value [client_id: 0] to the component after updating the datasource in your application. 

Regards, 
Ponmani M 




VV Victor Vadillo August 18, 2020 02:54 PM UTC

Hello,

We have tried to:

1. Update value through this.$refs.reference.ej2Instances.value -> Not working, 
2. Update text through this.$refs.reference.ej2Instances.text -> Working partially, text correctly updated but .value property is set with same .text value
3. Using dataBind() method after 1 and 2 -> Not working
4. Leave dataSource property blank, and set it after .clients (datasource property) filled with data, with or without dataSource() call -> Not working

And some other methods.

When allowFiltering is not set, all is working without problem, so may be a bug.

Thank you for your answer.

PM Ponmani Murugaiyan Syncfusion Team August 20, 2020 03:51 AM UTC

Hi Victor, 

Thanks for the update. 

Based on your reported issue “with enableFiltering property, v-model is not updating as expected”. We have prepared simple sample and ensured in our end, which has been working as expected. Please find the test sample below for reference. Also, we suggest you to upgrade the Syncfusion product version to latest (18.2.54) and ensure in your end. 

<ejs-combobox id='first':dataSource='sportsData' :fields='fields' :placeholder="waterMark" v-model="value" allowFiltering= "true" ></ejs-combobox> 


 
Kindly check with the above sample. If issue still exists in your end. Please try to reproduce the issue in the provided sample to validate further in our end. 

Regards, 
Ponmani M 


Loader.
Up arrow icon