Dropdown - Vue - injected data is not displaying well

[aloiseau17]

Are you requesting a feature, reporting a bug or asking a question?

Reporting bug on vue platform with dropdown component

What is the current behavior?

When data is injected on display mode

survey.data = {
    car: ['Ford']
};
survey.mode = 'display';

Dropdown is displaying like this :

What is the expected behavior?

I expect only first array item is displaying, not surrouding with '[ ]'. It's correctly displayed with jQuery implementation for example: https://plnkr.co/edit/qNKNiYVO6OBwfdXp

How would you reproduce the current behavior (if this is a bug)?

Create a form with a dropdown question and display mode then inject data inside.

Provide the test code and the tested page URL (if applicable)

Tested page URL: https://plnkr.co/edit/EocuocRDUdWPJfUR

Test code

Survey
    .StylesManager
    .applyTheme("modern");

var json = {
    questions: [
        {
            type: "dropdown",
            name: "car",
            title: "What car are you driving?",
            isRequired: true,
            colCount: 4,
            choices: [
                "None",
                "Ford",
                "Vauxhall",
            ]
        }
    ]
};

window.survey = new Survey.Model(json);

survey.data = {
    car: ['Ford']
};
survey.mode = 'display';

var app = new Vue({
    el: '#surveyElement',
    data: {
        survey: survey
    }
});

Specify your

• browser: chrome
• browser version: Version 80.0.3987.149
• surveyjs platform (angular or react or jquery or knockout or vue): vue
• surveyjs version: 1.5.18

[tsv2013]

You needn't to use square brackets in data:

survey.data = {
    car: 'Ford'
};

Here is the updated plunker - https://plnkr.co/edit/ga5NENkzlyhpcj7g

[aloiseau17]

Thank you for your response but I receive data in this format for dropdown.

What you suggest is to parse data and replace array with string. Lots of work I think, especially after I try the same rendering with jQuery instead of Vue. If you check the example sent above with jQuery, it works well.

Here is the link back https://plnkr.co/edit/qNKNiYVO6OBwfdXp?preview

[andrewtelnov]

@aloiseau17 That is not a good idea to do what you do. You are modifying DOM and if SurveyJS Library decided to re-render the question, html element will be updated and comeback to the origional version. We gave you the right approach, you can do what ever you want of course, but your approach can lead to non-stable code.

Your code doesn't work, because in your case, question.name is "car" and you do not have an option with "car" value.

   var el = document.getElementById(options.name); //options.name equals to car
    if (el) {
        el.value = options.value;
    }

Thank you, Andrew

[aloiseau17]

Sorry but I think there is misunderstanding. Sorry for my bad english.

I'll try to reword my question.

I did two plunker demo:

• one with VueJS platform : https://plnkr.co/edit/EocuocRDUdWPJfUR
• the other with jQuery platform : https://plnkr.co/edit/qNKNiYVO6OBwfdXp?preview

I do exactly the same:

survey.data = {
    car: ['Ford']
};

But result is different. Why ?

For me right behavior is jQuery rendering.

[aloiseau17]

Does my question more understandable or not ?

[tsv2013]

Your code with array is wrong. The dropdown question doesn't accept array as value. The data should be a single value, not an array:

survey.data = {
    car: 'Ford'
};

for all framaworks - jQuery/Vue/Angular and so on

[aloiseau17]

Ok fine, so there is effectively a problem with jQuery platform. That's right ?

[tsv2013]

No. The code from my previous post should work for the dropdown question for all platforms.

Unless I misunderstand your question....

[aloiseau17]

Yes it works :) but I'm talking about the two demo plunker. Behaviors are different.

With demo jQuery: wrong code with bracket, is working.

survey.data = {
    car: ['Ford']
};

[tsv2013]

It's an unexpected side-effect.