Software

Laravel 5.5 bootstrap error

Vuejs - Tue, 2017-09-05 07:35

I am getting below error.

Uncaught Error: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.

app.js

require('./bootstrap'); window.Vue = require('vue'); import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); import VueAxios from 'vue-axios'; import axios from 'axios'; Vue.use(VueAxios, axios); import App from './App.vue'; import Login from './components/Login.vue'; import Register from './components/Register.vue'; import Activity from './components/Activity.vue'; import SelectPersons from './components/SelectPersons.vue'; const routes = [ { name: 'Login', path: '/', component: Login }, { name: 'Register', path: '/register', component: Register }, { name: 'Activity', path: '/activity', component: Activity }, { name: 'SelectPersons', path: '/selectpersons', component: SelectPersons } ]; const router = new VueRouter({ mode: 'history', routes: routes}); new Vue(Vue.util.extend({ router }, App)).$mount('#app');

bootstrap.js

Here is the file that loads every vue component or blade template pages.

<html> <head> {{Html::style('/css/bootstrap.css')}} {{Html::style('/css/style.css')}} {{Html::script('/js/bootstrap.js')}} </head> <body> <div id="app"> </div> <script src="{{asset('js/app.js')}}"></script> </body> </html>

I am using Laravel with vue. Can anybody help me to solve this issue?

Thanks

Categories: Software

Vue JS v-attr=“expression1 && exp2 && exp3” are not working

Vuejs - Tue, 2017-09-05 07:24

Vue JS v-attr=“expression1 && exp2 && exp3” are not working. I am also tried ${&}${&} and like #{&}#{&} and && and also like

#{&}#{&}

Code is available in JSFiddle

http://jsfiddle.net/yMv7y/3330/

Categories: Software

What framework to chose for the UI in an Enterprise Web Application?

Vuejs - Tue, 2017-09-05 06:43

I am working on an enterprise web application which is to be developed from scratch but traditionally the team has been using JSF for the UI with JE7 for the backend.

While JE7 is a great idea for the backend enterprise web app it is the front end that bothers me.

I am evaluating as to what could be a better framework for the front end instead of JSF? Maybe React or Vue or Angular or good old friend jQuery backed up by require.js for Asynchronous Module Definiton (AMD) of Javascript?

I read a number of posts as these :https://dzone.com/articles/vuejs-is-good-but-is-it-better-than-angular-or-rea and https://medium.com/reverdev/why-we-moved-from-angular-2-to-vue-js-and-why-we-didnt-choose-react-ef807d9f4163

If anyone has had the opportunity of a similar decision making before please share your learning.

P.S. I am aware that SO is not the right platform to post such a question but I could get the most meaningful insights on my thoughts only here.

Categories: Software

Moving Logic from Directive to Method in Vue Compoment

Vuejs - Tue, 2017-09-05 04:21

I have a VueJS component that targets the style attr like this:

<section :style="{ backgroundImage: src && 'url(' + src + ')' }"> ... <script> export default { props: ['src'] } </script>

Now, this works exactly as I wish it to (it includes the style attr if the user enters a image url and does not include it if he/she does not.

However, my understanding is that it is 'better' (in general) to separate my logic out into a method rather than include it within the :style directive.

Now, I am fairly new to VueJS and do not have a strong JavaScript backgrand and am trying to figure out how to do that, but have not been able.

As such, I'm wondering if someone could show me how to write a method (or some other recommend best practice) to achieve the same result.

Thanks.

Categories: Software

Vue.js: Cannot find module './check-versions'

Vuejs - Tue, 2017-09-05 00:42

I'm developing a Vue.js app based on the webpack template generated by vue init webpack <name-of-project>.

Everything had been working just fine, but now when I try npm run dev or npm run build I get the error:

Error: Cannot find module './check-versions' at Function.Module._resolveFilename (module.js:469:15) at Function.Module._load (module.js:417:25) at Module.require (module.js:497:17) at require (internal/module.js:20:19) at Object.<anonymous> (C:\Users\Bertie\bertie-wheen-online\build\build.js:1:63) at Module._compile (module.js:570:32) at Object.Module._extensions..js (module.js:579:10) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module._load (module.js:438:3)

I first tried generating a fresh project with vue init webpack test-webpack and compared a few key files (package.json, build/dev-server.js, build/build.js, build/webpack.base.conf.js) with the ones in my project to make sure nothing major had changed (except for my installing vue-resource and a couple of loaders for Sass and Slm, which had been working fine before). I also checked that the failing commands worked for test-webpack (to make sure it wasn't something with my system that had inexplicably gone wrong), which they did.

I then tried deleting my node_modules/ directory and re-npm install-ing, which didn't help.

Hopefully I'm missing something obvious, but I'm at a bit of a loss to figure out how to progress from here (unless I generate a fresh project and move everything across, but that feels unsatisfactorily like side-stepping the problem). What should I do? (If you need to look at any of my files to diagnose the problem, ask for them in a comment and I'll upload them.)

Categories: Software

Vue.js dynamic two way data binding between parent and child components

Vuejs - Tue, 2017-09-05 00:20

I'm trying to use a combination of v-for and v-model to get a two-way data bind for some input forms. I want to dynamically create child components. Currently, I don't see the child component update the parent's data object.

My template looks like this

<div class="container" id="app"> <div class="row"> Parent Val {{ ranges }} </div> <div class="row"> <button v-on:click="addRange" type="button" class="btn btn-outline-secondary">Add time-range </button> </div> <time-range v-for="range in ranges" :box-index="$index" v-bind:data.sync="range"> </time-range> </div> <template id="time-range"> <div class="row"> <input v-model="data" type="text"> </div> </template>

and the js this

Vue.component('time-range', { template: '#time-range', props: ['data'], data: {} }) new Vue({ el: '#app', data: { ranges: [], }, methods: { addRange: function () { this.ranges.push('') }, } })

I've also made a js fiddle as well https://jsfiddle.net/8mdso9fj/96/

Categories: Software

Vuex - Do not mutate vuex store state outside mutation handlers

Vuejs - Mon, 2017-09-04 23:33

Why do I get this error:

Error [vuex] Do not mutate vuex store state outside mutation handlers.

What does it mean?

It happens when I try to type the edit input file.

pages/todos/index.vue

<template> <ul> <li v-for="todo in todos"> <input type="checkbox" :checked="todo.done" v-on:change="toggle(todo)"> <span :class="{ done: todo.done }">{{ todo.text }}</span> <button class="destroy" v-on:click="remove(todo)">delete</button> <input class="edit" type="text" v-model="todo.text" v-todo-focus="todo == editedTodo" @blur="doneEdit(todo)" @keyup.enter="doneEdit(todo)" @keyup.esc="cancelEdit(todo)"> </li> <li><input placeholder="What needs to be done?" autofocus v-model="todo" v-on:keyup.enter="add"></li> </ul> </template> <script> import { mapMutations } from 'vuex' export default { data () { return { todo: '', editedTodo: null } }, head () { return { title: this.$route.params.slug || 'all', titleTemplate: 'Nuxt TodoMVC : %s todos' } }, fetch ({ store }) { store.commit('todos/add', 'Hello World') }, computed: { todos () { // console.log(this) return this.$store.state.todos.list } }, methods: { add (e) { var value = this.todo && this.todo.trim() if (value) { this.$store.commit('todos/add', value) this.todo = '' } }, toggle (todo) { this.$store.commit('todos/toggle', todo) }, remove (todo) { this.$store.commit('todos/remove', todo) }, doneEdit (todo) { this.editedTodo = null todo.text = todo.text.trim() if (!todo.text) { this.$store.commit('todos/remove', todo) } }, cancelEdit (todo) { this.editedTodo = null todo.text = this.beforeEditCache }, }, directives: { 'todo-focus' (el, binding) { if (binding.value) { el.focus() } } }, } </script> <style> .done { text-decoration: line-through; } </style>

stores/todos.js

export const state = () => ({ list: [] }) export const mutations = { add (state, text) { state.list.push({ text: text, done: false }) }, remove (state, todo) { state.list.splice(state.list.indexOf(todo), 1) }, toggle (state, todo) { todo.done = !todo.done } }

Any ideas how I can fix this?

Categories: Software

Responsive Props in Vue Component

Vuejs - Mon, 2017-09-04 22:52

I have a prop called src in a Vue Component that binds to a :style like this:

<template> <section :class="color" class="hero" :style="{ backgroundImage: src && 'url(' + src + ')' }"> <slot></slot> </section> </template> <script> export default { props: ['src', 'color'] } </script>

What I would like to do is to create a list of responsive props that get used depending on the device or screen size of the site visitor.

For instance, I imagine a list of props like src-sm, src-md, src-lg, etc. The user would enter different image urls for different device sizes and the style attr would use the appropriate url depending on the screen/size.

Is this possible in VueJS. If so, any idea how?

Thanks.

Categories: Software

How to send cookie token using axios?

Vuejs - Mon, 2017-09-04 20:17

Here's my code for generating token that will response as a cookie.

And I'm using axios to process it. Here's my code:

Now, I'm having a problem on how to send the token to retrieve users list. I've tried to add withCredentials: true but no luck.

I got a response error token_not_provided.

Questions:

How to get the value of the cookie token from response?
How to send the token using axios with Authorization Bearer {token}?

Thank you In Advance.

Categories: Software

vee-validate unable to validate a Combodate field

Vuejs - Mon, 2017-09-04 20:02

I am using vee-validate to validate a Combodate field. Combodate hides the text input and displays few drop down lists to pick a date. Validation using vee-validate does not work for this field. The behavior is weird.

This is how the field looks when I try to validate the form after selecting the date:

So see what is happening behind, I displayed the text input. When I selected the date, I can see the selected date in the text input.

But when I tried to click on the text input and then clicked somewhere else (on blur), the value from the text input gets removed and validation fails (validation is on blur).

If I don't blur the input when I submit the form, it starts validating the input, the value gets cleared and then the validation fails.

How can I fix this issue?

Categories: Software

Pass object as prop on Vue

Vuejs - Mon, 2017-09-04 19:30

How do you go on passing objects as props on vue? I would imagine this would be a simple task but apparently not.

I have the following code on a .vue file:

`

<template> <div id="scatter"></div> </template> <script> export default { props: { data: { type: Object, default: () => ({}) } }, mounted () { console.log(this.data) } } </script>

`

On html I try to pass the data props as follows :

When I try lo log it into the console the result is only an empty observer object.

Categories: Software

vue-js-modal draggable issue

Vuejs - Mon, 2017-09-04 18:30

I am using vue-js-modal, and have a issue with it, everytime i set my modal as :draggable="true" i can drag it but it don't let me write on the inputs, because i think it considers it as draggable elements too, how can i prevent it?

this is how i set it up:

<modal :adaptive="true" height="70%" width="60%" :resizable="true" class="modalSize" :draggable='true' name="modalPanel"> <span class="cross" @click="$modal.hide('modalPanel')"> ✖ </span>  <appPanelHistory> </appPanelHistory> </modal>

when the modal open i can't change my inputs, anyone know the issue? thanks

Categories: Software

How to call a function when store has data

Vuejs - Mon, 2017-09-04 18:10

I have to create a video player object but I need the stream object to be present before I create the video player.

The this.stream is populated by vuex data store. but I find the mounted() and created() methods don't wait for store data to be present.

Here is the Player.vue component:

import Clappr from 'clappr'; import { mapActions, mapGetters } from 'vuex'; import * as types from '../store/types'; export default { name: 'streams', data() { return { player: null }; }, computed: { ...mapGetters({ stream: types.STREAMS_RESULTS_STREAM }), stream() { return this.$store.stream; } }, methods: { ...mapActions({ getStream: types.STREAMS_GET_STREAM }) }, mounted() { this.getStream.call(this, { category: this.$route.params.category, slug: this.$route.params.slug }) .then(() => { this.player = new Clappr.Player({ source: this.stream.url, parentId: '#player', poster: this.stream.poster, autoPlay: true, persistConfig: false, mediacontrol: { seekbar: '#0888A0', buttons: '#C4D1DD' } }); }); } };

Is there a way to wait for this.stream to be present?

Categories: Software

VueJS 2 + ASP.NET MVC 5

Vuejs - Mon, 2017-09-04 18:02

I'm very new with VueJS. I have to build a single page application inside a ASP.NET MVC5.

I follow this tutorial and works very well -> TUTORIAL

But when i create a .vue page to test VueJS2 Routes, the browser does not understand "Import", i read that i have to use a transpiler like Babel, someone know how i solve it?

App.VUE

<template> <div id="app"> {{msg}} </div> </template> <script> export default { name: 'app', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script>

App.JS

import Vue from 'vue' import App from './App.vue' new Vue({ el: '#app', router, render: h => h(App), data: { message: 'Hello Vue! in About Page' } });

_Layout.cshtml

<div class="container-fluid"> @RenderBody() <div id="app"> { { message } } </div> </div> <script src="~/Scripts/essential/jquery-3.1.1.min.js"></script> <script src="~/Scripts/essential/bootstrap.min.js"></script> <script src="~/Scripts/essential/inspinia.js"></script> <script src="~/Scripts/essential/vue.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.0.1/vue-router.js"></script> <script src="~/Scripts/app.js"></script> <script src="~/Scripts/plugin/metisMenu/jquery.metisMenu.js"></script> <script src="~/Scripts/plugin/pace/pace.min.js"></script> <script src="~/Scripts/plugin/slimscroll/jquery.slimscroll.min.js"></script>

Thanks a lot!!

Categories: Software

make a vue component html refresh

Vuejs - Mon, 2017-09-04 17:38

I have a vue.js component that has an array of elements on his data and it's html it's something like this:

I can manage component 1 and 3. Component 2 is external code that I can't see or manipulate. When I delete 1 element everything breaks, but when I load component 2 with a new array of elements it works fine. Is there any way to force a reload of a component HTML?

Categories: Software

Cannot access element shown by v-if in component mounted callback

Vuejs - Mon, 2017-09-04 17:25

<template> <div> <transition name="fade" mode="out-in"> <div class="ui active inline loader" v-if="loading" key="loading"></div> <div v-else key="loaded"> <span class="foo" ref="foo">the content I'm after is here</span> </div> </transition> </div> </template> <script> export default { data() { return { loaded: false } }, mounted() { setTimeout(() => { // simulate async operation this.loaded = true console.log($(this.$refs.foo).length, $(this.$el.find('.foo')).length) }, 2000) }, } </script>

Regardless if I use this.$refs or this.$el, I'm only able to access the loader div (<div class="ui active inline loader"/>).

How am I supposed to access an element which doesn't exist when the component is mounted? Do I have to change v-if to v-show?

Categories: Software

Reactive data inside an object VueJS

Vuejs - Mon, 2017-09-04 16:40

I have an array of objects like this:

buttons: [ { name: 'ok', action: this.onOk, disabled: this.disabledButton }, { name: 'reset', action: this.onReset } ]

This array is sent to a child component as a prop.

Now, the disabledButton parent variable will change on different ocasions... Is there a way to also make my button disabled property change (without watchers and recreating the array) ??

Thank you

Categories: Software

how to hide dropdown menu if we click outside the menu in vuejs

Vuejs - Mon, 2017-09-04 16:16

I am using a dropdown menu components in vuejs to make normal dropdown menu. My code is for dropdown component is :

<template> <span class="dropdown" :class="{shown: state}"> <a href="#" @click.prevent="toggleDropdown" class="dropdown-toggle">toggle menu</a> <div class="dropdown-menu" v-show="state"> <ul class="list-unstyled"> <slot></slot> </ul> </div> </transition> </span> </template> <script> export default { name: 'dropdown', data () { return { state: false } }, methods: { toggleDropdown (e) { this.state = !this.state; } } } </script>

Now I am importing the dropdown component in my VUE app at various place by using following code in the template

<dropdown> <li> Action </li> </dropdown>

Now that is working fine but I want that only one dropdown should be active at the same time.

I have done little research and found that i can use plugins like https://github.com/davidnotplay/vue-my-dropdown but I don't want to use that. Again i have also studied how the above example works but I want to implement this dropdown functionality in such a way that my dropdown component would take care of all event related to dropdown. So can you help me how to achieve that?

Categories: Software

Array child in conditional rendering in vue.js

Vuejs - Mon, 2017-09-04 15:55

I have api on laravel and front on vue + laravel. I am getting all the data from api and pass it to view. Now I want to do conditional rendering.

My array looks like:

"data" => array:2 [▼ 0 => array:5 [▶] 1 => array:5 [▶]

I want to show div if topic from link is the same topic from array. But I do not know how to search and compare that words. So it will be like that:

v-if="$topic == this.topic"

But now I can only use

v-if="$data[]['0']['topic']"

and then I have the same topic on all my views.

My link looks like:

/user/{topic}/post

How to do it correctly guys?

Categories: Software

Why doesnt node express include my vue file?

Vuejs - Mon, 2017-09-04 15:40

So i have two script files that I am trying to include. one is a javascript file and the other a vue file.

the javascript file gets included but for some reason the vue file does not get included. I do not get any errors.

three structure:

hbs page:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">  <link rel="stylesheet" type="text/css" href="/Static/css/spaceGame.css">  <link href="https://fonts.googleapis.com/css?family=Raleway:300,400" rel="stylesheet"> <title>{{title}}</title> </head> <body> {{{body}}}  <script src="https://unpkg.com/vue"></script> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="/Static/script/space.js"></script> <script type="text/javascript" src="/Static/script/someTest.js"></script> </body> </html>

script:

var express = require('express'); var hbs = require('express-handlebars'); var app = express(); var orgininPath = require("path"); var routes = require(orgininPath.resolve('./hoast/routerHandler/routes')); app.listen(3000, function() { console.log('Listening on port 3000'); }); app.use(express.static(orgininPath.join(orgininPath.resolve('./'), 'public'))); var url = require('url'); app.engine('hbs', hbs({ extname: 'hbs', defaultLayout: 'layout', layoutsDir: orgininPath.resolve('./Views/Layout/') })); app.set('view engine', 'hbs'); app.use('/', routes); module.exports = app;

Browser includes js file but now vue file:

What am I missing?

Categories: Software

Pages