I wanted to ask if it is possible to pass data to my methods via router link in vue. I am a beginner who made a .net core api with the help of a youtube video and then call it in a html with vue/javascript. Now I have different components and each one is a separate js file which I don't find very nice because actually in all of them the same thing happens.
For example (html router link):
<li class="nav-item m-2">
<router-link class="btn btn-light btn-outline-primary" to="/home">GM10</router-link>
</li>
goes to home compnent which calls the api here and stores the json in chashier:
data(){
return{
chasier:[],
}
},
methods:{
refreshData(){
axios.get(variables.API_URL+'Store10')
.then((response)=>{
this.chasier=response.data
})
}
},
Second router link would be
<router-link class="btn btn-light btn-outline-primary" to="/GM11">GM11</router-link>
which goes to component gm11 but home and gm11 are the same except in gm11 it says axios.get(variables.API_URL+'Store11')
I would like to use only one js so that the router link "to" is the same for both but depending on which router link you press the url ending changes.
I tried already some stuff from the web but I nothing is really working. I lack of understanding and only the Youtube Video was not enough
Related
Basically I'm trying to remake some simple web page that I have initially created with HTML and CSS to be working rather on React. I managed to redo the page to correctly display when it was moved into React, however I don't really understand why the navigation links that I have on top do not take me to the corresponding section on the same page anymore as well as why the external links to the project sites also stopped working.
Here is the project link code:
import React from "react";
export default function ProjectTile(props) {
return (
<div className="project-tile" id={props.id}>
<a href={props.href} target="_blank" id={props.link_id}>
<img
className="project_screenshot"
src={props.img_src}
alt={props.img_alt}
/>
<p className="project_name">
<span className="brackets"><</span> {props.title}{" "}
<span className="brackets">/></span>
</p>
</a>
</div>
);
}
All props are getting mapped and loaded from the array with corresponding data where each object looks like this:
{
id: "tribute_page",
link_id: "https://codepen.io/konstantinkrumin/full/PooYQbG",
img_src: "https://i.imgur.com/ynRuzOQ.png",
img_alt: "tribute_page_screenshot",
title: "Tribute Page"
}
The navigation links used are the following:
import React from "react";
export default function Navbar() {
return (
<nav id="navbar">
<a className="nav-link" href="#welcome-section">
About
</a>
<a className="nav-link" href="#projects">
Projects
</a>
<a className="nav-link" href="#contact">
Contact
</a>
</nav>
);
}
And each section they refer to have an id corresponding to the href indicated above.
Here if the link to this project on codesandbox
P.S. Everything used to work correctly when it was on HTML.
Also the contact links that seem to be set in similar way as project links are working.
Here are two things I think I found out:
In the ProjectTile.js file, replace href = {props.href} by href={props.link_id and now project opens in codepen.
About the jump link you have made in nav-bar, I think it's because of problem of codesandbox.
If you manage to make your url to https://op6gq.csb.app#projects instead of https://op6gq.csb.app/#projects. That's gonna work.
Or directly visiting https://op6gq.csb.app/#welcome-section jump link too works well.
It looks like there's no href prop. Sounds like what you want is something like
href={`#${props.id}`}
which would evaluate to href="#tribute_page" in this example.
You Have to try that your page url become:
https://op6gq.csb.app#welcome-section
Not:
https://op6gq.csb.app/#welcome-section
please attend to that / in address bar!
Im looking to run a function that corresponds with each router link with that has the default class 'router-link-active'.
For simplicity I would like to replicate basic CSS class/style change for each active link using Javascript or Vue.js Directives.
CODEPEN
<router-link to="/1" class="link ROUTER-LINK-ACTIVE">one
<span style="change this within function when active"></span>
</router-link>
thank you for any insight )
In my MEAN application for nested views I am using angular-route-segment. Everything works fine with the nested views except for the initial default screen.
my first page (index.html) contains header & footer with buttons connect & disconnect. This theme is common in all the pages.
once I click connect, it should load all list of todos (this is where I get problem).
Here is my controller config code
app.config(function ($routeSegmentProvider) {
$routeSegmentProvider.
when('/todos', 's1').
when('/todo/:id', 's2').
when('/task/:id', 's2.task').
segment('s1',{
templateUrl: "public/views/todos.html"
}).
segment('s2',{
templateUrl : "public/views/todo.html"
}).
within().
segment('home',{
default:true,
templateUrl : "public/views/default.html"
}).
segment('task', {
templateUrl: "public/views/task.html",
dependencies: ['id']
})
})
index.html
<html ng-app="Todo">
<body ng-controller="ConnectioCtrl">
<button class="btn btn-primary" ng-click="connect()">Connect</button>
<button class="btn btn-danger" ng-click="disconnect()">Disonnect</button>
<div ng-if="connected" ng-controller="ToDoListCtrl">
Todo List
<div app-view-segment="0"></div>
</div>
</body>
</html>
This perfectly works fine for me. but the problem here is I am forced to give Todo List which is a hyperlink. I don't want this hyperlink to be present in my screen. All that I need is, when ever I click on connect it executes a function which checks all the conditions and returns connected = true, and then by default it should go to list of todos rather than giving a hyperlink Todo list to click on.
please let me know if I need to provide any additional info to bring clarity on this query.
thanks in advance!!
I have a simple jquery ajax that fetch inline HTML code from an API
$.ajax({
url: url,
headers: { 'Accept': 'application/javascript' },
dataType: 'html',
beforeSend: function(){
$('.load-more').slideDownThenFadeIn(100);
}
})
.done(function(data) {
$('#container').append(data);
});
It's a simple button not built with React
<a class="btn load-more" href="javascript:void(0)">Load More</a>
The Ajax call invokes the API to render html code back to the server...
It renders back the html code below
<div data-react-class=\"My.React.Base.PostButton\" data-react-props=\"{"buttonText":"Contact me","buttonClass":"btn btn-clear btn-block","business":{"id":86055,"business_name":"Buy Plan","mobile_phone":"0412 345 678"},"cta":"card","slideTitle":null,"showPostJobExclusively":true,"showToAll":false,"CallCustomer":false}\"></div>
but react component did not render...
I'm actually expecting the react component to be rendered, but below is missing after appending the ajax data
<a data-reactroot="" class="btn btn-clear btn-block" href="#"><span><!-- react-text: 3 -->Contact me<!-- /react-text --></span></a>
Am I missing something here?
EDIT:
<div class="card"><div class="col-xs-6 pr8"><div data-react-class="SS.React.Base.ProfileJobPostButton" data-react-props="{"buttonText":"Contact me","buttonClass":"btn btn-clear btn-block","business":{"id":129679,"business_name":"IMC Cleaning Services","mobile_phone":"6197877882"},"cta":"business_directory_card","slideTitle":null,"showPostJobExclusively":true,"showPostJobToAll":false,"showCallBusiness":false}"></div></div>
the React component from API looks something like below
render() {
return(
<a className={this.props.buttonClass} href="#" onClick={this.handleOnClick}>
{
this.state.loading ?
<My.React.Base.Spinner spinnerColour='white-spinner' />
:
<span>
{this.props.buttonText}
{this.props.withArrow && <i className="ficon-arrow-right-shaft pl10" />}
</span>
}
</a>
)
}
You are using a wrong approach. First of all you should not force render html code inside the react components. so usually APIs should return data and html should be the part of react component.
But anyways if you are using this approach you should use dangerouslySetInnerHtml attribute of react refer the link https://facebook.github.io/react/docs/dom-elements.html
Thats the react way of modifying dom or appending html to dom nodes' html.
Also you can modify the component after the component is mounted. So if you are making API call after your component has mounted which usually is the case, you can store the html in state, and using the aforesaid attribute dangerouslySetInnerHTML, you can set its value to state variable.
I recently began using $location.path() within ng-click functions rather than simply referencing a path within the href of an a tag.
My reasons for doing so:
Preference to have ALL logic, including paths navigated to moved out of my views (this may be a bit extreme).
For rare instances where multiple html templates reference the same controller I can change $location.path() once rather than having to remember to update corresponding href's within each template.
So instead of:
<a class="button button-balanced" href="/signup">Sign up</a>
I have:
<button class="button button-balanced" ng-click="goToSignup()">Sign up</button>
and in my controller:
$scope.goToSignup = function() {
$location.path('/signup');
}
My question is, are there drawbacks to setting my Angular app up this way? (note: I'm mainly building Ionic hybrid mobile apps)
Preference to have ALL logic, including paths navigated to moved out of my views (this may be a bit extreme).
You can do with your all logic and paths navigated by using same link button
<a href="/signup" class="button button-balanced" ng-click="SignUpFunc()>Sign Up</a>
the a tag is first execute the click function, then execute the href call. So you can do it by link button.
For rare instances where multiple html templates reference the same controller I can change $location.path() once rather than having to remember to update corresponding href's within each template.
If you using menu option, you can use link button
but if you navigate one controller to another controller, then you should use the
$location.path('/signup');
I also used similar logic in my project.It works fine for me.
<button class="button" ng-click="go('view')">Next Page</button>
$scope.go = function ( path ) {
$location.path( path );
};