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 303025650 by Neo on Thursday 8th of November 2018 10:15:10 AM
Old 11-08-2018
Thanks Scott... Sorry, I cannot get your suggestions to work.

This "almost" works:

Code:
Vue.component("unix-navbar", {
  template: `<div class="neo-table-border vuenavbar"> <div style="margin-bottom:10px;padding-top:13px;"> <a class="vuenavbarhome" :href="url">{{name}}</a></div> <div id="avatar"  v-on:click="OpenPanel()" style="cursor:pointer;" v-html="theicon" align="center"></div> </div>`,
  data() {
    return {
      thehtml:
        '<span  class="alt1 nav-avatar"><i style="color:#170072;" class="fas fa-user"></i></span>',
      name: "The UNIX and Linux Forums",
      url: "https://www.unix.com/"
    };
  },
  computed: {
    id() {
      return vbuserId;
    },
    theURL() {
      return vbtheURL;
    },
    theavatar() {
      return '<img src="' + this.theURL + '" width="60px"></img>';
    },
    theicon() {
      //if (this.id > 0)
      // return '<img src="' + this.theURL + '" width="60px"></img>';
      return this.thehtml;
    }
  },
  methods: {
    OpenPanel() {
      if (this.userId > 0) openMemberPanel();
      else openLogin();
    }
  }
});

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

But the above code only works for the "theicon" text case in the v-html bindings .... if I change it to "theavatar" in the v-html bindings, it breaks.

In this code, the conditional works based on the vbuserId computed to id in vue.... but the problem that remains is that the "theavatar" case, breaks vue when it does the v-html binding.
 

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 DEBIAN

test::html::w3c

Test::HTML::W3C(3pm)					User Contributed Perl Documentation				      Test::HTML::W3C(3pm)

NAME

       Test::HTML::W3C - Perform W3C HTML validation testing

SYNOPSIS

	 use Test::HTML::W3C tests => $test_count;
	 # or
	 use Test::HTML::W3C 'show_detail';
	 # or when using both
	 use Test::HTML::W3C tests => $test_count, 'show_detail';

	 is_valid_markup($my_html_scalar);

	 is_valid_file("/path/to/my/file.html");

	 is_valid("http://example.com");

	 # Get the underlying WebService:;Validator::W3C::HTML object
	 my $validator = validator();

DESCRIPTION

       The purpose of this module is to provide a wrapper around the W3C that works with the Test::More testing framework.

ABUSE

       Please keep in mind that the W3C validation pages and services are a shared resource. If you plan to do many many tests, please consider
       using your own installation of the validation programs, and then use your local install by modifying the local validtor:

	 my $v = validator();
	 $v->validator_uri($my_own_validator);

       See the documentation for WebService:;Validator::W3C::HTML and the W3C's site at http://validator.w3.org/ for details

       validator();
	   Description: Returns the underlying WebService::Validator::HTML::W3C object

	   Parameters: None.

	   Returns: $validator

       plan();
	   Description: Access to the underlying "plan" method provided by Test::Builder.

	   Parameters: As per Test::Builder

       is_valid_markup($markup[, $name]);
	   Description: is_valid_markup tests whether the text in the provided scalar value correctly validates according to the W3C
	   specifications. This is useful if you have markup stored in a scalar that you wish to test that  you might get from using LWP or
	   WWW::Mechanize for example...

	   Parameters: $markup, a scalar containing the data to test, $name, an optional descriptive test name.

	   Returns: None.

       is_valid_file($path[, $name]);
	   Description: is_valid_file works the same way as is_valid_markup, except that you can specify the text to validate with the path to a
	   filename. This is useful if you have pregenerated all your HTML files locally, and now wish to test them.

	   Parameters: $path, a scalar, $name, an optional descriptive test name.

	   Returns: None.

       is_valid($url[, $name]);
	   Description: is_valid, again, works very similarly to the is_valid_file and is_valid_file, except you specify a document that is
	   already online with its URL. This can be useful if you wish to periodically test a website or webpage that dynamically changes over
	   time for example, like a blog or a wiki, without first saving the html to a file using your browswer, or a utility such as wget.

	   Parameters: $url, a scalar, $name, an optional descriptive test name.

	   Returns: None.

       diag_html($url);
	   Description: If you want to display the actual errors reported by the service for a particular test, you can use the diag_html
	   function.  Please note that you must have imported 'show_detail' for this to work properly.

	     use Test::HTML::W3C 'show_detail';

	     is_valid_markup("<html></html">, "My simple test") or diag_html();

	   Parameters: $url, a scalar.

	   Returns: None.

SEE ALSO

       Test::Builder::Module for creating your own testing modules.

       Test::More for another popular testing framework, also based on Test::Builder

       Test::Harness for detils about how test results are interpreted.

AUTHORS

       Victor <victor73@gmail.com> with inspiration from the authors of the Test::More and WebService::Validator::W3C:HTML modules.

BUGS

       See http://rt.cpan.org to report and view bugs.

COPYRIGHT

       Copyright 2006 by Victor <victor73@gmail.com>.

       This program is free software; you can redistribute it and/or modify it under the same terms as Perl itself.

       See http://www.perl.com/perl/misc/Artistic.html

perl v5.12.4							    2011-08-22						      Test::HTML::W3C(3pm)
All times are GMT -4. The time now is 08:52 AM.
Unix & Linux Forums Content Copyright 1993-2022. All Rights Reserved.
Privacy Policy