I need to call this method in vue.js file:
par() {
this.jsontocsv++
}
but i'm triying to call whith a but i dont know how i can
<li> <a v-on:click="par" href="#"> Example 1</a></li>
Invoke the method using ():
<li> <a v-on:click="par()" href="#"> Example 1</a></li>
Related
I have an application in vue in which I show different links in the header.
depending on the environment the root of the link varies, so I have saved an environment variable with the value of this root of the link.
I import it in the component to use the reference to this variable, but I can't find the way to include it in the href tag.
in my component's script I import the config file where the variable is declared and return
<script>
import Config from './../../config.js';
export default {
data: function () {
return {
hoverHome: false,
testUrl: Config.TEST_URL
}
},
the value brought by the environment variable at this time is https://www.test.sp, and in my template I try to use it but I don't find how to do it neither in case of being the only value nor combining it with a url termination
<li class="nav-item">
<a class="nav-link head" href=testUrl>Business</a>
</li>
<li class="nav-item">
<a class="nav-link head" href=testUrl/shops>Shops</a>
</li>
how can i use this variable inside the href tag?
You need to bind the href value using the v-bind:href or shortly :href for v-bind
So simply you can bind any variable that has some link to your href like
<a v-bind:href="'/anylink/' + testUrl">
You need to use v-bind: or its alias :. For example,
<li class="nav-item">
<a class="nav-link head" v-bind:href="testUrl">Business</a>
</li>
<li class="nav-item">
<a class="nav-link head" v-bind:href="testUrl + '/shops'">Shops</a>
</li>
or
<li class="nav-item">
<a class="nav-link head" :href="testUrl">Business</a>
</li>
<li class="nav-item">
<a class="nav-link head" :href="testUrl + '/shops'">Shops</a>
</li>
See How to pass a value from Vue data to href?
I was trying to move a sidebar navigation component to React.js and the javascript inside the onclick is not working anymore. So the sidebar shows but nothing happens when it is clicked.
Edit: This is the code that works fine with HTML:
<div id="sidebar">
<div class="toggle-btn" onclick="document.getElementById('sidebar').classList.toggle('active');">
<span></span>
<span></span>
<span></span>
</div>
<ul>
<a href="index.html" class="animsition-link">
<li>Home</li>
</a>
<a href="about.html" class="animsition-link">
<li>About</li>
</a>
<a href="resume.html" class="animsition-link">
<li>Resume</li>
</a>
<a href="projects.html" class="animsition-link">
<li>Projects</li>
</a>
</ul>
</div>
Edit: React Snippit (part of react code showing render)
import React, { Component } from 'react';
class Header extends Component {
render() {
if(this.props.data){
var name = this.props.data.name;
var occupation= this.props.data.occupation;
var description= this.props.data.description;
var city= this.props.data.address.city;
var networks= this.props.data.social.map(function(network){
return <li key={network.name}><a href={network.url}><i className={network.className}></i></a></li>
})
}
return (
<header id="home">
<nav id="nav-wrap">
<div id="sidebar" ref="sidebar">
<div class="toggle-btn" onChange={this.refs.state.active}>
<span></span>
<span></span>
<span></span>
</div>
<ul>
<a href="index.html" class="animsition-link">
<li>Home</li>
</a>
<a href="about.html" class="animsition-link">
<li>About</li>
</a>
<a href="resume.html" class="animsition-link">
<li>Resume</li>
</a>
<a href="projects.html" class="animsition-link">
<li>Projects</li>
</a>
</ul>
</div>
You're passing a string instead of JavaScript, and using the wrong keywords. Make sure you use the react specific terminology of onClick={} and className="".
Edit: Also it looks like you're trying to use refs incorrectly. You shouldn't need to use a ref here at all as the onChange function would be available in the react class. Hard to tell exactly what you're trying to do without all the code, though.
Second edit:
Okay with your updated code I can see a bit more of what is wrong. There are a few issues you've got here and I'll try to cover them all.
Not using react keywords. Things like onclick and class need to change to the react specific onClick and className to work.
You aren't using refs correctly. Refs, in their most basic sense, are used to modify a react component after it has been mounted. I assume you're trying to call a function here, in which case since I cannot see it defined here I can only assume it was passed in as a prop. If this is true you'll need to call it using this.props.blah.
All your assignments to variables are within the scope of an if statement, so they aren't going to be available outside that scope. If you need to use them in your code you'll have to define the variables before the if block.
I am building a site using Angular 6 and have been stuck for a few days now on a problem. I am trying to change text color (list items) on a navbar based on the active page. I have seen examples on how to do this using AngularJS and javascript. I have come across the routerActiveLink library documentation at https://angular.io/api/router/RouterLinkActive library for Angular 5+ which seems to be a simple solution, but it is not working for me. I have tried many different examples I have seen online and none have worked. Am I missing something? Here are some code snippets:
header.component.html
<div class="navbar-collapse collapse navbar-nav pull-right" id="navbar">
<ul class="navbar-nav" style="align-items: center;">
<li class="main-links" [routerLinkActive]="['active']">
<a class="al" [routerLink]="['home']" id="home-button" href="home">Home</a>
</li>
<li class="main-links">
<a class="al" routerLink="/about" routerLinkActive="active" id="about-button" href="about">About</a>
</li>
<li class="main-links">
<a class="al" id="blog-button" href="https://tspace.web.att.com/blogs/financelive/?lang=en_us" target="_blank">Blog</a>
</li>
<li class="main-links">
<a class="al" routerLink="/albums" routerLinkActive="active" id="albums-button" href="albums">Platinum Albums</a>
</li>
<li class="main-links">
<a class="al" routerLink="/programs" routerLinkActive="active" id="programs-button" href="programs">Development Programs</a>
</li>
<li class="main-links">
<a class="al" routerLink="/contact" routerLinkActive="active" id="contact-button" href="contact">Contact Us</a>
</li>
</ul>
This is my declaration for active in header.component.less:
.active {
color: #009fdb;
font-family: font-bold;
}
When I use [routerLinkActive] with the brackets, the page does not load at all, and when I user routerLink and routerLinkActive in the a tag, it does not register at all. Are there some imports I am missing. I have tried importing router, routerlinkactive, and routerlink from #angular/core.
I purposely left both different styles of using routerLinkActive in the code example. It was not like this when I actually ran it.
I have Angular 6, bootstrap 4.1.1, jquery 3, and popperjs installed.
After further review, I have discovered that routerLinkActive works correctly on elements inside the root app-module. I created a new module for my header and footer called UiModule and the functionality is not working inside the header. Any ideas on how to get routerLinkActive to work on this module?
Try importing RouterModule into your UiModule, it won't be able to make use of that imported in your app.module.ts file
import { RouterModule } from '#angular/router';
// some other imports here
#NgModule({
imports: [
RouterModule
],
exports: [
// export UI components
],
declarations: [
// declare UI components
]
})
When I had this issue, I imported everything right. It took me days before I figured the problem was from how I structured my HTML
<li class="nav-list">
<a routerLinkActive="active"
[routerLinkActiveOptions]="{exact: true}"
routerLink="/"
href="/">
<i class="material-icons nav-link-icon">person</i>
<span class="nav-link-text">Profile</span>
</a>
</li>
The problem there was that I was watching for the .active class to appear in the li element while it had always been appearing in the anchor element. Just be sure that is not what is happening in your case.
So I have this code snippet in spring mvc
<a class="nav-item is-hidden-mobile is-active roboto strong letter-space-1" href="">HOME</a>
<a class="nav-item is-hidden-mobile roboto strong letter-space-1" href="about.jsp"> ABOUT </a>
<a class="nav-item is-hidden-mobile roboto strong letter-space-1" href=""> CONTACT </a>
But when I click on the ABOUTon my landing page, it won't redirect, instead it displays error code 404. Are there other things to fix before I can redirect there, besides in the html file?
Try to create an endpoint in Controller that will return your about.jsp on some URL like that:
#Controller
public class HelloController {
#RequestMapping("/hello-about")
public String getHelloAbout(ModelMap model) {
return "/WEB-INF/jsp/about.jsp";
}
}
And change your link to point not to the about.jsp file but to the endpoint "/hello-about".
<a class="nav-item is-hidden-mobile roboto strong letter-space-1" href="/hello-about"> ABOUT </a>
Dev and libraries
ASP.NET 5
Razor
KnockoutJS
I am building a dashboard and I want to create a knockoutjs filter of when you switch clients. The data will update for just that client. The dropdown for the client will be in the _Layout.cshtml file. Here is the code I have for that:
_Layout.cshtml
<ul id="clients" class="dropdown-menu dropdown-user" data-bind="foreach: storeList()">
<li>
<a data-bind="attr: {href: '#'}, text: storeList.ClientName"></a>
</li>
</ul>
_Dashboard.cshtml
$.getJSON("/System/GetClients", function (clientList) {
function Event(event) {
var self = this;
self.event = ko.observable(event);
}
function EventsModel() {
...
self.storeList = ko.computed(function () {
return clientList;
});
$('#clients').unbind();
ko.applyBindings(self, $('#clients'));
...
}
ko.applyBindings(new EventsModel());
});
I think the problem lies is the foreach: storeList is bound before the data is received. When I look at the page there are no errors in the console. The dropdown has 6 li > a elements as it should but they are not rendered
<ul id="clients" class="dropdown-menu dropdown-user" data-bind="foreach: storeList()">
<li>
<a data-bind="attr: {href: '#'}, text: storeList.ClientName" href="#"></a>
</li>
<li>
<a data-bind="attr: {href: '#'}, text: storeList.ClientName" href="#"></a>
</li>
<li>
<a data-bind="attr: {href: '#'}, text: storeList.ClientName" href="#"></a>
</li>
<li>
<a data-bind="attr: {href: '#'}, text: storeList.ClientName" href="#"></a>
</li>
<li>
<a data-bind="attr: {href: '#'}, text: storeList.ClientName" href="#"></a>
</li>
</ul>
Here is the stringify version of the clientList
[{"ClientName":"admin","Description":"Admin Sample Account","Enable":true},{"ClientName":"DSG","Description":"DSG TEST","Enable":true},{"ClientName":"Pet","Description":"PetTEST","Enable":true},{"ClientName":"Test","Description":"Test Sample Account","Enable":true},{"ClientName":"Toys","Description":"Toy's","Enable":true}]
Not sure what is wrong
storeList is a computed observable. As such, it's OK to treat it as a function in the foreach. Your mistake occurs on the a tags.
you're calling again storeList, which is wrong. Apart, you're using it as a getter property, but it's a function.
Just use a with the ClientName property, without clientList.ClientName and you're done.
Knockout is rendering the elements correctly,as you can see a list of li elements rendered