Login or Register to Ask a Question and Join Our Community

Sponsored Content
Full Discussion: Turning jQuery Code into Vue.js
Top Forums Web Development Turning jQuery Code into Vue.js Post 303025740 by Neo on Sunday 11th of November 2018 05:23:14 AM
Old 11-11-2018
In this example, we move setInterval() inside the Vue component.

However, this is still suboptimal, as the goal is to get Vue to react (be reactive) and update to changes to external JS vars in the dev console without reloading the page. This is simply a rearrangement of the code in the prior post. I want to bind the Vue instance to external var changes outside the DOM (outside the Vue instance), and have Vue react to this. The means that when we do vbuserId = "some new value" in the console, the avatar will change. The code below works, but only because it polls vbuserId every second.

We are still searching for a way to do this ....

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/",
      id: vbuserId,
      avatar: vbtheURL
    };
  },
  computed:{
     theavatar: function () {
      if ( this.id > 0 )
        return '<img id="avatar-img" src="' + this.avatar + '"></img>';
      else   
       return '<i id="avatar-icon" class="fas fa-user"></span>';
    }
  },
  methods: {
    OpenMemberPanel() {
      if ( this.id > 0 )
        openMemberPanel();
      else
        openLogin();
    },
    GetUID() {
       this.id = vbuserId;
    }
  },
   created(){
    var timerID = setInterval(this.GetUID, 1000);
  }

});

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

 

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

LEARN ABOUT CENTOS

pam_console_apply

pam_console_apply(8)					   System Administrator's Manual				      pam_console_apply(8)

NAME

       pam_console_apply - set or revoke permissions for users at the system console

SYNOPSIS

       pam_console_apply [-f <fstab file>] [-c <console.perms file>] [-r] [-t <tty>] [-s] [-d] [<device file> ...]

DESCRIPTION

       pam_console_apply is a helper executable which sets or resets permissions on device nodes.
       If  /var/run/console.lock  exists,  pam_console_apply  will grant permissions to the user listed therein.  If the lock file does not exist,
       permissions are reset according to defaults set in console.perms files, normally configured to set permissions on devices so that root owns
       them.

       When  initializing  its	configuration  it first parses the /etc/security/console.perms file and then it searches for files ending with the
       .perms suffix in the /etc/security/console.perms.d directory. These files are parsed in the lexical order in "C" locale.  Permission  rules
       are appended to a global list, console and device class definitions override previous definitions of the same class.

ARGUMENTS

       -c     Load other console.perms file than the default one.

       -f     Load other fstab file than the default one (/etc/fstab).

       -r     Signals  pam_console_apply to reset permissions.	The default is to set permissions so that the user listed in /var/run/console.lock
	      has access to the devices, and to reset permissions if no such file exists.

       -t     Use <tty> to match console class in console.perms file. The default is tty0.

       -s     Write error messages to the system log instead of stderr.

       -d     Log/display messages useful for debugging.

       The optional <device file> arguments constrain what files should be affected by pam_console_apply. If they aren't specified permissions are
       changed on all files specified in the console.perms file.

FILES

       /var/run/console.lock
       /etc/security/console.perms
       /etc/security/console.perms.d/50-default.perms

SEE ALSO

       pam_console(8)
       console.perms(5)

BUGS

       Let's hope not, but if you find any, please report them via the "Bug Track" link at http://bugzilla.redhat.com/bugzilla/

AUTHORS

       Nalin Dahyabhai <nalin@redhat.com>, using code shamelessly stolen from parts of pam_console.
       Support of console.perms.d and other improvements by Tomas Mraz <tmraz@redhat.com>.

Red Hat 							     2005/5/2						      pam_console_apply(8)
All times are GMT -4. The time now is 11:11 AM.
Unix & Linux Forums Content Copyright 1993-2022. All Rights Reserved.
Privacy Policy