there is a component whose purpose is to display a list of items and let the user select one or more of the items.

This component is populated from a backend API and fed by a parent component with props.

However, since the data passed from the prop doesn’t have the format I want, I need to transform it and provide a viewmodel with a computed property.

I’m able to render the list and handle selections by using v-on:click, but when I set selected=true the list is not updated to reflect the change in state of the child.

I assume this is because children property changes are not tracked by Vue.js and I probably need to use a watcher or something, but this doesn’t seem right. It seems too cumbersome for a trivial operation so I must assume I’m missing something.

Here’s the full repro: https://codesandbox.io/s/1q17yo446q

By clicking on Plan 1 or Plan 2 you will see it being selected in the console, but it won’t reflect in the rendered list.

Any suggestions?

Solution :

In the example, vm is a computed property.

If you want it to be reactive, you you have to declare it upfront, empty.
Read more here: reactivity in depth.

Here’s the example working.

Alternatively, if the member is coming from parent component, through propsData (i.e.: :member=”member”), you want to move the mapper from beforeMount in a watch on member. For example:

propsData: {
member: {
type: Object,
default: null
}
},
data: () => ({ vm: {}),
watch: {
member: {
handler(m) {
if (!m) { this.vm = {}; } else {
this.vm = {
memberName: m.name,
subscriptions: m.subscriptions.map(s => ({ …s }))
};
}
},
immediate: true
}
}

there is an issue when trying to access component functions from within the config of plugins. For example, I would like to use vue-flatpickr as so:

mounted() {
this.flatpicker = flatpickr(this.$refs.dateInput, {
onChange(date) {
this.$emit(“dateChanged”, date);
}
});
}

However, I get an error

Uncaught TypeError: this.$emit is not a function

The problem is not only with emit but also with any function defined in the methods section as this points to the instance of the plugin. I realize this might not be an adequate approach, when open to any suggestions!

Solution :

Have you tried this:

mounted() {
var self = this;
this.flatpicker = flatpickr(self.$refs.dateInput, {
onChange(date) {
self.$emit(“dateChanged”, date);
}
});
}

I create a website with Laravel and Vue.js.

I has created a public page for user. And now to create an admin page. In the public page, I used app.js of Vue.js to manage that page. And now to manage admin page with Vue.js, too.

How can I do that? I think I need to create a new app.js file to manage admin page? It is right or wrong?

Solution :

You dont need to create a new app.js for the admin page seperatly , instead you call the app.js which is the vuejs framework it self and make a new component or components for admin panel like below :

<script src=”{asset(‘js/app.js’)}”></script> //both in admin and public

and here 2 components in the

resource/js/components

name them like :

admin.vue

and

public.vue

write any thing in them like this :

<template>
<div class=”container”>
<div class=”row justify-content-center”>
<div class=”col-md-8”>
<div class=”card”>
<div class=”card-header”>Example Component</div>

<div class=”card-body”>
I’m an example component.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log(‘Component mounted.’)
}
}
</script>

and now in the admin part you would write

<admin></admin> // this will call the admin.vue.js component

and in the public the same

<public></public> //this will call the public.vue.js component

and last dont forget to register the components
so in app.js do like this :

Vue.component(‘admin’, require(‘./components/admin.vue’).default);
Vue.component(‘public’, require(‘./components/public.vue’).default);

Hope This Helps.

EDIT
as you said in comments that u need to work with vue.router here is what you can do :
simple just install vue.js and add it like below :

import vue.js from ‘vue’
import Router from ‘vue-router’
import Hello from ‘@/components/admin’

Vue.use(Router)

export default new Router({
routes: [
{
path: ‘/‘,
name: ‘admin’,
component: admin
}
]
})

and in the component you simply add the router :

<router-link :to=”{ name: ‘Hello’ }”>Home</router-link>

Solution 2:

I’d like to provide a few awesome tutorials below:

Build a Guestbook with Laravel and Vue.js

The Ultimate Vue.js & Laravel CRUD Tutorial

Cheer up DIY!

Having trouble accessing form variables. I gather this should allow me access to the data but I keep seeing undefined in the console.

Vue.use(VeeValidate);

new Vue({
el: “#app”,
data: {
form: {
duration: 7
}
},
methods: {
doSubmit() {
this.$validator.validateAll().then(function(result){
if (!result){
//this means a validation failed, so exit without doing anything
console.log(‘did not work’)
return;
}
console.log(‘did work, duration is:’)
console.log(this.form)
});
}
}
});

Solution :

Try this:

Vue.use(VeeValidate);

new Vue({
el: “#app”,
data: {
form: {
duration: 7
}
},
methods: {
doSubmit() {
var self = this;
this.$validator.validateAll().then(function(result){
if (!result){
//this means a validation failed, so exit without doing anything
console.log(‘did not work’)
return;
}
console.log(‘did work, duration is:’)
console.log(self.form)
});
}
}
});

I think the issue here that the callback function inside .then has its own scope therefore its own ‘this’ is not the same as the ‘this’ in the component. It belongs to a different scope. You can preserve the component’s scope by doing var self = this; outside the callback.

You can also use an arrow function (result) => { the callback logic.. } instead of the regular function in the ‘then callback’ and then ‘this’ inside will mean the component’s ‘this’, since arrow functions does not have a separate internal scope.

like so with arrow function:

new Vue({
el: “#app”,
data: {
form: {
duration: 7
}
},
methods: {
doSubmit() {
this.$validator.validateAll().then((result) => {
if (!result){
//this means a validation failed, so exit without doing anything
console.log(‘did not work’)
return;
}
console.log(‘did work, duration is:’)
console.log(this.form)
});
}
}
});

Solution 2:

You have to fo a fat arrow function at the promise, because you are not anymore at the vue.js instance context.

I’ve built a small nuxt.js app, it is working fine on the CodeSandbox, here is a link to it: https://codesandbox.io/s/github/Ayman-Tarig/nuxt-test/tree/master/?fontsize=14

but in my local machine, it gives me an error saying:

**Range Error: Maximum stack size exceeded**

this is my GitHub repo / https://github.com/Ayman-Tarig/nuxt-test

Note: I’m using nuxt version 2.6.2 on Linux Kubuntu 18.04 os

Solution :

You may need to reinstall the node modules.
The easiest way to reinstall the node modules is to delete the node_modules folder, and re-run npm install. Everything will be reinstalled.

My routing for my site works fine but the problem arises when I hit the refresh button.

On a base route for example http://localhost:8080/employers the page or component style remains the same but when I refresh a child route for example http://localhost:8080/employers/google all the style for this component will be lost.

Any help on how to resolve this problem will be appreciated

import vue.js from ‘vue’
import Router from ‘vue-router’
// import store from ‘./store.js’

Vue.use(Router)

const router = new Router({
mode: ‘history’,
base: process.env.BASE_URL,
routes: [
{
path: ‘/‘,
component: () => import(‘./views/Home.vue’),
children: [
{
path: “”,
component: () => import(“./views/HomePage.vue”),
},
{
path: ‘/jobs’,
name: ‘jobs’,
component: () => import(‘./views/JobListings.vue’)
},
{
path: ‘/job/:id’,
name: ‘job’,
component: () => import(‘./views/JobDetails.vue’)
},
{
path: ‘/login’,
name: ‘login’,
component: () => import(‘./views/Login.vue’)
},
{
path: ‘/register’,
name: ‘register’,
component: () => import(‘./views/Register.vue’)
},
{
path: ‘/forgotpassword’,
name: ‘forgotpassword’,
component: () => import(‘./views/ForgotPassword.vue’)
},
{
path: ‘/verify’,
name: ‘verify’,
component: () => import(‘./views/Verify.vue’)
},
],
},

{
path: ‘/employer’,
component: () => import(‘@/views/Employers.vue’),
children: [
{
path: ‘’,
component: () => import(‘./views/Employers/Profile.vue’)
},
{
path: ‘profile’,
component: () => import(‘./views/Employers/Profile.vue’)
},
{
path: ‘post’,
component: () => import(‘./views/Employers/PostJob.vue’)
},
{
path: ‘listings’,
component: () => import(‘./views/Employers/Listings.vue’)
},
{
path: ‘settings’,
component: () => import(‘./views/Employers/Listings.vue’)
},
{
path: ‘editresume’,
component: () => import(‘./views/Employers/Listings.vue’)
},
{
path: ‘closeaccount’,
component: () => import(‘./views/Employers/Listings.vue’)
},
]
},

// jobseekers route
{
path: ‘/jobseeker’,
component: () => import(‘@/views/Jobseekers/Home.vue’),
children: [
{
path: ‘’,
component: () => import(‘@/views/Jobseekers/Profile.vue’)
},
{
path: ‘resume’,
component: () => import(‘@/views/Jobseekers/Resume.vue’)
},
{
path: ‘profile’,
component: () => import(‘@/views/Jobseekers/Profile.vue’)
},
{
path: ‘settings’,
component: () => import(‘@/views/Jobseekers/Settings.vue’)
},
{
path: ‘applications’,
component: () => import(‘@/views/Jobseekers/Applications.vue’)
},
{
path: ‘close’,
component: () => import(‘@/views/Jobseekers/Close.vue’)
},
]
},

{
path: ‘/jobseeker/:page’,
component: () => import(‘@/views/Jobseekers/Profile.vue’),
},

{
path: ‘/search/:region/:keyword’,
component: () => import(‘./views/JobListings.vue’)
},

// not found route
{
path: ‘*‘,
name: ‘404’,
component: () => import(‘./views/404.vue’)
}
]
})

export default router

Solution :

The problem is not with the routes, but how you write the css.

I recommend using a scoped style for in component styling (only this component will use the styles).
if more than one components are going to share styling, you can use css files separately.

there is component nabber/header that has a props, and to put the props in that component and then want to use that props on another props, how to put that props to get that data and transfer it to another component ? because to use that props to CRUD in database ? is that possible that we use $root to get that props which we put on App.vue.js ??

my components

header = [ props : ‘list’ ]
shop = add to cart, ( this which to transfer it to props list ) and go CRUD , is that possible ??

Solution :

I suggest learning a bit more about Vuex to solve this problem.

This will give you a logical place to define database related actions that can also provide reactive data to components that will display it. Even if you’re relatively new to Vue, learning Vuex sooner rather than later will payoff.

It may also be possible for you to use v-model to extricate some data from one component… but what you’ve described seems a bit different. It might be worth looking at how to implement v-model on the own components as you become more familiar with Vue!

when trying to setup a simple timeout in vue.JS but somehow it seems that the waiting time is not working as my parse function is triggered immediately instead of 5 seconds later

props: {
url:String
},
data(){
return{
typingTimer:null,
doneTypingInterval: 5000
}
},
methods: {
parseTimeout(url){
clearTimeout(this.typingTimer);
this.typingTimer = setTimeout(
this.parse(url),
this.doneTypingInterval
);
},
parse(url){
console.log(‘triggered’)
},
},
watch: {
url(){
this.parseTimeout(this.$props.url)
}
}

Solution :

You are calling this.parse(url)
but you need to pass function
https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

this.typingTimer = setTimeout(
() => this.parse(url),
this.doneTypingInterval
);

vue.js.js : how to load dependent components?

From router currently using component as follows:

import A from ‘./A’;

export default {
components : {
‘new-comp-A’ : NewCompA
}
}
…

But this renders the template before import causing errors. Is there a better way for loading dependencies?

The template uses the - did you register the component correctly.

Solution :

the casing is incorrect. Use either ‘NewCompA’ or ‘new-comp-a’ for the name.

In fact, it would be even easier to use

import NewCompA from ‘wherever/the/component/is/defined’

export default {
components: {
NewCompA
}
}

the template can then use either

<NewCompA></NewCompA>
<!– or –>
<new-comp-a></new-comp-a>

See https://vuejs.org/v2/guide/components-registration.html#Name-Casing

how to make bewtween components get the result of total shopping cart when client increement or decrement stock in vue.js js ?

there is 3 components in this case

one is header/navbar.vue.js which has icon cart / when using modal.
shop.vue.js for add to cart,
and detail.vue.js has add to cart also

i already be able to add cart in the shop.vue.js and add it to database, but i don’t know how to make them communication when client increst the stock, and also when client add to cart for several times, the item i make is one by one
like
when client add cart item1 , and then it show on 1 stock cart basket, the item one, and client add to cart again the item1 with stock one , it gonna add to cart basken also, it doesnt make the item to be item1 2 stocks, i don’t know how to make them automatically to be like that
here is some code from my

addcart(val) {
this.$axios
.post(
‘/api/cart/addcart’,
{
item: val,
amount: 1,
},
{
headers: token,
},
)
.then(({ data }) => {
console.log(‘added’)
})
.catch(err => {
this.$swal.fire({
type: ‘error’,
text: err.response.data.error,
});
});
}

and on my header/navbar/ to fet the cart, i fecth the data from server to get user id cart shoing on cart icon
when suing MongoDB , Mongoose for server and database
is there any simple example to make beteween component comunivation to get recenive and send data for this case ????

Solution :

You might consider to create a common owner component to share the state between those component, from the Thinking in React:

For each piece of state in the application:

Identify every component that renders something based on that state.

Find a common owner component (a single component above all the components that need the state in the hierarchy).

Either the common owner or another component higher up in the hierarchy should own the
state.

If you cant find a component where it makes sense to own the
state, create a new component simply for holding the state and add it
somewhere in the hierarchy above the common owner component.

In the case, the component can be nested under a common owner component:

Container.vue/

Navbar.vue.js /

Shop.vue.js /

Detail.vue.js /

If you updating the cartItem in Shop.vue, you can updated the result by using emit

I create a codesandbox to repeat the problem.

Here is the link: https://codesandbox.io/s/132v86qm4q

Hope I solve the problems!