Conditionally render html with syncfysion control

[Lajos Djerfi]

Hi, 

I have issues when I use v-if when I want to render some html div that has a syncfusion control.

When i use v-show, I can achieve that functionality, but it doesn't always work for me just to show the div that I need, and to hide the other ones.

Can you tell me where am I making an error?

Here is my component:

<template>

    <div>

        <form id="form_PersonExistence">

            <div class="col-md-12">

                <div class="form-group row">

                    <div class="col-md-2 text-right">

                        <input id="checkbox1" name="fizickoPravnoCheckbox" v-model="showDiv" value="1" type="radio" class="with-gap">

                        <label for="checkbox1"> {{ $t('Checkbox_1') }}</label>

                        <input id="checkbox2" name="fizickoPravnoCheckbox" v-model="showDiv" value="2" type="radio" class="with-gap">

                        <label for="checkbox2">{{ $t('Checkbox_2') }}</label>

                    </div>

                    <div class="col-md-8" v-if="showDiv == 1">

                        <div class="row">

                            <div class="col-md-4">

                                <div class="form-group">

                                    <label class="control-label">{{$t('COUNTRY')}}</label>

                                    <ejs-dropdownlist class="form-control"

                                                      id="COUNTRIES"

                                                      name="COUNTRIES"

                                                      v-model="data.COUNTRIES_ID"

                                                      :dataSource="[{ name: $t('SERBIA'), id: 4 }, { name: $t('CANADA'), id: 2 }]"

                                                      :fields="{ text: 'name', value: 'id' }"

                                                      :change="onDropDownListChange">

                                    </ejs-dropdownlist>

                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="col-md-8" v-else>

                        <div class="row">

                            <div class="col-md-4">

                                <div class="form-group">

                                    <label class="control-label">{{$t('TEST_NUMERIC')}}</label>

                                    <ejs-numerictextbox class="form-control" validateDecimalOnType=true format="######" decimals="0" v-model="data.NUMERIC" />

                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="col-md-2">

                    </div>

                </div>

            </div>

            <div class="row">

                <div class="col-md-6 col-sm-4">

                    <button type="submit" class="btn btn-success btn-lg m-t-15 waves-effect pull-right">{{$t('SUBMIT')}}<i class="fa fa-search"></i></button>

                </div>

            </div>

        </form>

    </div>

</template>

<script>

    import Vue from "vue";

    import axios from 'axios';

    export default Vue.extend({

        data: function () {

            return {

                data: {

                    COUNTRIES_ID: 4,

                },

                showDiv: 1,

            }

        },

        mounted: function () {

            var zapamti_this = this;

            $('input[type=radio][name=fizickoPravnoCheckbox]').change(function () {

                zapamti_this.data = {};

                zapamti_this.data.COUNTRIES_ID = 4;

            });

        },

        methods: {

            onDropDownListChange: function (e) {

                console.log(e);

                this.data = {};

                this.data.COUNTRIES_ID = e.itemData.id;

            },

        }

    });

</script>

[John Rajaram]

Hi Lajos, 

Thank you for contacting Syncfusion support. 

We have checked your reported issues, but we are unable to reproduce the issue with “v-if” 

For your convenience we have created a simple sample by using “v-if” 

Sample link: http://www.syncfusion.com/downloads/support/forum/140166/ze/vuecustomer-187948281.zip 

Please check the above sample and get back to us if you are still facing the issue. 

Regards, 

John R