none
DatePicker is not getting displayed when I'm using v-if on the div tag in Vue.js RRS feed

  • Question

  • Hi,

    we have jquery for the date picker it is working fine, if I'm using v-if in the div the date picker is not getting displayed. Please find the below code.

    <div class="row" v-if="canEdit">

        <div>Joining Date</div> 
        <div>
        <input type="date" id="txtJoiningDate" v-model="JoiningDate"/>
        </div>
        </div>

      $("#txtJoiningDate").datepicker({dateFormat: "yy-mm-dd"});

     JoiningDate: new Date(data.JoiningDate).toISOString(),

    Thanks in Advance !!


    Thursday, September 19, 2019 2:22 PM

Answers

  • Hi CharudathNandan,

    The issue is in this snippet:

    data: {
    permissionsGroups: {
                        HRRepresentative: false                   
                    }
    },
    
    
    computed: {
    
    canEdit: function() {
    
    
                        return this.permissionsGroups.HRRepresentative;  
                        }  
    }

    "canEdit" is set to HRRepresentative object which is set to false so it won't display the datepicker div. You can modify to true instead.

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Monday, September 23, 2019 11:17 AM

All replies

  • Hi Charudath,

    I have worked on angular js and this v-if seems similar to ngif. What is the value that your setting for canEdit? Can you try adding true and false inside v-if rather than canEdit. If on true the element is visible and in false it's not then you need to assign true and false to canEdit inside js code based on your requirements. 


    K Mohit

    Thursday, September 19, 2019 3:05 PM
  • Thanks Mohit for the reply. yes I'm passing true or false for the variable canEdit. on assigning v-if the date picker is not working. if i remove the v-if it is working. is that I'm missing something.

    Thanks!!


    Thursday, September 19, 2019 3:15 PM
  • Hi Charudath,

    Below code is working fine for me - 

    <!DOCTYPE html>
    <html>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <body>
    
    <h2>Vue.js</h2>
    
    <div id="app">
      <p v-if='toggle'>{{ message }}</p>
      <p><input v-model="message"></p>
    </div>
    
    <script>
    myObject = new Vue({
      el: '#app',
      data: {message: 'Hello Vue.js!', toggle:true}
    })
    </script>
    
    </body>
    </html>

    Can you please share your code? I hope your not binding string "true" or "false" to canEdit.


    K Mohit

    Thursday, September 19, 2019 5:37 PM
  • Hi CharudathNandan,

    v-if is Condition Rendering in Vue.js.

    And as Kumar's suggestion, need to build a vue object to pass a boolean value true/false rather than string to the div.

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Friday, September 20, 2019 6:12 AM
  • Hi CharudathNandan,

    Is there any updates ?

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Monday, September 23, 2019 5:43 AM
  • Hi,

    Thanks for the reply and follow-up, I apologies for the delay, please find the whole code for the above issue:

    <div class="column1" v-if="canEdit">
    <div>Creation Date</div>
    <div>
    <input type="text" id="txtJoiningDate" v-model="JoiningDate"/>
    </div>
                    </div>


    function _init() {
    $.blockUI();
    vm = new Vue({
    el: "#Emplyee form",


    data: {
    permissionsGroups: {
                        HRRepresentative: false                   
                    }
    },


    computed: {

    canEdit: function() {


                        return this.permissionsGroups.HRRepresentative;  
                        }  
    }
    });

    $("#txtJoiningDate").datepicker({ dateFormat: "yy-mm-dd" });

     Promise.all(_fetchDataAsync()).then(function (results) {


            $.unblockUI();
        }, function (err) {
            $.unblockUI();
            console.error(err);
            vm.message = "Error fetching data";
        });


    }

    $(document).ready(function () {
        _init();
    });

    function _fetchDataAsync() {
    var promises = [];
    promises.push(usersRepo.isCurrentUserInGroupByName('HRRepresentative').then(function (userInGroup) {
                vm.permissionsGroups.HRRepresentative= userInGroup;            
            }, function(err) {
                throw err;
            }));
    }

    Thanks in Advance !!

                                                 
    Monday, September 23, 2019 10:18 AM
  • Hi CharudathNandan,

    The issue is in this snippet:

    data: {
    permissionsGroups: {
                        HRRepresentative: false                   
                    }
    },
    
    
    computed: {
    
    canEdit: function() {
    
    
                        return this.permissionsGroups.HRRepresentative;  
                        }  
    }

    "canEdit" is set to HRRepresentative object which is set to false so it won't display the datepicker div. You can modify to true instead.

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Monday, September 23, 2019 11:17 AM
  • Thankyou so much it worked!!
    Monday, September 23, 2019 12:22 PM