Feed aggregator

I am working with vuejs draggable sortable, and basicly i have 2 lists, list1 and list2, i want to drag items from list1 to list2.

At the beginning i need to have a div above my list2, or something similiar can be just a paragraph to indicate that the user should drag the elements there. if i try to put the div inside the draggable it affects the behaviour of the same, if i center the paragraph for example and try to drag elements above that paragraph in the div it don't consider it as a draggable zone, any help with this?

this is my draggable list2:

<draggable class="box" @change="elementPosition" v-model="myList" :options="{group: getSectionOptions,put:false }"> <transition-group id="list2" class="box-header with-border drop-zone style-scroll" style="overflow-y: auto; height:80vh;display:block;padding:5px" name="list-complete"> <div v-for="(value, key, index) in myList" :key="key" @click.prevent="changeView(value.key,key)" v-if="value.key != 'Document'" class="panel panel-color list-complete-item item"> <div class="quote box-body"> <p v-if="value.key"> <span class="spanWidth" v-if="value.key == 'line break' || value.key == 'page break'">Break</span> <span class="spanWidth" v-else>{{value.key}}</span> <span class="spanWidth text-muted" v-if="value.key == 'Table'"> (rows:{{value.rows}};cols:{{value.cols}})</span> <span class="spanWidth text-muted" v-if="value.key == 'Paragraph'">({{ value.text | truncate }})</span> <span class="spanWidth text-muted" v-if="value.key == 'Image'"> (width:{{value.width}};height:{{value.height}})</span> <span class="spanWidth text-muted" v-if="value.key == 'heading'"> ({{value.headingType}})</span> <span class="spanWidth text-muted" v-if="value.key == 'line break' || value.key == 'page break'">({{value.key}})</span> <span class="spanWidth text-muted" v-if="value.key == 'List'">(items:{{value.items.length}})</span> <span @click.stop="removeSection(index,key)" class="pull-right spanWidth"><i class="fa fa-lg fa-close"></i></span> </p> <p v-if="!value.key">{{value.description}}</p> </div> </div> </transition-group> </draggable>

io.on('connection', socket => { })

This snippet gives you instance 'socket', but I am currently in need of using that instance somewhere else in my project.

Is there a way of accessing it by the port it's running on or similar?

I am trying to change the state in Vuex (Vue.js) with Sockets, which I'd put into a handler in a REST Api.

I am using this vue carousel package, and I am trying to set the icons as navigation buttons, like this:

<carousel :perPage="1" :navigationEnabled="true" :navigationNextLabel="'<i class="material-icons">keyboard_arrow_right</i>'" :navigationPrevLabel="'<i class="material-icons">keyboard_arrow_left</i>'" > <slide v-for="testimonial of testimonials" :key="testimonial.id"> <img v-if="testimonial.image" :src="testimonial.image.data.path" class="is-96x96"> <h4>{{ testimonial.title }}</h4> <p>{{ testimonial.excerpt }}</p> </slide> </carousel>

But, for some reason, it is not working, I get this as the output in the html:

I hava a simple table, every tr is a link with a sepcific order, but I have to have one extra column n th with checking or this order is already in store. ( with checboxes ) I can't to this because when I add this, then all row i a link, but I want to this last column wasn't a link, but simple checboxes. Here is my code:

<table class="table"> <tr> <th>Order Number</th> <th>Name</th> <th>Tel</th> <th>Email</th> <th>Status</th> <th>Order date</th> <th>IS in store?</th> </tr> <router-link :to="'/orderDetail/'+order.id" tag="tr" v-for="order in orders" :key="order.number" class="order-row"> <td>{{order.number}}</td> <td>{{order.client_name}}</td> <td>{{order.phone}}</td> <td>{{order.email}}</td> <td>{{order.actual_status}}</td> <td>{{order.order_date}}</td> <td>Here should be checbox with id of roder, but not as a link</td> </router-link> </table>

I am using this mixin - But it gives me an error in IE11, not in Chrome, FF, Safari, so it seems it's only a IE related issue..

The error im getting is: Error in callback for watcher "inViewport.now": "TypeError: Object doesn't support this action" (WAT?)

The watcher code looks like:

watch: { 'inViewport.now': function(visible) { if(visible) { this.loadDataToSystem(); this.elementIsVisible = true; //Update graph with new data this.resetTimer(); this.updateGraphOptions.minutes = updateIn; this.updateGraphDataTimer = setInterval(function () { this.loadDataToSystem(); }.bind(this), 300000); } else { this.elementIsVisible = false; //Stop updating graph this.stopTimer(); clearInterval(this.updateGraphDataTimer); this.updateGraphOptions.minutes = null; this.updateGraphOptions.started = false; } } },

Do anyone have an idea on what is wrong?

My question is just like this one:Vuejs $emit doesn't fire on callback. But I used the superagent in my project. Here is my code:

//Parent.vue <Child v-on:savevideo="toSaveVideo"/> ... methods:{ toSaveVideo:function(data){ console.log('add'); } } //Child.vue <button @click="toAdd">Add</button> ... methods:{ toAdd:function(){ ... let self = this; superagent .get(url) .query({data:data}) .end(function(err,res){ //trigger parent function let resData = res.body.data; self.$emit('savevideo',resData); }) } }

The request is successful but when trigger 'savevideo', the method 'toSaveVideo' in parent didn't print anything. However, when I put the emit outside the callback, everything is fine. Why does the $emit event not fire in a callback?

Actually I have this code, where I access to assets folder(inside of public).

<div class="itemProjectImage" :id="'itemProjectImage_'+i" :style="'background-image:url(/assets/img/projects/'+project.slug+'/home.jpg'"> </div>

What I really want is access like this to storage, but with vue.

<p class="lead"><img src="{{ asset('/storage/employees/'.$employee->slug.'/'.$employee->slug.'.'.'jpg') }}" width="50%" ></p>

¿Which is the correct way?

Thanks

I want to fade my div when I click one of my A. I can not do it. Can you help me? Here's my code

<div class="item"> <transition name="fade"> <div v-if="show"> <a @click.prevent="Submit(0); show = !show;" href="#"></a> <a @click.prevent="Submit(1); show = !show;" href="#"></a> </div> </transition> </div> data() { return { show: true, }

I am starting to lose my mind in debugging an application that I inherited from a fellow developer who is absent. I have narrowed down the problem to the following place in code (php files are checked, Vue instances are initialised, there are no syntax errors).

This is my the component that gets initialised:

var RadniStol = Vue.component('radnistol', { template: '#template-RadniStol', data() { return { tableData: [], requestData: { sort: "ID", order: "DESC" } } }, methods: { reloadTable: function (event) { data = this.requestData; this.$http.post('php/get/radni_stol.php', data).then(response => { console.log(response.data.bodyText); this.tableData = response.data.records; }); }, . . .

The PHP file that gets called with the POST method is working correctly, querying the database and echoing the response in a JSON format.

The thing that is making me pull out my hair is the following: the console.log(response.data) outputs the following into the console:

{"records":[{"DODAN_NA_RADNI_STOL":"1","..."}]}

It is an JSON object that I expected to have but when trying to assign it to the data of the component with:

this.tableData = response.data;

or any other way… response.data.records returns ‘undefined’ in the console. I have tryed with JSON.parse() but no success.

When logging types to console: response variable is a response object with a status 200 and body and bodyText containing the data from the database. response.data is a string type containing the string JSON with the data from the database.

I am really starting to lose my mind over this issue, please help!

Thank you

I'm currently struggling with the Vue instance concept. I'm using the vue-loader with webpack and created a vue component that I'm importing.

import Vue from 'vue'; import Search from '../Search.vue'; const vm = new Vue({ el: 'search', render: h => h(search) });

On the component:

export default { data: function() { return { results: 'current results' } } }

I want trigger and event from inside of the component (on a property change) that I can watch from the instance.

Using the API should be something like this:

vm.$watch('results', function (newVal, oldVal) { // do something })

But I does not trigger anything.

I think I'm missing to understand how to use the Vue instance because I can't also add any data on initialization of the instance that is accessible on the component like:

const vm = new Vue({ el: 'search', data: {index: 1}, render: h => h(search) });

Index is also not available inside of the component to use.

How do I fix this?

I tried to use the plugin for a project with Vue 2 but got a Vue warn like below.

[Vue warn]: Failed to mount component: template or render function not defined

Inside vue component:

import ToggleButton from 'vue-js-toggle-button' export default { components: { ToggleButton } }

Then,

<toggle-button :value="true" :labels="{checked: 'Foo', unchecked: 'Bar'}"/>

The plugin is not that popular and any help would be much appreciated.

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

window._ = require('lodash'); /** * We'll load jQuery and the Bootstrap jQuery plugin which provides support * for JavaScript based Bootstrap features such as modals and tabs. This * code may be modified to fit the specific needs of your application. */ try { window.$ = window.jQuery = require('jquery'); require('bootstrap-sass'); } catch (e) {} window.Vue = require('vue'); /** * We'll load the axios HTTP library which allows us to easily issue requests * to our Laravel back-end. This library automatically handles sending the * CSRF token as a header based on the value of the "XSRF" token cookie. */ window.axios = require('axios'); window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; /** * Next we will register the CSRF Token as a common header with Axios so that * all outgoing HTTP requests automatically have it attached. This is just * a simple convenience so we don't have to attach every token manually. */ let token = document.head.querySelector('meta[name="csrf-token"]'); if (token) { window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content; } else { console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token'); } /** * Echo exposes an expressive API for subscribing to channels and listening * for events that are broadcast by Laravel. Echo and event broadcasting * allows your team to easily build robust real-time web applications. */ // import Echo from 'laravel-echo' // window.Pusher = require('pusher-js'); // window.Echo = new Echo({ // broadcaster: 'pusher', // key: 'your-pusher-key' // });

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

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

#{&amp;}#{&amp;}

Code is available in JSFiddle

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

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.

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.

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.)

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/

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?

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.

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:

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

Thank you In Advance.