Sponsored Content
Top Forums Web Development Turning jQuery Code into Vue.js Post 303025671 by Neo on Thursday 8th of November 2018 09:49:57 PM
Old 11-08-2018
Also, for completeness, I changed the GetAvatar() method to a computed property and it works as well. I personally like this method because it is a few less lines of code and it's easy to use the dev tools Vue debugger to look at the computed data:

Code:
Vue.component("unix-navbar", {
  template: `<div class="neo-table-border vue-navbar">
              <div  class="vue-site-info">
                <a class="vue-site-link" :href="url">{{name}}</a>
              </div>
              <div id="avatar"  v-html="theavatar" @click="OpenMemberPanel()"></div>
            </div>`,

  data() {
    return {
      name: "The UNIX and Linux Forums",
      url: "https://www.unix.com/"
    };
  },
  computed: {
    theavatar: function() {
      if (vbuserId > 0)
        return '<img id="avatar-img" src="' + vbtheURL + '"></img>';
      else return '<i id="avatar-icon" class="fas fa-user"></span>';
    }
  },
  methods: {
    OpenMemberPanel() {
      if (vbuserId > 0) openMemberPanel();
      else openLogin();
    }
  }
});

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

Vue debugger:

Image
 

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
Tree::Simple::Visitor::CreateDirectoryTree(3pm) 	User Contributed Perl Documentation	   Tree::Simple::Visitor::CreateDirectoryTree(3pm)

NAME
Tree::Simple::Visitor::CreateDirectoryTree - A Visitor for create a set of directories and files from a Tree::Simple object SYNOPSIS
use Tree::Simple::Visitor::CreateDirectoryTree; # create a Tree::Simple object which # represents a directory heirarchy my $tree = Tree::Simple->new("www/") ->addChildren( Tree::Simple->new("conf/") ->addChildren( Tree::Simple->new("startup.pl"), Tree::Simple->new("httpd.conf") ), Tree::Simple->new("cgi-bin/"), Tree::Simple->new("ht_docs/"), Tree::Simple->new("logs/") ->addChildren( Tree::Simple->new("error.log"), Tree::Simple->new("access.log") ), ); # create an instance of our visitor my $visitor = Tree::Simple::Visitor::CreateDirectoryTree->new(); # pass the visitor to a Tree::Simple object $tree->accept($visitor); # the www/ directory now mirrors the structure of the tree DESCRIPTION
This visitor can be used to create a set of directories and files from a Tree::Simple object hierarchy. METHODS
new There are no arguments to the constructor the object will be in its default state. You can use the "setNodeFilter", "setFileHandler" and "setDirectoryHandler" methods to customize its behavior. setNodeFilter ($filter_function) This method accepts a CODE reference as its $filter_function argument and throws an exception if it is not a code reference. This code reference is used to filter the tree nodes as they are used to create the directory tree, it can be basically used as a node pre- processor. An example usage of this might be to enforce the 8.3 naming rules of DOS, or the 32 character limit of older macintoshes. setFileHandler ($file_handler) This method accepts a CODE reference as its $file_handler argument and throws an exception if it is not a CODE reference. This method can be used to create custom file creation behavior. The default behavior is to just create the file and nothing else, but by using this method it is possible to implement some other custom behavior, such as creating a file based on a template. The function is passed the full path of the file to be created (as built by File::Spec). setDirectoryHandler ($dir_handler) This method accepts a CODE reference as its $dir_handler argument and throws an exception if it is not a CODE reference. This method can be used to create custom directory creation behavior. The default behavior is to just create the directory and nothing else, but by using this method it is possible to implement some other custom behavior, such as creating a directory on a remote server. The function is passed the full path of the directory to be created (as built by File::Spec). visit ($tree) This is the method that is used by Tree::Simple's "accept" method. It can also be used on its own, it requires the $tree argument to be a Tree::Simple object (or derived from a Tree::Simple object), and will throw and exception otherwise. The tree is processed as follows: Any node which is not a leaf is considered a directory. Obviously since files themselves are leaf nodes, this makes sense that non-leaves will be directories. Any node (including leaf nodes) which ends in either the character "/" or "" is considered a directory. I think it is a pretty standard convention to have directory names ending in a separator. The separator itself is stripped off before the directory name is passed to File::Spec where the platform specific directory path is created. This means that it does not matter which one you use, it will be completely cross platform (at least as cross-platform as File::Spec is). All other nodes are considered to be files. BUGS
None that I am aware of. Of course, if you find a bug, let me know, and I will be sure to fix it. CODE COVERAGE
See the CODE COVERAGE section in Tree::Simple::VisitorFactory for more inforamtion. SEE ALSO
These Visitor classes are all subclasses of Tree::Simple::Visitor, which can be found in the Tree::Simple module, you should refer to that module for more information. AUTHOR
stevan little, <stevan@iinteractive.com> COPYRIGHT AND LICENSE
Copyright 2004, 2005 by Infinity Interactive, Inc. <http://www.iinteractive.com> This library is free software; you can redistribute it and/or modify it under the same terms as Perl itself. perl v5.10.1 2010-02-18 Tree::Simple::Visitor::CreateDirectoryTree(3pm)
All times are GMT -4. The time now is 08:05 PM.
Unix & Linux Forums Content Copyright 1993-2022. All Rights Reserved.
Privacy Policy