Software

Im lost. I dont know and I dont understand how can I correctly register and render component nested in other component. Run this example please, click on About link a look to console. There is warning about component registering.

var appLayout = { template: ` <div id="app" class="container"> <header> <slot name="header"></slot> </header> <slot></slot> <footer> <slot name="footer"></slot> </footer> </div> ` } var home = { template: ` <main> <h3>Home</h3> </main> ` } var about = { template: ` <main> <nested-component></nested-component> </main> ` } var nestedComponent = { template: ` <main> <h3>About</h3> </main ` } var routes = [ { path: '/', component: home }, { path: '/about', component: about } ] var router = new VueRouter({ routes }) new Vue({ template: '#app', router, components: { appLayout } }).$mount('#app') .fade-enter-active, .fade-leave-active { transition-property: opacity; transition-duration: 0.4s; } .fade-enter-active { transition-delay: 0.2s; } .fade-enter, .fade-leave-active { opacity: 0; } <template id="app"> <app-layout> <nav slot="header"> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> </nav> <transition name="fade"> <router-view></router-view> </transition> <p slot="footer"> Copyright notice </p> </app-layout> </template> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.7.0/vue-router.min.js"></script>

If I navigate directly to an admin guarded route, http://127.0.0.1:8000/dashboard/, the navigation is always rejected because the state hasn't yet loaded at the time the router guard is checked.

beforeEach is being executed before Vue created and thus the currently logged in user isn't recognized.

How do I get around this chicken and egg issue?

files below truncated for relevancy

main.js router.beforeEach((to, from, next) => { // // This is executed before the Vue created() method, and thus store getter always fails initially for admin guarded routes // // The following getter checks if the state's current role is allowed const allowed = store.getters[`acl/${to.meta.guard}`] if (!allowed) { return next(to.meta.fail) } next() }) const app = new Vue({ router, store, el: "#app", created() { // state loaded from localStorage if available this.$store.dispatch("auth/load") }, render: h => h(App) }) router.js export default new VueRouter({ mode: 'history', routes: [ { path: '/', name: 'home', component: () => import('../components/Home.vue'), meta: { guard: "isAny", }, }, { path: '/dashboard/', name: 'dashboard', component: () => import('../components/Dashboard.vue'), meta: { guard: "isAdmin", }, }, ], })

<router-link to="/" tag="span" style="{ cursor: pointer; }">Name</router-link>

But style is not applied and cursor remains text cursor when the mouse is over this element.

Full code:

<v-toolbar-title class="white--text"> <router-link to="/" tag="span" exact style="{ cursor: pointer; }">Name</router-link> </v-toolbar-title>

I have a problem by which I'm unable to make Vue-Multiselect display what I want properly.

Current Behaviour:

Here is my code:

<multiselect v-model="displayCategories" :selected="displayCategories" :options="optionsForSubCat" :searchable="false" :allow-empty="true" deselect-label="Can't remove this value" label="subCategories" track-by="subCategories" > </multiselect>

This is my json object to display the Type of Sub-Category:

"displayCategories": { "categoryId": "3080854a-13d9-4e38-ab96-358aa6405a2c", "categoryName": "Furniture", "subCategories": [ { "subCategoryName": "Sofa", "subCategoryId": "21eb061d-9c67-4c55-ac48-e33e684a307c", "createdAt": "2017-07-24T13:07:18.000Z", "updatedAt": "2017-07-24T13:08:28.000Z", "fk_categoryId": "3080854a-13d9-4e38-ab96-358aa6405a2c" }, { "subCategoryName": "Bed", "subCategoryId": "2af11eee-5fce-4d97-b483-00a02de123ca", "createdAt": "2017-07-24T13:06:04.000Z", "updatedAt": "2017-07-24T13:08:28.000Z", "fk_categoryId": "3080854a-13d9-4e38-ab96-358aa6405a2c" } ] }

Even if i changed the label and track-by to "subCategoryName", it does not even show the dropdown at all.

The expected behaviour would be Multiselect would show "Sofa", "Bed" in the dropdown.

How do i go about achieving the expected behaviour?

Thank you for your help!

I am new to vue.js but I have a simple question. I followed a tutorial but I want to extand it just a tiny bit :-P

Everytime when my rank changes I want to add a css class to animate the label. How can I do this little thing?

<div id="app"> <h1>Current Rank: <strong>{{ rank }}</strong></h1> <p>Your XP: <strong>{{ xp }}</strong></p> <button @click="increase">+ 10 XP</button> <button @click="decrease">- 10 XP</button> </div> var app = new Vue({ el: "#app", data: { xp: 10 }, methods: { increase: function() { return this.xp += 10; }, decrease: function() { return this.xp -= 10; } }, computed: { rank: function() { if (this.xp >= 100) { return "Advanced"; } else if (this.xp >= 50) { return "Intermediate"; } else if (this.xp >= 0) { return "Beginner"; } else { return "Banned"; } }

} });

https://jsfiddle.net/0caprx4L/

I'm facing interesting problem...

I do have a form separated into steps - like wizard. Each step (even the 1st one) is loaded from server, where sits Django. The wizard itself is Vue component. Everything works fine together but now I would like to add a component into HTML, that is returned from server. The thing is Wizard (Vue) can only display HTML loaded from server, it cannot parse incomming HTML for new components and instantiate them. This is the point where I remembered Server Side Rendering.

My question is where to start if I wanna render the template that is rendered by Django render again via Vue.

Maybe there is nother approach. All I want is to have another rich component in my incomming form not just dumb HTML.

Thank you.

I have a DataTable from Vuetify in my current project, but it seems as though there is no alphabetical sorting for Strings. I want to make it so that fields of type String can be sorted as well. Vuetify documentation specifies that there is a custom-sort built-in function (https://vuetifyjs.com/components/selects), but I can't find any examples of exactly how to use it. Could someone who's used it please provide some information on how to implement it or point me to a link with some documentation?

Note: I am fairly new to front-end development, so I'm not sure if I'm missing something obvious?

For a project, I'm using a library that I have built in order to share Vue components across the different applications.

So I import my component library as a npm module and I added it to the application package.json and that works fine.

The problem is that when I try to import something in the single component in the components library the application can't solve the dependencies of that component.

e.g component in the component library:

<template> <!-- my html --> </template> </script> // my script </script> <style scoped> // here I import the basic style for the component: @import "../../assets/base";

in the application package.json I have:

"components": "git+ssh://git@git.xxxxx.com:xxxxx/xxxxx/my-library.git#development",

and then I use the component normally in my project like this:

import MyComponent from "./components/MyComponent.vue";

The component library works fine, but when I import the component in the application I get the following error from webpack:

This dependency was not found: * -!../../../../css-loader/index.js?sourceMap!../../assets/base in ./~/css-loader?sourceMap!./~/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-28803148","scoped":true,"hasInlineConfig":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./~/components/src/core/MyComponent.vue To install it, you can run: npm install --save -!../../../../css-loader/index.js?sourceMap!../../assets/base

Of course if I substitute the @import with the actual css needed everything works fine. How can I make this configuration works?

I use vibed server. It use Pug preprocessor (before known as Jade). Here is my page code:

doctype html html head script(src="https://unpkg.com/vue") script(src="app.js") title Hello, World body h1 Hello World #app |{{message}}

It generate next HTML output:

<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/vue"></script><script src="app.js"></script><title>Hello, World</title> </head> <body> <h1>Hello World</h1> <div id="app"> {{message}} </div> </body> </html>

My app.js code:

window.onload = function() { var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }); app.$mount('#app'); }

But it's do not work. In browser console I am getting next error: Cannot find element: #app

upd: moving script(src="app.js") to down helped. But is there any better variant? Or it's ok?

I am using VeeValidate for validating a form. However, I want to submit the form without using JS. However, I still want users not to be able to submit, if there are any errors. If I use

<form @submit.prevent="validateBeforeSubmit">

it is disabling the default action completely.

Can you think of any solution to this? Thank you!

I just came upon Components section (One-way data flow) and I can't figure out how to show computed properties from them.

<div id="demo"> <input v-model="parentMsg"/> <child v-bind:my-message="parentMsg"></child> </div>

JS:

var Child = { props: ['myMessage'], template: '<span>{{ lowerCaseMsg }}</span>', computed: { lowerCaseMsg: function() { return this.myMessage.trim().toLowerCase(); } } }); var data = { parentMsg: 'Message' } var demo = new Vue({ el: '#demo', data: data, components: { child: Child } })

see below my-component.vue.This Component needs to be themable.

It needs to get extrenal css sheet as i need to allow other developers to customize its inner look.

Is there any other approach than accept a javascript object?

<template> <div class="container"> <div class="A"></div> <div class="B"></div> <div class="C"></div> </div> </template> <style scoped> .A { background-color:green; } .B { background-color: red; } .C { background-color: yellow } </style>

<template> <div id="tinymce"> <h3>This is the tinyMCE editor</h3> <textarea id="editor" v-editor :body="body"></textarea> <hr> <p>This input field is properly binded</p> <input v-model="body"> <hr> <pre>data binding: {{ body }} </pre> </div> </div> </template> <script> tinymce.init({ selector:'#editor', }); Vue.directive('./../../assets/tinymce/tinymce.min.js', { twoWay: true, params: ['body'], bind: function () { tinyMCE.get('editor').setContent(this.params.body); tinyMCE.get('editor').on('change', function(e) { alert("changed"); }); }, update: function (value) { $(this.el).val(value).trigger('change') }, }); export default{ data(){ return{ post:{}, body:'test' } } } </script>

This is my code so I want to integrate tinymce with vuejs

When I load the component I got an error "Uncaught ReferenceError: tinymce is not defined"

What I am doing wrong

Can someone help me please

I just created my portfolio website http://ashishpatel.info using laravel and vue-router, now i wanted to host it on aws ec2-instance, and we can do it in two ways, 1- using php artisan,

php artisan serve --host=0.0.0.0 --port=80

2- using apache/nginx and doing some change in apache2.conf etc.

I wonder which is best way for doing it for production for handling more traffic?

My tr witd td's are not in my table... why? They are out of the table. I don't know why.

My view:

<table class="table-responsive"> <todo-list v-for="todo in todos" v-bind:todo-obj="todo" v-bind:key="todo.id" :todoObj.sync="todo" v-on:usun="deleteTod"></todo-list> </table>

And here is my component:

Vue.component('todoList', { props: ['todoObj'], template: '<tr>' + '<td><div class="round"><input id="todoObj.id" type="checkbox" v-on:click="toggle" v-model="todoObj.done" /><label for="todoObj.id"></label></div></td>' + '<td class="textTodo">{{todoObj.description}}</td>' + '<td><button v-on:click="deleteTodo" class="btn-xs btn-danger">delete</button></td>' + '</tr>',

And second problem is that my checboxes are not working. They looks fine, but they don't want to toggle... They only react when checking the first row from table. Why?

I'm using vue-isotope component from https://github.com/David-Desmaisons/Vue.Isotope

I'd like use layout-mode: 'packery' and I have installed the node module packery. So I have imported this module in my file vue but dosn't work, like this:

import isotope from 'vueisotope' import 'packery

Any ideas? Thanks

I am developing some Vue components that I would like to place in an NPM package. The problem that I am facing is that I have no idea how to publish components that rely on a Vuex module.

I have neatly placed all the code needed for this library of components into a separate Vuex module but how do I register my module when somebody imports my package?

A good start would be creating a plugin I guess but I would still need to check for a Vuex instance and somehow register my module.

I've seen plenty of tutorials on how to publish Vue components but not something more complex.

Any suggestions?

I'm currently using Vuetable-2 to display data from my server.

Is there a way to display multiple json objects from a nested json to a a cell data in Vuetable?

Response payload from server:

Current Table Format:

Expected result:

I'm trying to use x-editable on a VueJs file inside of a symfony project. So what I did is first i went on http://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js

and copy the content in a file

/path/to/file/web/js/xeditable/bootstrap3-editable/js/bootstrap-editable.min.js

I also have a file

path/to/file/web/js/xeditable/bootstrap3-editable/css/bootstrap-editable.css

In my vue I have :

<span href="#" id="productName"> {{{ product.name }}} </span> <script> $( "#productName" ).editable(); import js from "path/to/file/web/js/xeditable/bootstrap3-editable/css/bootstrap-editable.css"; import xeditable from "/path/to/file/web/js/xeditable/bootstrap3-editable/js/bootstrap-editable.min.js" export default { [...] components: {xeditable} [...]

But nothing happend

I am using Vue and Vue Grid Layout to make a dashboard application. When the user connects to the application with his account, his widgets are retrieved from a MongoDB database and displayed on the Home page with vue grid layout.

The error doesn't occur on first load, but always occurs when the user navigates through an other page (using Vue router) like his profile or settings, and then returns to the Home Page. Vue router doesn't seem to be the problem as the URL changes.

The error seems to be from Vue Grid Layout since when i comment the code the error doesn't appear.

Here is the exact error : Screenshot

Thanks in advance,