link822 link823 link824 link825 link826 link827 link828 link829 link830 link831 link832 link833 link834 link835 link836 link837 link838 link839 link840 link841 link842 link843 link844 link845 link846 link847 link848 link849 link850 link851 link852 link853 link854 link855 link856 link857 link858 link859 link860 link861 link862 link863 link864 link865 link866 link867 link868 link869 link870 link871 link872 link873 link874 link875 link876 link877 link878 link879 link880 link881 link882 link883 link884 link885 link886 link887 link888 link889 link890 link891 link892 link893 link894 link895 link896 link897 link898 link899 link900 link901 link902 link903 link904 link905 link906 link907 link908 link909 link910 link911 link912 link913 link914 link915 link916 link917 link918 link919 link920 link921 link922 link923 link924 link925 link926 link927 link928 link929 link930 link931 link932 link933 link934 link935 link936 link937 link938 link939 link940 link941 link942 link943 link944 link945 link946 link947 link948 link949 link950 link951 link952 link953 link954 link955 link956 link957 link958

[Vue.js] Laravel API call goes through even with session expired Subscribe to RSS

there is a SPA based on Laravel 5.8 and vue.js 2.0.

Everything is working fine, a little bit too much to be honest, because if I delete the session and I try to save the content afterward or keep navigating the private pages, every ajax call that I’m doing with Axios is going through without returning any error. Only if I forcefully refresh the page I get the error page I setup but if I don’t, I can keep doing everything even if the session no longer exist.

This is my setup.

web.php is where there is the only php route that points to a singlePageController:

Auth::routes();

Route::get(‘/{any}’, ‘SinglePageController@index’)->where(‘any’, ‘.*‘);

Then in the singlePageController I return the view:

class SinglePageController extends Controller
{
public function index() {
return view(‘app’, [‘loggedUser’ => auth()->user()]);
}
}

Then there is the api.php where there is the API routes. As you can see at the end there is the middleware to make it private. Just to make an example this is the one I use for updating the content:

Route::put(‘event/update/{slug}’, ‘EventController@update’)->middleware(‘auth:api’);

Then the related controller of that API route:

public function update(Request $request, $slug)
{
$event = Event::where(‘slug’, $slug)->first();

$event->title = $request->input(‘title’);

return new EventResource($event);
}

And in the end this is the Resource I use to define what and how the API data is going to be displayed:

public function toArray($request)
{
// return parent::toArray($request);

return [
‘id’ => $this->id,
‘title’ => $this->title,
‘slug’ => $this->slug,
‘curator’ => $this->curator,
‘featured_image’ => $this->featured_image,
‘body’ => $this->body,
‘date’ => $this->date
];
}

So this above is the flow I have. Then when I do an axios call to update the content, I’m doing something like:

axios({
method: ‘PUT’,
url: ‘/api/event/update/‘ + this.$route.params.slug + ‘?api_token=’ + this.isLogged.apiToken,
data: dataToSave,
headers: {
‘X-CSRF-TOKEN’: $(‘meta[name=”csrf-token”]‘).attr(‘content’)
}
})
.then((response) => {
this.getNotification(‘Success: The Event has been saved’);
})
.catch((error) => {
this.getNotification(‘Error: Impossible saving the event’);
console.log(error);
})

Thanks in advance for the help

Solution :

In Laravel routes in api.php ignore the session data.

If you want to authenticate with session data you could move the api routes to web.php and you should see the results you expect.

[Vue.js] How to call a method when using AXIOS in v-for Vuejs Subscribe to RSS

I read a lot of articles and posts and question in StackOverflow and the others but did not get my answer. I’m implementing a simple comment and reply component for my Laravel project.

* there is a table like below: *

id | name | body | reply_id | status
-——————————————————–
1 | bran | good | null | accepted
2 | sansa | awe full article | 1 | accepted
3 | jan | soo Cool | 1 | accepted
4 | nightK | dont post it again| Null | accepted
5 | kalici | wow nice | Null | accepted
6 | worm | why ?? | 4 | accepted

If reply_id filed be Null i get it as main comment not as reply of comment

in my vuejs mounted() i will get all comments that are Null reply_id and accepted by admin from method named by getComments() and call it in mounted() .
also i’m using laravel pagination
my getComments as below vue.js code :

getComments(page = 1) {

var self = this;
axios.get(‘/comment/pagination/+post_id+ ‘?page=’ + page)
.then(function(response) {
self.comments = response.data;
});

and show it with blow html and vuejs tags :

<div v-for=”comment in comments.data” :key=”comment.id” class=”comments”>
<div class=”media comment” v-if=”comment.reply==null”>
<img src=”/images/avar.png” width=”50px” height=”50px” alt=”image”>
<div class=”media-body”>
<h6 v-if=”comment.user”> { comment.user[‘f_name’] } { comment.user[‘l_name’] } </h6>
<h6 v-if=”!comment.user”>{ comment.name }</h6>
<ul class=”list-inline”>
<li class=”list-inline-item”><span class=”fa fa-calendar”></span>{ comment.created_at }</li>
<li class=”list-inline-item”><a href=”#”>Reply</a></li>
</ul>
<p>
{ comment.body }
</p>

</div>
</div>
<hr>
</div>

until here my component works well. shows just the main comments.

now its time to load the replies of main comments .
i use a method with name getReplies :

getReplies(MainCommentId) {

console.log(MainCommentId);
var self = this;
axios.get(‘/comment/replies/‘ + MainCommentId)
.then(function(response) {
console.log(response.data.data);
self.replies = response.data.data;
});
},

and then i changed my main comment view to below :

<div v-for=”comment in comments.data” :key=”comment.id” class=”comments”>
<div class=”media comment”>
<img src=”/images/avar.png” width=”50px” height=”50px” alt=”image”>
<div class=”media-body”>
<h6 v-if=”comment.user”> { comment.user[‘f_name’] } { comment.user[‘l_name’] } </h6>
<h6 v-if=”!comment.user”>{ comment.name }</h6>
<ul class=”list-inline”>
<li class=”list-inline-item”><span class=”fa fa-calendar”></span>{ comment.created_at }</li>
<li class=”list-inline-item”><a href=”#”>Reply</a></li>
</ul>
<p>
{ comment.body }
</p>
<!– Nested Comment –>
{ getReplies(comment.id) }
<div v-for=”reply in replies” :key=”reply.id” class=”media comment”>
<img src=”/images/avar.png” width=”50px” height=”50px” alt=”image”>
<div class=”media-body”>
<h6 v-if=”reply.user”> { reply.user[‘f_name’] } { reply.user[‘l_name’] } </h6>
<h6 v-if=”!reply.user”>{ reply.name }</h6>
<ul class=”list-inline”>
<li class=”list-inline-item”><span class=”fa fa-calendar”></span>{ reply.created_at }</li>
<li class=”list-inline-item”><a href=”#”>Reply</a></li>
</ul>
<p>
{ reply.body }
</p>
</div>
</div>
</div>
</div>
<hr>
</div>

but when it wants to get replies by the method by each step of v-for main comments it will continuously send the request and the change data in HTML reply part. it acts like crazy like the below image.

any help will be appreciated.

Solution :

This line {getReplies(comment.id)} create that issue, getReplies() called repeatedly and resetting replies

You must preload the replies and store it like this

this.replies = {
‘1’: [{
‘message’: “test”
},
{
‘message’: “test”
},
],
‘2’: [{
‘message’: “test”
},
{
‘message’: “test”
},
]

};

The keys( Now 1 and 2) of the replies array will be main comment id

And add this function in methods

methods : {
getReply (commentID) {
return this.replies[commentID];
}
}

Change the code like this

<div v-for=”reply in getReply(comment.id)” :key=”reply.id” class=”media comment”>
<img src=”/images/avar.png” width=”50px” height=”50px” alt=”image”>
<div class=”media-body”>
<h6 v-if=”reply.user”> { reply.user[‘f_name’] } { reply.user[‘l_name’] } </h6>
<h6 v-if=”!reply.user”>{ reply.name }</h6>
<ul class=”list-inline”>
<li class=”list-inline-item”><span class=”fa fa-calendar”></span>{ reply.created_at }</li>
<li class=”list-inline-item”><a href=”#”>Reply</a></li>
</ul>
<p>
{ reply.body }
</p>
</div>
</div>

[Vue.js] How to change and render a source array from a child component in Vue Subscribe to RSS

there is an array in the parent component that I render to the template, I need that when I click on a link to a vue-router with the dynamic attribute id, there is opened a new component with only that element of the array that matches the id. My code is not working.
Parent component:

<template>
<div>
<button @click=”addPost”>Add</button>
<div v-for=”item, index in arr” :key=”item.id”>
<p>{item.title}</p>
<router-link :to=”‘/blog/‘ + item.id”>Link</router-link>
</div
<router-view :arr=”arr”></router-view>
</div>
</template>

export default {
import Post from ‘./components/Post’
components: {
‘app-post’: Post
},
data() {
return {
arr: []
}
},
methods: {
addPost() {
this.arr.push({
title: this.title,
id: Math.Random()
})
}
}
}

Child component:

<template>
<div v-for=”item, index in arr” :key=”index”>
<p>{item.title}</p>
</div>
</template>

export default {
props: {
arr: Array
},
created() {
return this.arr.find(item => {
return item.id === this.$route.params.id
})
}
}

Solution :

You can use params in the router-link like this

<router-link :to=”{ name: ‘blog’, params: { id: ${item.id}}”>User</router-link>

then in child you can access

let paramID = this.$route.params.id

[Vue.js] in vue.js how do I serve components that require js libraries? Subscribe to RSS

So I’m new to the vue.js CLI and one of the features that I would like to use is

vue.js serve <component name>

The problem when immediately running into is there are some js libraries like moment that when using in those components, so do I need to add an import statement in my component just for local testing? Is there anyway to set this globally and if so can I access it when i try to serve an individual component?

Solution :

Once you run npm i -s moment, you can either import moment in the main.js vue.js entry point, like this:

import moment from ‘moment’;

Vue.use(moment);

Or, you can use it locally in the component script, with just a local import within the <script></script> tag.

import moment from ‘moment’;

My preference is the former, since it allows me to reduce duplication if I need it in multiple files. Either way, to access in a function, once it is imported in one of those two ways, you can use it in component methods and lifecycle hooks.

Solution 2:

Import the plugins in the main.js and then use like so;

import vue.js from “vue”;
//this is called only once before you start importing other packages

import YourPlugin from “yourplugin”;
Vue.use(YourPlugin)

[Vue.js] How to get full current date and time in Vue.js without writing massive JavaScript lines Subscribe to RSS

to print “Last updated: 6/12/2019 1:30 PM” in Vue.js.
there is the current year but the full date and time. Here’s what there is so far

<div id=”app”>
Last updated: { new Date().getFullYear() }
</div>

Solution :

you can either use JavaScript new Date() methods check MDN , or you can install vue-moment via npm .

Installation :

npm install moment

Require the plugin :

var moment = require(‘moment’);

Display Date :

<span>Last updated: { moment(“D/M/YYYY h:mm A”) }</span>

Solution 2:

You can use: new Date().toLocaleString(), it gives you “6/13/2019, 9:40:40 AM”

[Vue.js] Vue template fires more than once when used, i think i need a unique key somewhere Subscribe to RSS

when trying to implement font-awesome-picker to a website that when making using vue2/php/mysql, but within standard js scripting, so no imports, .vue.js etc.
The script when trying to add is taken from here: https://github.com/laistomazz/font-awesome-picker
The problem that when facing is that there is 3 columns that have a title and an icon picker next it, that will allow the user to select 1 icon for each title. It is kinda working well…but if the same icon is used in 2 different columns then any time the user clicks again any of the 2 icons both instances of the picker will fire up, thus showing 2 popups. I need to somehow make them unique.

I’ve tried using
:key=”list.id”
or
v-for=”icon in icons” :icon:icon :key=”icon”
but nothing worked. Somehow there is to separate all the instances (i think) so they are unique.
This is the template code:

Vue.component(‘font-awesome-picker’, {
template: ‘ <div><div class=”iconPicker__header”><input type=”text” class=”form-control” :placeholder=”searchPlaceholder” @keyup=”filterIcons($event)” @blur=”resetNew” @keydown.esc=”resetNew”></div><div class=”iconPicker__body”><div class=”iconPicker__icons”><a href=”#” @click.stop.prevent=”getIcon(icon)” :class=”`item ${selected === icon ? \‘selected\‘ : \‘\‘}`“ v-for=”icon in icons” :key=”icon”><i :class=”\‘fa \‘+icon”></i></a></div></div></div>’,
name: ‘fontAwesomePicker’,
props: [‘seachbox’,’parentdata’],
data () {
return {
selected: ‘’,
icons,
listobj: {
type: Object
}
};
},
computed: {
searchPlaceholder () {
return this.seachbox || ‘search box’;
},
},
methods: {
resetNew () {
vm.addNewTo = null;
},
getIcon (icon) {
this.selected = icon;
this.getContent(this.selected);
},
getContent (icon) {
const iconContent = window
.getComputedStyle(document.querySelector(`.fa.${icon}`), ‘:before’)
.getPropertyValue(‘content’);
this.convert(iconContent);
},
convert (value) {
const newValue = value
.charCodeAt(1)
.toString(10)
.replace(/\D/g, ‘’);

let hexValue = Number(newValue).toString(16);

while (hexValue.length < 4) {
hexValue = `0${hexValue}`;
}

this.selecticon(hexValue.toUpperCase());
},
selecticon (value) {
this.listobj = this.$props.parentdata;
const result = {
className: this.selected,
cssValue: value,
listobj: this.listobj
};
this.$emit(‘selecticon’, result);
},
filterIcons (event) {
const search = event.target.value.trim();
let filter = [];

if (search.length > 3) {
filter = icons.filter((item) => {
const regex = new RegExp(search, ‘gi’);
return item.match(regex);
});
}else{
this.icons = icons;
}

if (filter.length > 0) {
this.icons = filter;
}
}
},
});

I’ve setup a fiddle with the problem here:
https://jsfiddle.net/3yxk1ahb/1/
Just pick the same icon in both cases, and then click any of the icons again. You’ll see that the popups opens for both columns.

How can i separate the pickers ?

Solution :

problem is in the @click and v-show

you should use list.id instead of list.icon (i.e @click=”addNewTo = list.id”)

working fiddle https://jsfiddle.net/q513mhwt/

[Vue.js] vuetify cnange tab event Subscribe to RSS

I use v-tabs and to know: how can i know about tab id, when I change a tab?
this is my code:

<v-tabs class=”tabs-container” color=”green” grow>
<v-tab class=”tab”
v-for=”tab of tabs”
:key=”tab.id”
:title=tab
\>
{tab.name}
</v-tab>
<v-tabs-items>
<v-tab-item v-for=”tab in tabs” :key=”tab.id”>
<div v-if=’tab.id == 0’>
<CreateHero v-on:updateAllTabs=”updateAllTabs”/>
</div>
<div v-else>
<HeroPresenter/>
</div>
</v-tab-item>
</v-tabs-items>
</v-tabs>


methods: {
updateAllTabs() {
axios.get(‘/hero’).then(responce => {
this.tabs = responce.data
})
},
getHero(id) {
this.$emit(“getCurrentHero”, id);
}
}

so, when a click to tab, to send tab id in HeroPresenter component. I tried to use $emit, but what should i write in v-tab?? My vue-component HeroPresenter was subscribed on “getCurrentHero”

Solution :

You can add a click event, which will call the function

<v-tab class=”tab”
v-for=”tab of tabs”
:key=”tab.id”
:title=tab
@click=”getHero(tab.id)”
\>

[Vue.js] Unable to compare numbers with v-if Subscribe to RSS

to do some styling based on condition from the binding value using v-if

I tried using the v-if but I was unable to get the result. I also tried ternary operator in vue.js it dint work

<table>
<tbody>
<tr v-for=”cat in this.table_data”>
<th v-for=”(value, key) in data”>
<div v-if=”key == ‘Projected Utilization’”>
<div v-if=”0.0 <= value “>
<td style=”background-color: coral”>{value}</td>
</div>
<div v-else>

<td style=”background-color: green”>{value}</>
</div>
</tbody>
</table>

there is my data in the table_data and data contains a key value pair and there is checked that it had values

but the code always ends up in the false condition after many searches i thought to ask the community. point me if when doing anything wrong

thanks in advance

Solution :

Check that there is no close tag of the TR element and the use of this is incorrect, so the valid markup is:

Example 1: (check https://codepen.io/matiasperrone/pen/JQdRzW)

<div id=”app”>
<table>
<tbody>
<tr v-for=”cat in table_data” :key=”cat”>
<th v-for=”(value, key) in data” :key=”value”>
<div :style=”{ backgroundColor: key === ‘Projected Utilization’ ? ‘transparent’ : 0.0 <= value ? ‘coral’ : ‘green’ }”>{ value }</div>
</th>
</tr>
</tbody>
</table>
</div>

Javascript:

new Vue({
el: ‘#app’,
data() {
return {
table_data: [{name: ‘data1’}, {name: ‘data2’},],
data: {key1: 1001, key2: -1003, “Projected Utilization”: 100}
}
}
});

Solution 2:

The first problem is data is undefined, at least in what you posted. Which means value is undefined and 0.0 <= undefined returns false. Always.

Assuming you meant v-for=”(value, key) in cat” (not in data), you still have the problem of invalid markup: <td>, as an immediate child of <div> is invalid. It can only be a direct child of a <tr>.

A valid markup would be:

<table>
<tbody>
<tr v-for=”cat in this.table_data”>
<th v-for=”(value, key) in cat”>
<div v-if-“key === ‘Projected Utilization’”
:style=”{ backgroundColor: 0.0 <= value ? ‘coral’ : ‘green’ }”
v-text=”value” />
<div v-else v-text=”value” />
</th>
</tbody>
</table>

If you need more help, please provide a sample of the table_data.

[Vue.js] Accessing further data Subscribe to RSS

So when accessing an external API and when trying to display this data

https://i.stack.imgur.com/Yop0I.png

and everything was fine so far as you can see

https://i.stack.imgur.com/L3hXq.png

using this code

<tr v-for=”cv_output in cv_outputs” :key=”cv_output.id”>
<td>{ ‘teste’ }</td>
<td>{ cv_output[‘id’] }</td>
<td>{ cv_output[‘last-modified-date’] }</td>
<td>{ cv_output[‘output-category’][‘value’] }</td>
<td>{ cv_output[‘output-category’][‘code’] }</td>
<td>{ cv_output[‘output-type’][‘value’] }</td>
<td>{ cv_output[‘output-type’][‘code’] }</td>
<td>{ cv_output[‘other-output’] }</td>

but as soon as I try to go further such as

{ cv_output [‘other-output’][‘title’] }

the data stops displaying in the table and in the console i get the following:

TypeError: Cannot read property ‘title’ of null

which doesn’t make any sense I think. Any idea why?

Controller method:

public function getRemoteOutputs()
{
$science = Auth::user()->science_id;

$client = new Client([‘headers’ => [‘Accept’ => ‘application/json’]]);

$request = $client->get(
https://url\_to\_the\_api/'.$science.'/degree',
[
‘auth’ => [‘client’, ‘secret’],
]

);

$data = $request->getBody()->getContents();

return $data;
}

Solution :

I @Helpinghand is correct, one of the records is missing other-output.

Try:

<td>
<span v-if=”cv_output[‘output-type’]“>{ cv_output[‘output-type’][‘title’] }</span>
<span v-else>No Output Type Title</span>
</td>

Solution 2:

Try this:

{ cv_output [‘other-output’] ? cv_output [‘other-output’][‘title’]: ‘’}

This will return the other-output->title if it exists, if not it should return nothing without error. (you can put whatever you want in the single quotes there if you want something like ‘not available’ as default)

[Vue.js] What causes Vue props to equal in the DOM? Subscribe to RSS

While inspecting the DOM for a vue.js app in the Chrome console, I noticed there was an element with the attribute content=[object Object]. In the code, it’s because that component was passing an object as a content prop to its child, and for some reason this was showing up in the DOM.

The component in question:
<custom-component :content=”obj” />

I inspected other areas of the code that are also passing object props down to their children, and noticed that those props were absent from the DOM. Unfortunately, I could not find any significant differences that could be responsible for the discrepancy. Since when trying to also hide content=[object Object] from the DOM, I was wondering what in vue.js determines this behavior?

I tried to reproduce the behavior in this jsfiddle. However due to my question I can’t figure out how to properly do that, and the content prop is absent from the DOM there. Any help would be greatly appreciated.

Solution :

This is most likely because you haven’t defined it as a prop on the relevant component. If it isn’t defined as a prop then it’ll just be converted to a string and added as an attribute to the outermost element of the component.

If the component does define this prop then check its template to see whether it is adding this attribute to its outermost element itself. If it’s calling out to some other component at the root of the template then you’ll similarly need to check whether that component defines this prop.