I didn't get the issue here.
When I use
return window.location.href = 'https://www.google.com';
it works fine.
However, if I use my string variable. It doesn't work.Reloads back to page.
return window.location.href = this.navigationURL;
Full code:-
<table class="">
<tr
class="cursor-pointer"
v-for="currentView in authenticationMethodsAvailable"
:key="currentView.id"
>
<td class=""> (HERE)
**<button type= "button" #click="authenticationChoice(currentView['name'])" >**
<img
class="w-12 inline-block align-middle"
:src="showAuthenticationIcon(currentView['gitType'])"
/>
</button>
</td>
</tr>
</table>
The function being triggered
authenticationChoice(recieved) {
this.$store.state.gitSourceAuthenticationChoice = recieved;
this.$store.dispatch("gitSourceAuthenticationURL").then((response) => {
this.navigationURL = response["oauth2_redirect"];
console.log(this.navigationURL)
});
return this.navigationURL ;
// return window.location.href = String(this.navigationURL);
},
Remove the return which's breaking the code and move the code inside the then block as follows :
authenticationChoice(recieved) {
this.$store.state.gitSourceAuthenticationChoice = recieved;
this.$store.dispatch("gitSourceAuthenticationURL").then((response) => {
this.navigationURL = response["oauth2_redirect"];
console.log(this.navigationURL)
window.location.href = String(this.navigationURL);
});
},
Related
I'm working with Laravel and Vue to make a single page web application. I've used Vue before to get the data from a database using a controller with no problem, but for some reason I'm now only getting a seemingly infinitely nested JS object that has getter and setter methods stored in each parent object instead of the data I queried. I've seen other people with similar issues, but the solutions that worked for them didn't work for me. For example, some people used JSON.parse(JSON.stringify(response.data)); to get just the raw data, but this doesn't work when I attempt to store it in this.actions. Here is my index method in my ActionLogController
public function index($url)
{
$companyName = explode("/", $url);
if(Auth::check())
{
$company = Company::where('name', '=', strtolower($companyName[count($companyName) - 1]))->first();
// If sortby not empty
$sortby = "created_at";
//assume desc (most recent)
$sortdirection = 'desc';
if(request()->has('sortdirection') && request()->sortdirection == 'asc')
{
$sortdirection = 'asc';
}
// if sortby is set
if(request()->has('sortby'))
{
$sortby = request()->sortby;
switch($sortby)
{
case "date":
$sortby = "string_date";
break;
case "company":
$sortby = "company_name";
break;
case "name":
// do nothing
break;
case "communication-type":
$sortby = "communication_type";
break;
case "contact":
// do nothing
break;
case "subject":
$sortby = "status";
break;
case "assigned-to":
$sortby = "assigned_to";
break;
case "action":
$sortby = "action_item";
break;
case "assigned-to":
$sortby = "assigned_to";
break;
default:
$sortby = 'created_at';
break;
}
}
}
if($sortdirection == 'asc') {
return Auth::user()->actionLogs
->where('activity_key', '=', '1,' . $company->id)
->sortBy($sortby);
}
return Auth::user()->actionLogs
->where('activity_key', '=', '1,' . $company->id)
->sortByDesc($sortby);
}
This is my Vue component to get the data from the controller. I know the template code works, because it worked fine when I sent it dummy data before pulling the data from the controller.
<style scoped>
.action-link {
cursor: pointer;
}
.m-b-none {
margin-bottom: 0;
}
</style>
<template>
<div class="table-responsive">
<table class="table table-striped table-sm">
<thead>
<tr>
<th><a id="sortby-date" class="action-nav" href="?sortby=date&sortdirection=desc">Date</a></th>
<th><a id="sortby-company" class="action-nav" href="?sortby=company&sortdirection=desc">Company</a></th>
<th><a id="sortby-name" class="action-nav" href="?sortby=name&sortdirection=desc">Name</a></th>
<th><a id="sortby-communication-type" class="action-nav" href="?sortby=communication-type&sortdirection=desc">Communication Type</a></th>
<th><a id="sortby-contact" class="action-nav" href="?sortby=contact&sortdirection=desc">Contact</a></th>
<th><a id="sortby-subject" class="action-nav" href="?sortby=subject&sortdirection=desc">Subject</a></th>
<th><a id="sortby-action" class="action-nav" href="?sortby=action&sortdirection=desc">Comment/Action Item</a></th>
<th>Archive</th>
<!-- check if admin?? -->
<th><a id="sortby-assigned-to" class="action-nav" href="?sortby=date&sortdirection=desc">Assigned To</a></th>
<!-- /check if admin?? -->
</tr>
</thead>
<tbody v-if="actions.length > 0">
<tr v-for="action in actions">
<td>
{{ action.string_date }}
</td>
<td>
{{ action.company_name }}
</td>
<td>
{{ action.name }}
</td>
<td>
{{ action.communication_type }}
</td>
<td>
{{ action.contact }}
</td>
<td>
{{ action.status }}
</td>
<td>
{{ action.action_item }}
</td>
<td>
<input type="checkbox" :id="'archive-' + action.id" class="archive" :name="'archive-' + action.id">
</td>
<td :id="'record-' + action.id" class="assigned-to">
{{ action.assigned_to }}
</td>
</tr>
</tbody>
</table>
<p id="add-action" style="text-align: center;">
<button id="action-log-add" class="btn btn-sm btn-primary edit">Add Item</button>
<button id="action-log-edit" class="btn btn-sm btn-danger edit">Edit Items</button>
</p>
</div>
</template>
<script>
export default {
data() {
return {
actions: []
}
},
methods: {
getActionLogs(location) {
var company = location.split("/");
company = company[company.length - 1];
axios.get('/action-log/' + company)
.then(response => {
this.actions = response.data;
console.log(this.actions);
})
.catch(error => {
console.log('error! ' + error);
});
}
},
mounted() {
this.getActionLogs(window.location.href);
}
}
</script>
This is the output I get in the browser console
{…}
1: Getter & Setter
2: Getter & Setter
3: Getter & Setter
4: Getter & Setter
5: Getter & Setter
6: Getter & Setter
7: Getter & Setter
8: Getter & Setter
9: Getter & Setter
10: Getter & Setter
__ob__: Object { value: {…}, dep: {…}, vmCount: 0 }
<prototype>: Object { … }
I was expecting to see the normal array of data that gets returned, but this is what shows up instead and then won't update the component with the data. I'm new to Vue, so maybe there's something really easy I missing, but I can't seem to figure this out.
Writing up my comments above as a sort of canonical answer to this as it keeps coming up...
What you're looking at is how Vue proxies your data to make it reactive. This is because you're using console.log() on a Vue instance data property.
When you assign values to a data property, it is transformed to an observable so Vue can treat it reactively. I suggest you forget about trying to console.log() anything assigned to this and use the Vue Devtools browser extension to inspect your components and their data if you're having trouble rendering the response.
Please note, there is nothing wrong here.
I have a blade where I'm using a multiselect as dropdown, and when a selection is chosen it fires off an axios call which returns a json_encoded data set.
The blade is here:
<div class="uk-width-1-2">
<multiselect
label="name"
track-by="value"
v-model="CategoryValue"
:options="CategoryOptions"
:multiple="false"
:taggable="true"
#tag="getItems"
#input="getItems"
#search-change="val => read(val)"
:preselect-first="false"
:close-on-select="true"
:preserve-search="true"
placeholder="Choose Category..."
></multiselect>
<div style="border:1px solid black; height:80%; margin-top:15px;">
<table>
<thead>
<tr>
<th>Text</th>
</tr>
</thead>
<tbody v-for="build in buildsList">
<tr>
<td>#{{ build.build_code_formatted }}</td>
</tr>
</tbody>
</table>
</div>
</div>
new Vue({
data() {
return{
buildsList: {},
}
},
methods: {
getItems() {
console.log(this.CategoryValue.value);
axios.post('/getItems',{
categoryCode: this.CategoryValue.value,
})
.then(function (response){
this.buildsList = response.data;
})
.catch(function (error) {
console.log(error);
});
}
}
})
And upon the callback I get a 200 and It does indeed log the buildsList so I know it is returning all of my data properly. However, when I get my data back in the console, it's not populating the html.
When I inspect the page elements there is no table body or data rows.
Also, my controller is returning this:
unction getItems(Request $request){
return json_encode($this->itemService->getItems($request->Code));
}
and itemService is doing this:
$results = $pdoStatement->fetchAll();
foreach ($results as &$r)
$r = (object) $r;
return $results;
So my data is coming back upon axios Call and it is formatted properly, but I just need to figure out why my table isn't dynamically populating
Please try to change this part
this.buildsList = response.data;
to
.then((response) => {
let data = response.data;
for (let key in data) {
if(data.hasOwnProperty(key)) {
this.$set(this.buildsList, key, data[key]);
}
}
})
I'm using vue to create a page where I list all users and if I click on the edit button the details of that user then gets shown
next to the list.
What I'm trying to do is, if I update a user and click save then the user details in the list needs to change.
The problem I'm having is that I'm not able to get the details to change in the list after I've saved.
My vue
<template>
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-7">
<table class="table table-striped table-sm mt-2">
<thead>
<tr>
<th>Name</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="user in displayAllUsers">
<td>{{ user.name }}</td>
<td>
<button class="btn btn-sm btn-success" #click="manageUser(user)">Edit</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-5" v-if="user != null">
<div class="card">
<div class="card-header">
<h4 class="card-title mb-0">Manage {{ user.name }}</h4>
</div>
<div class="card-body">
<table class="table">
<tr>
<th>Name</th>
<td>
<input type="text" v-model="user.name">
</td>
</tr>
</table>
</div>
<div class="card-footer">
<button #click="updateUser()"class="btn btn-success"><i class="fa fa-save"></i> Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
components: {
},
data: function () {
return {
users: [],
user: null
}
},
computed: {
displayAllUsers(){
return this.users;
}
},
methods: {
manageUser(user){
axios.get('/admin/user/'+user.id).then((response) => {
this.user = response.data.user;
});
},
updateUser(){
axios.put('/admin/user/'+this.user.id, {
name: this.user.name
}).then((response) => {
this.users = response.data.user;
});
}
},
mounted() {
axios.get('/admin/users').then((response) => {
this.users = response.data.users;
});
}
}
</script>
There are two possible solutions.
The first is to run this code at the end of the updateUser method:
axios.get('/admin/users').then((response) => {
this.users = response.data.users;
});
The second is to use a state manager like Vuex.
The first scenario will fetch again your users data from the remote API and will update your view with all your users.
With the second scenario, you will handle your application state way much better than just using the data attribute of your page module, but in the background, it is more or less the same as the first solution I suggest.
To update the current user only in the table you could do something like that at the end of the updateUser method:
let userIdx = -1;
for(let idx = 0, l = this.users.length; idx < l; idx++) {
if ( this.user.id === this.users[idx].id ) {
userIdx = idx;
break;
}
}
if ( -1 !== userIdx ) {
this.users[userIdx] = this.user;
this.user = {};
}
Other than your problem, it seems like you don't need this code:
computed: {
displayAllUsers(){
return this.users;
}
},
You could remove this code, and instead use this code in the HTML part:
<tr v-for="user in users">
For your updateUser function you could just return the modified user in the same format that you have for all the users in you user list and update the user by index. This is presuming that the user you want to update is in the users array to start with.
updateUser() {
axios.put('/admin/user/'+this.user.id, {
name: this.user.name
}).then((response) => {
const updatedUser = response.data.user;
// Find the index of the updated user in the users list
const index = this.users.findIndex(user => user.id === updatedUser.id);
// If the user was found in the users list update it
if (index >= 0) {
// Use vue set to update the array by index and force an update on the page
this.$set(this.users, index, updatedUser);
}
});
}
This could be a good starting point.
Unrelated Note:
You can add your mounted function code to its own method, for example
getUsers() {
axios.get('/admin/users').then((response) => {
this.users = response.data.users;
});
}
then
mounted() {
this.getUsers()
}
this makes it a little cleaner and easier if you ever need to get the users again (example: if you start having filters the user can change)
As it could get more complex vuex would be a great addition.
Below is REACT code for details page
Ticket is a primary object, and what i want to do is when downloading add the ticket name as .pdf filename.
So i need a solution to pass the concrete ticket name to the handleDownload function
In the render section there are no problem declaring ticket.ticketName etc. But with onClick the problem arises.
type TicketProps =
TicketStore.TicketState &
typeof TicketStore.actionCreators &
RouteComponentProps<{ticketId: string}>;
class Ticket extends React.PureComponent<TicketProps> {
public componentDidMount() {
this.ensureDataFetched();
}
private ensureDataFetched(){
this.props.requestTicket(+this.props.match.params.ticketId);
}
handleDownload = () =>{
Axios.get(`${apiUrl}/api/tickets/download/${this.props.match.params.ticketId}`,{responseType: 'arraybuffer',
headers: { "Content-Type": 'application/pdf' }
}).then((response) => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', "test"+.pdf");
document.body.appendChild(link);
link.click();
});
}
public render() {
let ticket = this.props.ticket;
if(this.props.isLoading){
return <span>Laen andmeid...</span>;
}
if (ticket === undefined) {
return <h1>Piletit ei leitud</h1>;
}
let name = ticket.ticketName
return (
<React.Fragment>
<h3>Üritus: {ticket.ticketName}</h3>
<Table striped hover size="sm">
<tbody>
<tr>
<td className="details">Asukoht:</td>
<td>{ticket.eventLocation}</td>
</tr>
<tr>
<td className="details">Kuupäev:</td>
<td>{ticket.eventDate}</td>
</tr>
<tr>
<td className="details">Lisainfo:</td>
<td>{ticket.extraInfo}</td>
</tr>
<tr>
<td className="details">Pilet:</td>
<td>{ticket.pdfTicket}</td>
</tr>
</tbody>
</Table>
<Button onClick={this.handleDownload}>Lae alla</Button>
<Popup trigger={<button className="btn btn-primary">Show location on map</button>} position="bottom left">
<div><Maps aadress={ticket.eventLocation}></Maps>></div>
</Popup>
<Link to='../tickets'>
<Button color='primary' onClick={()=>{}}>
Tagasi
</Button>
</Link>
<br></br>
</React.Fragment>
);
}
}
export default connect(
(state: ApplicationState) => state.ticket,
TicketStore.actionCreators
)(Ticket as any);
I am getting parsing error after ticket?
Any thoughts?
Thanks
Use the following code without the question marks:
<Button onClick={()=>{this.handleDownload(ticket.id,ticket.ticketName)}}>Lae alla</Button>
The solution was to add
if(this.props.ticket===undefined){
return //something;
}
Before using the object.
I am trying to validate series of dates with something like this.
const data = [
{begin: new Date('2019-12-01'), place: '2'},
{begin: new Date('2019-12-03'), place: '3'}
... more values
];
// Elements inside data can be added or removed but will have at least one.
Here data[1][begin] should be more than or equal to data[0][begin] and data[1][place] should not equal to data[0][place]. Is there anyway to achieve this. Documentation talks about dynamic validation but I am not sure how I can achieve this with collection.
You can consider implementing a custom validation in the form submit event listener.
This can be achieved by looping through your array of objects and compare items in pairs.
HTML
<form
id="app"
#submit="checkForm"
action="/someurl"
method="post"
>
<table border="1">
<tr v-for="(item,index) in dates" :key="index">
<td>
{{index}}
</td>
<td>
{{formatDate(item.begin)}}
</td>
<td>
{{item.place}}
</td>
</tr>
</table>
<input type="date" v-model="dateEntry"/>
<input type="text" v-model="placeEntry"/>
<button type="button" #click="addEntry">Add</button>
<p>
<br>
<input
type="submit"
value="Submit"
>
</p>
<p v-for="error in errorList">
{{error}}
</p>
</form>
JS
new Vue({
el: "#app",
data: {
errorList: [],
dateEntry: null,
placeEntry: null,
dates: [
{begin: new Date('2019-12-01'), place: '2'},
{begin: new Date('2019-12-03'), place: '3'}
]
},
methods: {
addEntry: function(){
if(this.dateEntry == null || this.dateEntry == "")
return false;
if(this.placeEntry == "")
return false;
this.dates.push({
begin: new Date(this.dateEntry),
place: this.placeEntry
});
this.dateEntry = null;
this.placeEntry= "";
},
checkForm: function(e){
var isValid = true;
var index = 0;
var nextIndex = 1;
this.errorList = [];
while(nextIndex < this.dates.length){
if(nextIndex < this.dates.length){
var isValidDate = this.validDate(this.dates[nextIndex].begin,this.dates[index].begin);
var isValidPlace = this.validPlace(this.dates[nextIndex].place,this.dates[index].place);
if(!isValidDate){
this.errorList.push("Invalid date on index " + nextIndex);
}
if(!isValidPlace){
this.errorList.push("Invalid place on index " + nextIndex);
}
}
index++;
nextIndex++;
}
if(!this.errorList.length){
this.errorList.push("All dates are valid");
return true;
}
e.preventDefault();
},
formatDate: function(date){
return date.toDateString();
},
validPlace: function(curPlace, prevPlace){
return curPlace != prevPlace;
},
validDate: function(curDate,prevDate){
try{
return curDate.getTime() >= prevDate.getTime();
}catch(e){
return false;
}
}
}
})
Check out this JS Fiddle that I created to illustrate my suggestion.
On the other hand, if you are building the array during runtime, then you can apply the validation before it gets added into the array.