Uibuilder - Insert dateTime stamp into navbar

I figured out how to get the date time in UTC to render in the body section but putting it in the nav bar seems more tricky. I took this example from stack exchange and modified for index.js and index.html. Here is the example code:

<html>
   <head>
      <title>VueJs Introduction</title>
      <script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js">
      </script>
   </head>
   <body>
      <div id = "intro" style = "text-align:center;">
         <h1>{{ timestamp }}</h1>
      </div>
      <script type = "text/javascript">
         var vue_det = new Vue({
            el: '#intro',
            data: {
               timestamp: ""
            },
            created() {
                setInterval(this.getNow, 1000);
            },
            methods: {
                getNow: function() {
                    const dateTime = new Date().toLocaleString('en-US', {timeZone: 'UTC', timeZoneName:'short',hourCycle: 'h23', hour: `2-digit`, minute: `2-digit`});
                    this.timestamp = dateTime;
                }
            }
         });
      </script>
   </body>
</html>

Here are the index.js parts of my code.
data:

const app = new Vue({
    el: '#app',

    data() { return {

        startMsg    : 'Vue has started, waiting for messages',
        feVersion   : '',
        counterBtn  : 0,
        inputText   : null,
        inputChkBox : false,
        socketConnectedState : false,
        serverTimeOffset     : '[unknown]',
        imgProps             : { width: 75, height: 75 },

        msgRecvd    : '[Nothing]',
        msgsReceived: 0,
        msgTopic    : '[Noting]',
        msgsTopic   : 0,
        msgCtrl     : '[Nothing]',
        msgsControl : 0,
        
        showme      : false,
        timestamp   : "",

 
        msgSent     : '[Nothing]',
        msgsSent    : 0,
        msgCtrlSent : '[Nothing]',
        msgsCtrlSent: 0,

        isLoggedOn  : false,
        userId      : null,
        userPw      : null,
        inputId     : '',

    }}, // --- End of data --- //

methods:

   // get UTC dateTime function //
        getNow: function() {
                    var dateTime = new Date().toLocaleString('en-US', {timeZone: 'UTC', timeZoneName:'short',hourCycle: 'h23', hour: `2-digit`, minute: `2-digit`});
                    this.timestamp = dateTime;
                },

Created:

        /** set timer interval for clock *//
        setInterval(this.getNow,1000);

Here is navbar code that I have for index.html:

</head><body>
   
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <a class="navbar-brand">{{timestamp}}</a>

In the body of the html the clock works fine..
image

However in the navbar I see this...
image

Thanks in advance for your advise..
Mick

You nav html doesnt seem to be inside the element called #app
so Vue doesnt know about it in order to update it dynamically.

thats why you get {{timestamp}} instead of the Vue data

move the nav code inside your wrapping #app div so its part of the Vue app

2 Likes

image

Spot on...

Thx.

1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.