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
Bio::Structure::Atom(3pm)				User Contributed Perl Documentation				 Bio::Structure::Atom(3pm)

NAME
Bio::Structure::Atom - Bioperl structure Object, describes an Atom SYNOPSIS
#add synopsis here DESCRIPTION
This object stores a Bio::Structure::Atom FEEDBACK
Mailing Lists User feedback is an integral part of the evolution of this and other Bioperl modules. Send your comments and suggestions preferably to one of the Bioperl mailing lists. Your participation is much appreciated. bioperl-l@bioperl.org - General discussion http://bioperl.org/wiki/Mailing_lists - About the mailing lists Support Please direct usage questions or support issues to the mailing list: bioperl-l@bioperl.org rather than to the module maintainer directly. Many experienced and reponsive experts will be able look at the problem and quickly address it. Please include a thorough description of the problem with code and data examples if at all possible. Reporting Bugs Report bugs to the Bioperl bug tracking system to help us keep track the bugs and their resolution. Bug reports can be submitted via the web: https://redmine.open-bio.org/projects/bioperl/ AUTHOR - Kris Boulez Email kris.boulez@algonomics.com APPENDIX
The rest of the documentation details each of the object methods. Internal methods are usually preceded with a _ new() Title : new() Usage : $struc = Bio::Structure::Atom->new( -id => 'human_id', ); Function: Returns a new Bio::Structure::Atom object from basic constructors. Probably most called from Bio::Structure::IO. Returns : a new Bio::Structure::Atom object x() Title : x Usage : $x = $atom->x($x); Function: Set/gets the X coordinate for an Atom Returns : The value for the X coordinate of the Atom (This is just a number, it is expected to be in Angstrom, but no garantees) Args : The X coordinate as a number y() Title : y Usage : $y = $atom->y($y); Function: Set/gets the Y coordinate for an Atom Returns : The value for the Y coordinate of the Atom (This is just a number, it is eypected to be in Angstrom, but no garantees) Args : The Y coordinate as a number z() Title : z Usage : $z = $atom->z($z); Function: Set/gets the Z coordinate for an Atom Returns : The value for the Z coordinate of the Atom (This is just a number, it is ezpected to be in Angstrom, but no garantees) Args : The Z coordinate as a number xyz() Title : xyz Usage : ($x,$y,$z) = $atom->xyz; Function: Gets the XYZ coordinates for an Atom Returns : A list with the value for the XYZ coordinate of the Atom Args : residue() Title : residue Usage : Function: No code here, all parent/child stuff via Entry Returns : Args : icode() Title : icode Usage : $icode = $atom->icode($icode) Function: Sets/gets the icode Returns : Returns the icode for this atom Args : reference to an Atom serial() Title : serial Usage : $serial = $atom->serial($serial) Function: Sets/gets the serial number Returns : Returns the serial number for this atom Args : reference to an Atom occupancy() Title : occupancy Usage : $occupancy = $atom->occupancy($occupancy) Function: Sets/gets the occupancy Returns : Returns the occupancy for this atom Args : reference to an Atom tempfactor() Title : tempfactor Usage : $tempfactor = $atom->tempfactor($tempfactor) Function: Sets/gets the tempfactor Returns : Returns the tempfactor for this atom Args : reference to an Atom segID() Title : segID Usage : $segID = $atom->segID($segID) Function: Sets/gets the segID Returns : Returns the segID for this atom Args : reference to an Atom pdb_atomname() Title : pdb_atomname Usage : $pdb_atomname = $atom->pdb_atomname($pdb_atomname) Function: Sets/gets the pdb_atomname (atomname used in the PDB file) Returns : Returns the pdb_atomname for this atom Args : reference to an Atom element() Title : element Usage : $element = $atom->element($element) Function: Sets/gets the element Returns : Returns the element for this atom Args : reference to an Atom charge() Title : charge Usage : $charge = $atom->charge($charge) Function: Sets/gets the charge Returns : Returns the charge for this atom Args : reference to an Atom sigx() Title : sigx Usage : $sigx = $atom->sigx($sigx) Function: Sets/gets the sigx Returns : Returns the sigx for this atom Args : reference to an Atom sigy() Title : sigy Usage : $sigy = $atom->sigy($sigy) Function: Sets/gets the sigy Returns : Returns the sigy for this atom Args : reference to an Atom sigz() Title : sigz Usage : $sigz = $atom->sigz($sigz) Function: Sets/gets the sigz Returns : Returns the sigz for this atom Args : reference to an Atom sigocc() Title : sigocc Usage : $sigocc = $atom->sigocc($sigocc) Function: Sets/gets the sigocc Returns : Returns the sigocc for this atom Args : reference to an Atom sigtemp() Title : sigtemp Usage : $sigtemp = $atom->sigtemp($sigtemp) Function: Sets/gets the sigtemp Returns : Returns the sigtemp for this atom Args : reference to an Atom aniso() Title : aniso Usage : $u12 = $atom->aniso("u12", $u12) Function: Sets/gets the anisotropic temperature factors Returns : Returns the requested factor for this atom Args : reference to an Atom, name of the factor, value for the factor id() Title : id Usage : $atom->id("CZ2") Function: Gets/sets the ID for this atom Returns : the ID Args : the ID _remove_residue() Title : _remove_residue Usage : Function: Removes the Residue this Atom is atttached to. Returns : Args : _grandparent() Title : _grandparent Usage : Function: get/set a symbolic reference to our grandparent Returns : Args : perl v5.14.2 2012-03-02 Bio::Structure::Atom(3pm)
All times are GMT -4. The time now is 03:22 PM.
Unix & Linux Forums Content Copyright 1993-2022. All Rights Reserved.
Privacy Policy