link137 link138 link139 link140 link141 link142 link143 link144 link145 link146 link147 link148 link149 link150 link151 link152 link153 link154 link155 link156 link157 link158 link159 link160 link161 link162 link163 link164 link165 link166 link167 link168 link169 link170 link171 link172 link173 link174 link175 link176 link177 link178 link179 link180 link181 link182 link183 link184 link185 link186 link187 link188 link189 link190 link191 link192 link193 link194 link195 link196 link197 link198 link199 link200 link201 link202 link203 link204 link205 link206 link207 link208 link209 link210 link211 link212 link213 link214 link215 link216 link217 link218 link219 link220 link221 link222 link223 link224 link225 link226 link227 link228 link229 link230 link231 link232 link233 link234 link235 link236 link237 link238 link239 link240 link241 link242 link243 link244 link245 link246 link247 link248 link249 link250 link251 link252 link253 link254 link255 link256 link257 link258 link259 link260 link261 link262 link263 link264 link265 link266 link267 link268 link269 link270 link271 link272 link273

[Vue.js] Bootstrap-Vue How to use checkboxes with Table component to filter data?

when using Bootstrap-Vue’s TABLE component to display data. That is working fine.

However, when unable to figure out how to toggle on/off some data items using a checkbox. For example, if a user checks the box for “open”, the table will update and show only the items with a status of “open”.

Can someone help me figure this out?

Here’s my demo code: link to live sandbox code

<template>
<div>
<b-form-group label>
<b-input-group>
<b-form-input v-model=”filter” placeholder=”Type to search for a specific issue”></b-form-input>
<b-input-group-append>
<b-button :disabled=”!filter” @click=”filter = ‘’”>Clear</b-button>
</b-input-group-append>
</b-input-group>
</b-form-group>
<b-form-group label=”View Status:”>
<b-form-checkbox-group
id=”checkbox-group-1”
v-model=”selected”
:options=”options”
name=”flavour-1”
\></b-form-checkbox-group>
</b-form-group>
<b-table :items=”posts” :fields=”fields” :filter=”filter”>
<!– A custom formatted column –>
<template slot=”name” slot-scope=”data”>{ data.value.user }</template>
</b-table>
</div>
</template>

<script>
import axios from “axios”;
export default {
data() {
return {
filter: null,
selected: [“pending”], // Must be an array reference!
options: [
{ text: “Open”, value: “open” },
{ text: “Assigned”, value: “assigned” },
{ text: “Pending”, value: “pending” },
{ text: “Closed”, value: “closed” }
],
rawPosts: [
{
userId: 1,
status: “open”,
id: 1,
title:
“sunt aut facere repellat provident occaecati excepturi optio reprehenderit”,
body:
“quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto”
},
{
userId: 1,
status: “open”,
id: 2,
title: “qui est esse”,
body:
“est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla”
},
{
userId: 1,
status: “closed”,
id: 3,
title: “ea molestias quasi exercitationem repellat qui ipsa sit aut”,
body:
“et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut”
},
{
userId: 1,
status: “assigned”,
id: 4,
title: “eum et est occaecati”,
body:
“ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit”
},
{
userId: 1,
status: “pending”,
id: 5,
title: “nesciunt quas odio”,
body:
“repudiandae veniam quaerat sunt sed\nalias aut fugiat sit autem sed est\nvoluptatem omnis possimus esse voluptatibus quis\nest aut tenetur dolor neque”
}
],
users: [
{
uid: 1,
firstname: “Claiborne”,
lastname: “Heberden”,
email: “cheberden0@gravatar.com
},
{
uid: 2,
firstname: “Gerick”,
lastname: “Tetla”,
email: “gtetla1@whitehouse.gov
},
{
uid: 3,
firstname: “Raymund”,
lastname: “Espy”,
email: “respy2@freewebs.com
},
{
uid: 4,
firstname: “Dilly”,
lastname: “Dimitriev”,
email: “ddimitriev3@skype.com
},
{
uid: 5,
firstname: “Roby”,
lastname: “Tabner”,
email: “rtabner4@sohu.com
}
],
fields: [
{ key: “id” },
{ key: “title” },
{ key: “body” },
{ key: “user”, label: “Assigned To” }
]
};
},
created() {
//this.loadPosts();
//this.loadNames();
},
methods: {
userFrom(id) {
const user = this.users.find(user => user.uid === id);
return user ? `${user.lastname}, ${user.firstname}` : “not assigned”;
}
},
computed: {
posts() {
if (this.rawPosts.length && this.users.length) {
return this.rawPosts.map(rawPost => ({
…rawPost,
user: this.userFrom(rawPost.userId)
}));
} else {
console.log(“some not assigned”);
}
}
}
};
</script>

Solution :

if you want to filter based off status you could just string a filter method on to the end of the computed property posts

some thing like this

posts() {
if (this.rawPosts.length && this.users.length) {
return this.rawPosts.map(rawPost => ({
…rawPost,
user: this.userFrom(rawPost.userId)
})).filter(post => post.status == this.selected);
} else {
console.log(“some not assigned”);
}
}

All I did was add this

.filter(post => post.status == this.selected);

Update: or if you want to show for each checked status you can do this

.filter(post => this.selected.includes(post.status));

Solution 2:

there is edited that CodeSandbox.. something like this should work:

Edit: cleaned it up so that it is closer to what you originally had (changed the watch to a computed property and renamed variables back to what you had them named)..

Edit2: that is my final product - cleaned it up more, made it shorter and easier to read.

CodeSandbox:

Code Snippet:

new Vue({
el: “#app”,
data() {
return {
filter: null,
selected: [“open”], // Must be an array reference!
options: [
{ text: “Open”, value: “open” },
{ text: “Assigned”, value: “assigned” },
{ text: “Pending”, value: “pending” },
{ text: “Closed”, value: “closed” }
],
rawPosts: [
{
userId: 1,
status: “open”,
id: 1,
title:
“sunt aut facere repellat provident occaecati excepturi optio reprehenderit”,
body:
“quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto”
},
{
userId: 1,
status: “open”,
id: 2,
title: “qui est esse”,
body:
“est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla”
},
{
userId: 2,
status: “closed”,
id: 3,
title: “ea molestias quasi exercitationem repellat qui ipsa sit aut”,
body:
“et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut”
},
{
userId: 2,
status: “assigned”,
id: 4,
title: “eum et est occaecati”,
body:
“ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit”
},
{
userId: 4,
status: “pending”,
id: 5,
title: “nesciunt quas odio”,
body:
“repudiandae veniam quaerat sunt sed\nalias aut fugiat sit autem sed est\nvoluptatem omnis possimus esse voluptatibus quis\nest aut tenetur dolor neque”
}
],
users: [
{
uid: 1,
firstname: “Claiborne”,
lastname: “Heberden”,
email: “cheberden0@gravatar.com
},
{
uid: 2,
firstname: “Gerick”,
lastname: “Tetla”,
email: “gtetla1@whitehouse.gov
},
{
uid: 3,
firstname: “Raymund”,
lastname: “Espy”,
email: “respy2@freewebs.com
},
{
uid: 4,
firstname: “Dilly”,
lastname: “Dimitriev”,
email: “ddimitriev3@skype.com
},
{
uid: 5,
firstname: “Roby”,
lastname: “Tabner”,
email: “rtabner4@sohu.com
}
],
fields: [
{ key: “id” },
{ key: “title” },
{ key: “body” },
{ key: “user”, label: “Assigned To” }
]
};
},
created() {
//this.loadPosts();
//this.loadNames();
},
methods: {
userFrom(id) {
const user = this.users.find(user => user.uid === id);
return user ? `${user.lastname}, ${user.firstname}` : “not assigned”;
},
postsFromStatus() {
return this.rawPosts.filter(o => this.selected.includes(o.status));
},
mapPostsAndUsers(posts) {
return posts.map(post => ({
…post,
user: this.userFrom(post.userId)
}));
}
},
computed: {
posts() {
return this.rawPosts.length && this.users.length
? this.selected.length === 0
? this.mapPostsAndUsers(this.rawPosts)
: this.mapPostsAndUsers(this.postsFromStatus())
: console.log(“some not assigned”);
}
}
})

#app {
background-color: #fefefe;
padding: 1rem 2rem 0 2rem;
border: none !important;
margin-bottom: 1rem;
}

/** ADDED FOR BREVITY
* REMOVE THIS TO SEE ALL DATA IN A CELL*/
td {
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/** */
<script src=”https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src=”https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<link href=”https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" rel=”stylesheet”/>
<link href=”https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" rel=”stylesheet”/>

<div id=”app”>
<div class=”main”>
<b-container>
<b-form-group label>
<b-input-group>
<b-form-input v-model=”filter” placeholder=”Type to search for a specific issue”></b-form-input>
<b-input-group-append>
<b-button :disabled=”!filter” @click=”filter = ‘’”>Clear</b-button>
</b-input-group-append>
</b-input-group>
</b-form-group>
<b-form-group label=”View Status:”>
<b-form-checkbox-group id=”checkbox-group-1” v-model=”selected” :options=”options” name=”flavour-1”></b-form-checkbox-group>
</b-form-group>
<b-table :items=”posts” :fields=”fields” :filter=”filter”>
<!– A custom formatted column –>
<template slot=”name” slot-scope=”data”>{ data.value.user }</template>
</b-table>
</b-container>
</div>
</div>

CodePen:

Click here for CodePen

[Vue.js] Vuejs bind variable in JSX with scope

when essentially looking for something like:

<div v-for=”k in keys” :key=”k”>
{ k }

<div v-with:myvalue=”functionOf(k)”>
{ myvalue }
</div>
</div>

I don’t know how you would call such thing, but I can tell there is similar code in places and that could be handy.

Solution :

You can use the computed property to make functions that transform the values into something else.

For example lets say you have this code here.

<div id=”example”>
{ message.split(‘’).reverse().join(‘’) }
</div>

You can add add a computed property to run some js code and just call it in the html template

<div id=”example”>
<p>Original message: “{ message }”</p>
<p>Computed reversed message: “{ reversedMessage }”</p> //computed function
</div>

var vm = new Vue({
el: ‘#example’,
data: {
message: ‘Hello’
},
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split(‘’).reverse().join(‘’)
}
}
})

You can read more about it in the official documentation

Example with v-for

<div v-for=”k in keys” :key=”k”>
{ k }
<div>
{ reversedMessage(k) }
</div>
</div>

var vm = new Vue({
el: ‘#example’,
computed: {
// a computed getter
reversedMessage(k){ //you receive the value for each k you have in keys
return k.split(‘’).reverse().join(‘’)
}
}
})

[Vue.js] How you do you call a method once rendering is done in Vue?

there is am building a vue.js app that includes a QuillJS editor in a tab. there is a simple setTab(tabName) vue.js method that shows/hides tabs with the v-if directive.

methods: {
setTab: function (tabName) {
this.view = tabName;
if(tabName === ‘compose’) {
var editor = new Quill(‘#editor’, {
modules: { toolbar: ‘#toolbar’ },
theme: ‘snow’
});
}
}
}

My tab is basically like this:

<div id=”composer” v-if=”tabName === ‘compose’”>
<!– toolbar container –>
<div id=”toolbar”>
<button class=”ql-bold”>Bold</button>
<button class=”ql-italic”>Italic</button>
</div>
<!– editor container –>
<div id=”editor”>
<p>Hello World!</p>
</div>
</div>

Currently, I’m getting an error because the #editor element does not yet exist when when calling new Quill(…). How do I delay that QuillJS initialization on the page so that it doesn’t happen until after the #editor is already there?

Solution :

Use this.$nextTick() to defer a callback to be executed after the next DOM update cycle (e.g., after changing a data property that causes a render-update).

For example, you could do this:

methods: {
setTab: function (tabName) {
this.view = tabName;
if(tabName === ‘compose’) {
this.$nextTick(() => {
var editor = new Quill(‘#editor’, {
modules: { toolbar: ‘#toolbar’ },
theme: ‘snow’
});
})
}
}
}

Solution 2:

Use mounted hook.

mounted: function () {
// Code that will run only after the
// entire view has been rendered
}

Solution 3:

A clean way to do this is not to rely on selectors but make Quill editor a self-contained component:

<template>
<div class=”quill-editor”>
<!– toolbar container –>
<div ref=”toolbar”>
<button class=”ql-bold”>Bold</button>
<button class=”ql-italic”>Italic</button>
</div>
<!– editor container –>
<div ref=”editor”>
<p>Hello World!</p>
</div>
</div>
</template>

<script>

name: “QuillEditor”,
mounted() {
this.quill = new Quill(this.$refs.editor, {
modules: { toolbar: this.$refs.toolbar },
theme: ‘snow’
});
}

</script>

[Vue.js] TinyMCE error The advcode enterprise plugin is not enabled on your API key. but I dont have 'advcode' plugin anywhere

there is a TinyMCE editor with basic plugins and toolbar yet a warning mentioned in the title always shows up. It doesn’t affect the work of the editor, it’s just annoying. These are the plugins and toolbar when using with VueJS:

import Editor from ‘@tinymce/tinymce-vue’

<editor v-if=”!isLinkSelected”
api-key=”MY_API_KEY”
:init=”{
plugins: ‘lists, image, imagetools, link, table, media, textcolor, colorpicker’,
toolbar: ‘undo redo | align | bold italic underline | forecolor backcolor | styleselect | blockquote | link | image | media | formatselect | fontsizeselect | removeformat | numlist bullist | table’,
menu: {},
images_upload_url: ‘editor-upload.php’,
automatic_uploads: true,
relative_urls : false,
remove_script_host : false,
file_browser_callback_types: ‘file image media’,
convert_urls : true,
link_list : page_link_list,
height : 500,
}”
v-model=”editor.content”>
</editor>

Solution :

Okay, I found out what was my problem.
I realized that none of my modifications in the vue.js component file was visible on the page. I was watching with npm watch and it always updated the .js files accordingly, but it was hard cached somehow so I had to npm update and regenerate my js files with npm watch then clear browser cache and my modifications were visible on the site instantly.

[Vue.js] How to select batch rows by clicking shift key down in element-ui table?

to implement batch selection by clicking shift key. My solution is to implement keydown and keyup listening event. Set a var to determine whether shift key is down. And then loop the data to make the batch selection.

But I met the problems
1. I cannot get the right value of isShift, why?
2. If some column is sortable, it will be a problem to get the data after sorting.

https://codesandbox.io/s/editable-table-idea-g1pil

Any suggestion? Great thx!

Solution :

I think you need to change code. In method creaed event onKeydown you using anonymous function so this.isShift out of vue.js data

created() {
document.onkeydown = function(e) {
var key = window.event.keyCode;
if (key === 16) {
this.isShift = true;
}
};
document.onkeyup = function(e) {
this.isShift = false;
};
},

It should be

created() {
document.onkeydown = this.onKeyDown;
document.onkeyup =this.onKeyUp;
},
methods: {
onKeyDown() {
var key = window.event.keyCode;
if (key === 16) {
this.isShift = true;
}
},
onKeyUp() {
this.isShift = false;
},
}

Sorry if my English is bad

[Vue.js] Vue get the current element and read children

I’m new to vue.js and there is a bootstrap navigation with a collapse which contains more navigation items.
So basically it’s just a menu which can slide in and out.

What I want: to add a class to the parent item (the active class) when one or more of the children has the active class.

But there is no idea how to do this with vue.
Can anyone help me achieve this?

My HTML looks like this:

<ul class=”nav flex-column”>
<li data-toggle=”collapse” data-target=”#users” class=”nav-item collapsed”>
<div class=”slide-out”>
<div class=”nav-link”>
Users
<i class=”fas fa-fw fa-chevron-right float-right”></i></div>
<div id=”users” class=”collapse”>
<ul class=”nav flex-column”>
<li class=”nav-item”><a href=”https://motorsport-manager.test/users" class=”nav-link active “>
Manage
</a></li>
<li class=”nav-item”><a href=”https://motorsport-manager.test/user/create" class=”nav-link “>
Create user
</a></li>
</ul>
</div>
</div>
<div class=”slide-in float-right”><a href=”https://motorsport-manager.test/users" class=”nav-link”><i class=”fa-fw fas fa-users”></i></a></div>
</li>
<li data-toggle=”collapse” data-target=”#teams” class=”nav-item collapsed”>
<div class=”slide-out”>
<div class=”nav-link”>
Teams
<i class=”fas fa-fw fa-chevron-right float-right”></i></div>
<div id=”teams” class=”collapse”>
<ul class=”nav flex-column”>
<li class=”nav-item”><a href=”https://motorsport-manager.test/teams" class=”nav-link “>
Manage
</a></li>
<li class=”nav-item”><a href=”https://motorsport-manager.test/team/create" class=”nav-link “>
Create team
</a></li>
</ul>
</div>
</div>
<div class=”slide-in float-right”><a href=”https://motorsport-manager.test/teams" class=”nav-link”><i class=”fa-fw fas fa-chalkboard”></i></a></div>
</li>
<li data-toggle=”collapse” data-target=”#team-members” class=”nav-item collapsed”>
<div class=”slide-out”>
<div class=”nav-link”>
Team members
<i class=”fas fa-fw fa-chevron-right float-right”></i></div>
<div id=”team-members” class=”collapse”>
<ul class=”nav flex-column”>
<li class=”nav-item”><a href=”https://motorsport-manager.test/team-members" class=”nav-link “>
Manage
</a></li>
<li class=”nav-item”><a href=”https://motorsport-manager.test/team-member/create" class=”nav-link “>
Create team member
</a></li>
</ul>
</div>
</div>
<div class=”slide-in float-right”><a href=”https://motorsport-manager.test/team-members" class=”nav-link”><i class=”fa-fw fas fa-users-cog”></i></a></div>
</li>
<li data-toggle=”collapse” data-target=”#race-categories” class=”nav-item collapsed”>
<div class=”slide-out”>
<div class=”nav-link”>
Race categories
<i class=”fas fa-fw fa-chevron-right float-right”></i></div>
<div id=”race-categories” class=”collapse”>
<ul class=”nav flex-column”>
<li class=”nav-item”><a href=”https://motorsport-manager.test/race-categories" class=”nav-link “>
Manage
</a></li>
<li class=”nav-item”><a href=”https://motorsport-manager.test/race-category/create" class=”nav-link “>
Create race category
</a></li>
</ul>
</div>
</div>
<div class=”slide-in float-right”><a href=”https://motorsport-manager.test/race-categories" class=”nav-link”><i class=”fa-fw fas fa-boxes”></i></a></div>
</li>
<li data-toggle=”collapse” data-target=”#race-series” class=”nav-item collapsed”>
<div class=”slide-out”>
<div class=”nav-link”>
Race series
<i class=”fas fa-fw fa-chevron-right float-right”></i></div>
<div id=”race-series” class=”collapse”>
<ul class=”nav flex-column”>
<li class=”nav-item”><a href=”https://motorsport-manager.test/race-series" class=”nav-link “>
Manage
</a></li>
<li class=”nav-item”><a href=”https://motorsport-manager.test/race-series/create" class=”nav-link “>
Create race series
</a></li>
</ul>
</div>
</div>
<div class=”slide-in float-right”><a href=”https://motorsport-manager.test/race-series" class=”nav-link”><i class=”fa-fw fas fa-warehouse”></i></a></div>
</li>
</ul>

Solution :

You could keep an object of array you have and foreach it.

<template>
<ul class=”nav flex-column”>
<li v-for=”(item, index) in list” :key=”index” data-toggle=”collapse” data-target=”#users”
class=”nav-item collapsed” :class=”{‘active’: item.active}”>
<div class=”slide-out”>
<div class=”nav-link”>
{item.name}
<i class=”fas fa-fw fa-chevron-right float-right”></i></div>
<div id=”users” class=”collapse”>
<ul class=”nav flex-column”>
<li v-for=”(child, i) in item.children” :key=”i” class=”nav-item”>
<a href=”https://motorsport-manager.test/users" class=”nav-link” :class=”{‘active’: child.active}”>
{child.name}
</a></li>
</ul>
</div>
</div>
<div class=”slide-in float-right”><a href=”https://motorsport-manager.test/users" class=”nav-link”><i
class=”fa-fw fas fa-users”></i></a></div>
</li>
</ul>
</template>

<script>
export default {
data() {
return {
list: [
{
name: ‘Users’,
active: false,
children: [
{name: ‘Manage’, active: true},
{name: ‘Create user’, active: false},
]
},
{
name: ‘Teams’,
active: false,
children: [
{name: ‘Manage’, active: false},
{name: ‘Create tram’, active: false},
]
}
]
}
},
mounted() {
this.handleActive()
},
methods: {
handleActive() {
this.list.forEach(v => {
v.children.forEach(child => {
if (child.active) {
v.active = true
}
})
})
}
}
}
</script>

[Vue.js] Can`t get specific data from vuex in components

I can get all data from vuex except only one and what surprise me more is I can get data in Chrome, only in Chrome.

Already tried different approaches, switch between localstorage and vuex-persistedstate, still can’t figure it out.

This is my vuex state:

state: {
statusOptions:JSON.parse(localStorage.getItem(‘optionsStatus’)),
},

Axios request:

axios({
url: ‘http://10.80.101.187:8081/api/directory/presencestatus',
method: ‘POST’,
})
.then((resp) => {
console.log(resp.data)
localStorage.setItem(‘optionsStatus’,JSON.stringify(resp.data));
});

this.$store.state.statusOptions try to catch data in components

That’s how I get data from server and send it to vuex.

In console I can check that I got data from server and also I can see it in vuex , but it`s empty in components.

0: {id_ref_catalog: 392, rus_name_catalog: “here”}

1: {id_ref_catalog: 393, rus_name_catalog: “diner”}

2: {id_ref_catalog: 394, rus_name_catalog: “away”}

Also to save data from vuex while refresh I use a plugin vuex-persistedstate

Solution :

You should use the vuex in the right form.
Use a mutation, an action.
Set the initial state to statusOptions: []
and then you will dispatch a mutation which will trigger an action and that action should commit the changes to the vuex store with the values from the response from the API.

state: {
statusOptions: []
}

then you should an action

mutations: {
update (state, payload) {
state.statusOptions = payload
}
},

actions: {
getDataFromAPI() {
return axios({
url: ‘http://10.80.101.187:8081/api/directory/presencestatus',
method: ‘POST’,
});

}

And then in the mounted() method, you can call

mounted() {
this.getDataFromAPI().then( resp => { this.$store.commit(‘update’, JSON.stringify(resp.data))})
}

It’s some sort of an example. It’s not the right syntax, but give it a try.

[Vue.js] Vue.js event passing issue

when trying to create a global child component with a button click event for adding up two numbers a and b that bound with customized properties, and then show the result on the parent component by triggering the function showResult().

I use “this.$emit(“pAdd”,v)” to trigger a customized event pAdd and call function showResult() on parent component to change the result value and show by {result}.

However, it doesn’t work.

Could someone kindly help me figuring up this issue?

<h1>To Add</h1>
<my-child :a=”5” :b=”33” v-on:pAdd=”showResult”></my-child>
<h3>\{\{result\}\}</h3>

<script>

Vue.component(‘my-child’, {
props:[‘a’,’b’],
template: “<button @click=’addme’>Add them</button>”,
methods:{
addme:function(){
var v = this.a + this.b;
// it works here
console.log(this.a,’+’,this.b,’=’,v)
// trigger event on parent component
this.$emit(“pAdd”,v)
}
}
})

var app = new Vue({
el:”#app”,
data:{
result: 0
},
methods:{
showResult:function(cval){
console.log(‘showResult: ‘,cval)
this.result = cval;
}
}
})

</script>

Solution :

Change v-on:pAdd to v-on:p-add

[Vue.js] No 'Access-Control-Allow-Origin' header is present on the requested resource laravel 5.8.8

there is installed barryvdh/laravel-cors as explained on the readme file in the github repository. I still have a No ‘Access-Control-Allow-Origin’ header is present on the requested resource error. when using vue, axios and laravel 5.8.8

Installed barryvdh/laravel-cors as well as added headers in my api.php file

My cors.php file looks like this

‘supportsCredentials’ => false,
‘allowedOrigins’ => [‘*‘],
‘allowedOriginsPatterns’ => [],
‘allowedHeaders’ => [‘Content-Type’, ‘X-Requested-With’,
‘Origin’,’Authorization’],
‘allowedMethods’ => [‘*‘],
‘exposedHeaders’ => [],
‘maxAge’ => 0,

In debugger tools i get the following

GENERAL
Request URL:http://localhost:8000/api/entriesoff
Request Method:OPTIONS
Status Code:200 OK
Remote Address:127.0.0.1:8000
Referrer Policy:no-referrer-when-downgrade
Response Headers
Allow:GET, POST, HEAD, CONNECT, PUT, DELETE, OPTIONS, PROPFIND, MKCOL
DAV:1
Request Headers
Provisional headers are shown
Access-Control-Request-Headers:x-csrf-token,x-requested-with
Access-Control-Request-Method:GET
Origin:http://127.0.0.1:8000
Referer:http://127.0.0.1:8000/

Solution :

you will use

header(‘Access-Control-Allow-Origin: *‘);

header(‘Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS’);
header(‘Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With’);

instead of barryvdh/laravel-cors

in

public/index.php

above

require __DIR__.’/../bootstrap/autoload.php’;

sample:

header(‘Access-Control-Allow-Origin: *‘);
header(‘Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS’);
header(‘Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With’);
require __DIR__.’/../bootstrap/autoload.php’;

[Vue.js] Vue.js push.route not changing the components in App

Good day.

when new to vue.js and when trying to redirect my login page to another page whenever the user login to load another page/component. The url changes and no errors are displayed however the page does not change.

EDIT: I used vue.js Tools to check out if it was redirecting and apperently it is but the form component i made still stays on screen and my someOtherComponent does show on on the screen.

Here is the code script part of my form component:

<script>
export default {

data: () => ({
valid: true,
name: ‘’,
userRules: [
v => !!v || ‘Name is required’,
],
password: ‘’,
passwordRules: [
v => (v && v.length <= 10) || ‘Password must be less than 10 characters’
],
}),

methods: {
validate () {
if (this.name == “User” && this.password == ‘99999’ && this.$refs.form.validate()) {
console.log(this.name, this.password)
this.$router.push(‘someOtherPage’)
}
},
}
}
</script>

In my router file there is the following:

import vue.js from “vue”;
import Router from “vue-router”;
import Home from “./views/Home.vue”;
import SomeOtherPage from “./pages/someOtherPage”;

Vue.use(Router);

export default new Router({
mode: “history”,
base: process.env.BASE_URL,
routes: [
{
path: “/“,
name: “home”,
component: Home
},
{
path: “/someOtherPage”,
name: “SomeOtherPage”,
component: SomeOtherPage,
},
]

});

Here is my main.js file

import vue.js from “vue”;
import ‘./plugins/vuetify’
import App from “./App.vue”;
import router from “./router”;
import store from “./store”;
import VeeValidate from ‘vee-validate’;

Vue.use(VeeValidate);
Vue.config.productionTip = false;

new Vue({
router,
store,
render: h => h(App)
}).$mount(“#app”);

My someOtherPage file is just a single sentence on a h2 tag:

<template>
<v-app>
<v-content>
<div>
<h3>This is some other page</h3>
</div>
</v-content>
</v-app>
</template>

<script>

export default {
name: ‘someOtherPage’,
data () {
return {
//
}
}
}
</script>

<style scoped>

</style>

I followed some youtube tutorials but nothing helped in my case.

Solution :

In the component file under ‘validate ()’ method Replace this line:

‘this.$router.push(‘someOtherPage’)’

to

this.$router.push(‘/someOtherPage’)

Hope this works for you.