Sponsored Content
Top Forums Web Development Turning jQuery Code into Vue.js Post 303025665 by Scott on Thursday 8th of November 2018 02:50:21 PM
Old 11-08-2018
The problem in the end was in the vB Template, where $jsGlobalsfromvB was given after the Vue components were loaded, meaning that vbuserId and vbtheURL were not set at the time the components were rendered.

Here's the final, working version:
Code:
Vue.component("unix-navbar", {
  template: `<div class="neo-table-border vuenavbar">
              <div class="flex-item" style="margin-bottom:10px;padding-top:13px;">
                <a class="vuenavbarhome" :href="url">{{name}}</a>
              </div>
              <div id="avatar" class="flex-item"  v-html="theavatar" @click="OpenMemberPanel()" style="cursor:pointer;" align="center"></div>
            </div>`,

  data() {
    return {
      unixtime: '',
      name: "The UNIX and Linux Forums",
      url: "https://www.unix.com/",
      theavatar: ''
    };
  },
  methods: {
    GetAvatar() {
      if ( vbuserId > 0 )
        this.theavatar = '<img src="' + vbtheURL + '" width="60px"></img>';
      else
        this.theavatar =
          '<span class="alt1" style="font-size:3em;cursor:pointer;float:right;background-color:transparent;margin-right:5px;margin-left:10px;top:0;padding:20px;" ><i style="color:#170072;" class="fas fa-user"></i></span>';
    },
    UpdateTime() {
      this.unixtime = Math.round(new Date().getTime() / 1000);
    },
    OpenMemberPanel() {
      if ( vbuserId > 0 )
        openMemberPanel();
      else
        openLogin();
    }
  },
  created() {
    setInterval(() => {
      this.UpdateTime();
    }, 1000);

    this.GetAvatar();
  }
});

var navbar =
  new Vue({
    el: "#vue-navbar"
  });

This User Gave Thanks to Scott For This Post:
 

6 More Discussions You Might Find Interesting

1. What is on Your Mind?

JQuery and CSS Flex Code for Responsive WOL Page

I have just wrote this jQuery to the WOL page, so the table of users on line will not need scrollbars and will instead transform into a responsive table: <script> jQuery(document).ready(function (){ jQuery("#neo-who-flex-tcat"). css({"display":"flex","flex-flow":"row wrap", ... (0 Replies)
Discussion started by: Neo
0 Replies

2. What is on Your Mind?

JQuery and CSS Flex Code for Responsive Forum Home Page

So far, I have completed making the home page more responsive (except for the forum stats at the top and the WOL box at the bottom, they still use scroll bars). xevV3_iZ8-s For full screen use the link below and set your YT resolution to 1080p60 HD https://youtu.be/xevV3_iZ8-s Here is... (1 Reply)
Discussion started by: Neo
1 Replies

3. What is on Your Mind?

JQuery to Add Code Tags to Selected Text

Hey. Someone find or write some jQuery code where we can select text with our mouse and then click or double click the highlighted / selected text and then it will wrap code tags around the highlighted text (in our editors). :) (0 Replies)
Discussion started by: Neo
0 Replies

4. Web Development

Simple Vue.js Component to Redirect to External Web Page Using Vue Router

Vue Router has some quirks and on of the quirks is that it is not reliable when adding external links using the vue-router library. After struggling with many solutions, I have found that creating a simple Vue.js component like this one seems to work the best (so far): Component Example: ... (0 Replies)
Discussion started by: Neo
0 Replies

5. Web Development

Vue JS 2 Tutorial by The Net Ninja: A Recommended Vue.js Video Tutorial Series

A number of people have asked me how to get started with Vue.js and my reply before today was to Google "Vue.js". That has changed and my recommendation to anyone who wants to learn the fastest growing, easiest to learn and use Vue.js web dev framework is to watch this video tutorial series: ... (0 Replies)
Discussion started by: Neo
0 Replies

6. Web Development

Vue.js component: Beautiful code highlighter

Sooner than later I will render forum discussions in Vue.js to complement the standard way of showing forum threads. Today, I ran across this component, vue-code-highlight Beautiful code syntax highlighting as Vue.js component. https://www.unix.com/members/1-albums225-picture1199.jpg ... (1 Reply)
Discussion started by: Neo
1 Replies
ntp_time(n)						      Network Time Facilities						       ntp_time(n)

__________________________________________________________________________________________________________________________________________________

NAME
ntp_time - Tcl Time Service Client SYNOPSIS
package require Tcl 8.0 package require time ?1.2.1? ::time::gettime ?options? timeserver ?port? ::time::getsntp ?options? timeserver ?port? ::time::configure ?options? ::time::cget name ::time::unixtime token ::time::status token ::time::error token ::time::reset token ?reason? ::time::wait token ::time::cleanup token _________________________________________________________________ DESCRIPTION
This package implements a client for the RFC 868 TIME protocol (http://www.rfc-editor.org/rfc/rfc868.txt) and also a minimal client for the RFC 2030 Simple Network Time Protocol (http://www.rfc-editor.org/rfc/rfc2030.txt). RFC 868 returns the time in seconds since 1 January 1900 to either tcp or udp clients. RFC 2030 also gives this time but also provides a fractional part which is not used in this client. COMMANDS
::time::gettime ?options? timeserver ?port? Get the time from timeserver. You may specify any of the options listed for the configure command here. This command returns a token which must then be used with the remaining commands in this package. Once you have finished, you should use cleanup to release all resources. The default port is 37. ::time::getsntp ?options? timeserver ?port? Get the time from an SNTP server. This accepts exactly the same arguments as ::time::gettime except that the default port is 123. The result is a token as per ::time::gettime and should be handled in the same way. Note that it is unlikely that any SNTP server will reply using tcp so you will require the tcludp or the ceptcl package. If a suit- able package can be loaded then the udp protocol will be used by default. ::time::configure ?options? Called with no arguments this command returns all the current configuration options and values. Otherwise it should be called with pairs of option name and value. -protocol number Set the default network protocol. This defaults to udp if the tcludp package is available. Otherwise it will use tcp. -port number Set the default port to use. RFC 868 uses port 37, RFC 2030 uses port 123. -timeout number Set the default timeout value in milliseconds. The default is 10 seconds. -command number Set a command procedure to be run when a reply is received. The procedure is called with the time token appended to the argu- ment list. -loglevel number Set the logging level. The default is 'warning'. ::time::cget name Get the current value for the named configuration option. ::time::unixtime token Format the returned time for the unix epoch. RFC 868 time defines time 0 as 1 Jan 1900, while unix time defines time 0 as 1 Jan 1970. This command converts the reply to unix time. ::time::status token Returns the status flag. For a successfully completed query this will be ok. May be error or timeout or eof. See also ::time::error ::time::error token Returns the error message provided for requests whose status is error. If there is no error message then an empty string is returned. ::time::reset token ?reason? Reset or cancel the query optionally specfying the reason to record for the error command. ::time::wait token Wait for a query to complete and return the status upon completion. ::time::cleanup token Remove all state variables associated with the request. % set tok [::time::gettime ntp2a.mcc.ac.uk] % set t [::time::unixtime $tok] % ::time::cleanup $tok % set tok [::time::getsntp pool.ntp.org] % set t [::time::unixtime $tok] % ::time::cleanup $tok proc on_time {token} { if {[time::status $token] eq "ok"} { puts [clock format [time::unixtime $token]] } else { puts [time::error $token] } time::cleanup $token } time::getsntp -command on_time pool.ntp.org AUTHORS
Pat Thoyts BUGS, IDEAS, FEEDBACK This document, and the package it describes, will undoubtedly contain bugs and other problems. Please report such in the category ntp of the Tcllib SF Trackers [http://sourceforge.net/tracker/?group_id=12883]. Please also report any ideas for enhancements you may have for either package and/or documentation. SEE ALSO
ntp KEYWORDS
NTP, SNTP, rfc 2030, rfc 868, time COPYRIGHT
Copyright (c) 2002, Pat Thoyts <patthoyts@users.sourceforge.net> ntp 1.2.1 ntp_time(n)
All times are GMT -4. The time now is 07:31 PM.
Unix & Linux Forums Content Copyright 1993-2022. All Rights Reserved.
Privacy Policy