Vuejs

I have a variable in my component data, which I can access in my element with;

<input :id="guid">

I want to use this guid with v-bind:class; something like this:

v-bind:class="{ 'has-warnings': warnings[guid]['name'] }" >

I also tried this but no chance:

v-bind:class="{ 'has-warnings': warnings[{{guid}}]['name'] }" >

Is there a way to do it?

I'm developing a small application in VueJS 2.0 where I'm having a data set something like this:

{"data": [ { "id":8, "salutation":"Mr", "first_name":"Madhu", "last_name":"Kela", "number":"2343253455", "mobile":"3252345435", "email":"madhu@reliancemf.com", "alt_email":null, "address":"Mumbai BKC", "city":"Mumbai", "state":null, "country":"India", "profile":null, "sectors_interested":"[\"Insurance\",\"Infrastructure\",\"Information Technology\",\"hevy machines\",\"Healtcare\"]", "companies_interested":"[4]", "interactions_count":11, "client_interactions_count":0, "company":[ { "id":7, "name":"Reliance MF", "address":"Mumbai BKC", "city":"Mumbai", "state":null, "country":"India", "type":"Investor", "sub_type":"Mutual Fund", "is_client":0, "pivot":{ "contact_id":8, "company_id":7, "created_at":"2017-07-01 17:07:08", "updated_at":"2017-07-01 17:07:08" } } ] }, { "id":7, "salutation":"Ms", "first_name":"XYZ", "last_name":"ABC", "number":"1847171087", "mobile":"8327523057", "email":"skbkjgerbra@dabflvdjf.com", "alt_email":null, "address":"Mumbai", "city":"Mumbai", "state":null, "country":"India", "profile":null, "sectors_interested":"[\"Insurance\",\"Information Technology\",\"Infrastructure\",\"hevy machines\"]", "companies_interested":"[6,4]", "interactions_count":8, "client_interactions_count":0, "company":[ { "id":3, "name":"Franklin Fun", "address":"Mumbai", "city":"Mumbai", "state":null, "country":"India", "type":"Investor", "sub_type":"Mutual Fund", "is_client":0, "pivot":{ "contact_id":7, "company_id":3, "created_at":"2017-07-01 16:59:41", "updated_at":"2017-07-01 16:59:41" } } ] } ] }

I want map these values something like this:

return this.model.map(d => ({ name: d.first_name + ' ' +d.last_name, company: d.company[0].name, email: d.email, mobile: d.mobile, profile: d.profile, count: d.interactions_count ? d.interactions_count : d.client_interactions_count }))

Also as you see in the code I want to place interactions_count by comparing i.e. if interactions_count is 0 I want to map with client_interactions_count, I'm unable to get company name from the first array parameter, whatever it comes by response. Help me out in this. Thanks.

In my Laravel app i'm submitting a form with vue and axios. After the submit i want to clear the input field in the form, but it wont work.

HTML:

<form method="post" enctype="multipart/form-data" v-on:submit.prevent="addPost"> <textarea id="post_area" v-model="content"></textarea> ..... </form>

JS:

const app = new Vue({ el: '#app', data: { content: '', posts: [] }, ...... .then(function (response) { if(response.status===200) { //reload posts app.posts = response.data; this.content = ''; } })

It just wont clear out the input field.

I'm developing a small application in VueJs where I'm having a div element and trying to show element if the data value is 1 and hide if the data value is 0, for this I'm having v-model as withClient something like this:

<div class="col-sm-6"> <label class="col-sm-6 control-label">With client*:</label> <div class="radio col-sm-3"> <input type="radio" name="with_client" v-model="withClient" value="1" checked=""> <label> Yes </label> </div> <div class="radio col-sm-3"> <input type="radio" name="with_client" v-model="withClient" value="0"> <label> No </label> </div> </div>

And the element which needs to be hidden:

<div class="col-sm-6"> <label class="col-sm-3 control-label">Clients:</label> <div class="col-sm-8" v-if="withClientSelection"> <v-select multiple :options="contactClients" :on-search="getOptions" placeholder="Client name" v-model="clientParticipants"> </v-select> </div> </div>

I've computed property as withClientSelection:

withClientSelection() { if(this.withClient === 0) { this.clientParticipants = '' return false } else { return true } }

But somehow I'm not able to get this. Help me on this. Thanks

I've purchased a plugin called filePicker that I want to use in one of my vue.js components.

The plugin author shows only the usual way to import the js scripts at the end of the element like so:

<script src="js/filepicker.js"></script> <script src="js/filepicker-drop.js"></script>

In my component, I did the following:

<template> </template> <script> import {filepicker} from '../filepicker'; import {filepickerdrop} from '../filepicker-drop'; </script>

The first import filepicker.js works but with the 2nd (filepicker-drop) I get the following error when I try to compile

ERROR Failed to compile with 1 errors

This dependency was not found: * fs in ./node_modules/request/lib/har.js

To install it, you can run: npm install --save fs

Running npm install --save fs doesn't remove the error.

The file filepicker-drop.js includes this:

(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('jquery'), require('filepicker')) : typeof define === 'function' && define.amd ? define(['jquery', 'filepicker'], factory) : (factory(global.jQuery,global.Filepicker)); }(this, function ($,Filepicker) { 'use strict'; $ = 'default' in $ ? $['default'] : $; Filepicker = 'default' in Filepicker ? Filepicker['default'] : Filepicker; // more code here ... }));

Is there a way to import this script inside the component?

My express server is set to run on port 8081. I start it up with nodemon server/start.js

My Vue app runs on port 8080. I run nodemon build/dev-server.js to start it.

The problem I have is if express server is running on 8081, I can't run Vue app. It just ends with this error: Starting dev server... [1] Killed

I can start Vue if express is not running though.

I'm using NGINX btw.

I am trying to mimic the spreadsheet feature where I can select multiple table cells by pressing shift + mouseover, and I am having some trouble getting it to select the nearby cells that fall within the start and end range of the selection. So for example, with a 3x3 grid, cell 0,0 is the start cell, when I mouseover 0,1, and 1,1 1,0 should also get selected as it falls within the range. Here is the logic I have so far, but it only selects the cells as the mouse passes over (non of the adjacent cells get selected).

Here is my code:

selectCell (row, col) { this.coors.push({x: row, y: col}) let len = this.coors.length - 1 this.start = {x: this.coors[0].x, y: this.coors[0].y} this.end = {x: this.coors[len].x, y: this.coors[len].y} this.grid[row].splice(col, 1, 2) this.iterateOverGrid(2) }, iterateOverGrid (col) { for (let i = this.start.x; i <= this.end.x; i++) { this.grid[i].splice(this.end.y, 1, col) for (let j = this.start.y; j <= this.end.y; j++) { this.grid[i].splice(this.end.y, 1, col) } } },

start holds the x and y position of the first cell selected; end holds the x and y position of the last cell selected. The idea is to iterate over each row and column in the grid (which I am attempting to do in my iterateOverGrid() method) and then assign a value of 2 to each cell that falls within the start end parameter. How exactly can I achieve this?

I am building with following scenario. Parent creates multi instances of a child component. Each child holds its data via input field. Child can ask to be removed and parent removes that instance. so far so good. So now is the problem, as soon as that instance is removed, its data gets passed/leaked to next sibling instance and if that instance is holding data, it gets moved to other next-to-it instance. I have reproduced it on [fiddle][1]

or see below

Vue.component('child', { props:['data'], template: ` <div> index# {{data}}: {{messages}} <input type="text" v-model="text" @keypress.enter="addMessage"> <button @click="addMessage">Add</button> <button @click="$emit('delete-me')">Delete</button> </div>`, data() { return { messages:[], text: '' } }, methods: { addMessage() { this.messages.push(this.text) this.text = '' } } }) Vue.component('parent', { template: ` <div> Keep Adding new Instances <button @click="newChild">New</button> <hr /> <child v-for="(child, index) in children" key="index" v-on:delete-me="deleteThisRow(index)" keys="index" :data="child" ></child> </div>`, data() { return { children:[] } }, methods: { newChild() { this.children.push(this.children.length) }, deleteThisRow(index) { this.children.splice(index, 1); } } }) new Vue({ el: '#app', template: ` <div> <parent /> </div> `, methods: { } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script> <div id="app"></div>

I am using vue.js to compose a app, and I mocked a login api of localhost in dev-server.js, now I want to separate the code about login api into a independent file, what should I do? Besides there are some code about CORS, here is the code:

var app = express() var bodyParser = require('body-parser') var multer = require('multer') var upload = multer() app.use(bodyParser.json()) app.use(bodyParser.urlencoded({extended: true})) // CORS var allowCrossDomain = function (req, res, next) { res.header('Access-Control-Allow-Origin', 'http://localhost:8080') res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE') res.header('Access-Control-Allow-Headers', 'Content-Type, X-Token') res.header('Access-Control-Allow-Credentials', 'true') next() } app.use(allowCrossDomain) // mock localhost api var apiRoutes = express.Router() // login api; const userAccountList = ['100000', '100001', '100002', '100003'] apiRoutes.post('/user/login', upload.array(), function (req, res) { if (userAccountList.indexOf(req.body.account) < 0){ return res.json({ code: 50000, msg: 'the account or the password is not correct, please try again' }); } } app.use('/api', apiRoutes);

I'm trying to integrate vue.draggable into my project https://github.com/SortableJS/Vue.Draggable

I'm a little confused as to how to integrate my existing project with Vue.draggable. I want every element that is created in the v-for loop to be draggable. I'm used to using jQuery UI to achieve this, but obviously I want a vue-centric approach.

What is the best way to do this?

var height = $(document).height(); var width = $(document).width(); $(function() { Vue.component('sidebar', { data: () => { return { people: [] } }, template: ` <div id="sidebar"> <div v-for="person in people" :class="[{'checked-in': isCheckedIn(person)}, 'person']" :id="person.id"> {{person.first_name + ' ' + person.last_name}} </div> </div> `, methods: { isCheckedIn(person) { return person.reg_scan == null ? true : false; }, loadPeople() { $.ajax({ method: 'POST', dataType: 'json', url: base_url + 'users/getParticipants/' + event_id }).done(data => { this.people = data; }); } }, mounted() { this.loadPeople(); setInterval(() => { console.log("Getting People"); this.loadPeople(); }, 10000); } }); Vue.component('tables', { data: () => { return { tables: [] } }, template: ` <div id="tables"> <div class='table' v-for="table in tables" :style="computeOffsets(table)"> {{table.name}} </div> </div> `, methods: { loadTables() { $.ajax({ method: 'POST', dataType: 'json', url: base_url + 'tables/getTables/' + event_id }).done(data => { this.tables = data; }); }, computeOffsets(table) { return { top: (table.position_x * width) + 'px', left: (table.position_y * height) + 'px' } } }, mounted() { this.loadTables(); setInterval(() => { console.log("Getting Tables"); this.loadTables(); }, 10000); } }); var app = new Vue({ el: '#main' }); }); .table { position: absolute; } #sidebar { width: 10%; float: left; height: 500px; overflow-y: scroll; } .checked-in { background-color: lightgreen; } <head> <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.6.0/Sortable.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.14.1/vuedraggable.min.js"></script> </head> <div id="main"> <sidebar></sidebar> <tables></tables> </div>

I am trying to use Core UI Vue with Laravel 5.4/mix. I've tried merging the two projects together but with no luck. Does anybody know how to merge the two together? They both use npm, I'm new to that as well so I'm pretty vague.

Thanks in advance, any help is much appreciated.

I have this computed property:

computed: { filteredCars: function() { var self = this return self.carros.filter(function(carro) { return carro.nome.indexOf(self.busca) !== -1 }) }, },

and i'm using v-for like this:

<tr v-for="carro in filteredCars"> <td>{{carro.nome}}</td> <td>{{carro.marca}}</td> <td>{{carro.categoria}}</td> <td>{{carro.motor}}</td> <td>{{carro.cambio}}</td> <td>{{carro.preco}}</td> </tr>

but I need to create another computed property to limit my data quantity, how i call it inside the same v-for?

I try to bind more classes with v-bind:class i have radio buttons that i want to give some classes from bootstrap when is active like so. I know i don't put the classes succesful.

<div id="app"> <div class="btn-group" data-toggle="buttons"> <label :class="{'btn', 'btn-warning', 'active: radio === 1'}"> <input v-model="removelines" type="radio" autocomplete="off" v-bind:value="yes" v-on:click="radio = 1"> yes </label> <label :class="{'btn', 'btn-warning', 'active: radio === 2'}"> <input v-model="removelines" type="radio" v-bind:value="no" v-on:click="radio = 2"> no </label> </div> </div>

and

new Vue{( el:'#app', data:{ radio: 1 } )};

Is there a way to change css properties asynchronously?

I have full access to node, vue, and it's to sit in a chrome browser, and the text I need to update the css to is various pages long, so the browser slows to a crawl while the css is applying.

fontSize (newSize) { document.getElementById('text').style.fontSize = `${newSize}px` }

I need to modify it to update the page better, and I'm not sure how to go about it. I was looking at the async module, but it's awfully dense and I'm not 100% sure it offers what I need.

I've got this working fine, except that I've would like instead of <a> tag to use <router-link> tag because of <a> tag unlike <router-link> (which intercepts click event and don't reload the page) reloads a page.

const contentString = ` <div class="popup"> <a href="/places/${place._id}"> <img src="..." /> <h5>${place.name}</h5> <p>${place.gmap.address}</p> </a> </div>` const infoWindow = new google.maps.InfoWindow() infoWindow.setContent(contentString)

If I replace <a> tag for <router-link> it doesn't render to <a> tag as it would if that <router-link> was in vuejs template.

I'm using Vue.js to build a site and I'm getting the following error in Blackberry Browser 10.3:

SyntaxError: Unexpected token '(' app.a3c4ee08427b9dd5e351.js:268

And when I view the line that's referenced in the error in the compiled app.a3c4ee08427b9dd5e351.js file I see the following:

/* harmony default export */ __webpack_exports__["default"] = ({ name: 'app-header', components: {}, data: function () { return {}; }, mounted() {}, <-- THIS IS LINE 268 REFERENCED IN THE ERROR methods: {} });

I'm using the "Single-File Template" method and this is what the above block looks like uncompiled in my source:

<script> export default { name: 'app-header', components : {}, data : function() { return {} }, mounted() { $(document).ready(function() { $('.nav-link').on('click', function() { $(document).stop().animate({ scrollTop : 0 }, 444); }); }); } } </script>

So the block throwing the error is missing the contents of the mounted() function. BUT, there's a second block further down in the compiled file that does have the contents of the mounted() function intact for the app-header component:

/* harmony default export */ __webpack_exports__["default"] = ({ name: 'app-header', components: {}, data: function () { return {}; }, mounted() { $(document).ready(function () { $('.nav-link').on('click', function () { $(document).stop().animate({ scrollTop: 0 }, 444); }); }); } });

The error itself seems to be saying that I've got an errant ( somewhere, but I've combed over it 1000 times and can't seem to find where this is happening.

Also, this works perfectly well in all other browsers.

Anyone have any idea what could be causing this for BB Browser 10.3?

Note: The client owns a Blackberry, which is why we're targeting a device that only 5 or 6 people on the planet actually use.

I am trying to render some multilevel array using vue js. The array looks like

[ [ [ 0, "Hello", [ [ 0, "Test1", [ [ "25", "Test2", [ [ "26", "Test3", [ [ "30", "Test4", [ [ 45, "Test5", [ [ 56, "Test6", [ [ { "0": "Jan", "1": "1", "2": "0.0000", "3": "0.0000", "4": 0, "5": 0, "6": 0, "7": 0, "8": 0, "9": 1, "10": { "test10": true, "test90": false, }, "11": null, "test78": [ ] }, [ [ 123, 234 ], .........

and so on.

I want to take all the first elements of test6 array (jan, Feb .. ) and display horizontally. How can i code that using Vue Js and array map or reduce?

Thank you

I have the following VUE component:

<template> <div> <div class="bottom-footer"> {{msg}} </div> </div> </template> <script> export default { name: 'LayoutFooter', data () { return { msg: 'my test' } }, mounted () { } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .bottom-footer { height: 200px; background-color: #A7BFE8; } </scoped>

VUE is completely ignoring my scoped CSS. When page is rendered its simply not applied. There are no console errors. Ive tried removing the scoped attribute and its still ignored. Any ideas why VUE is doing this?

I'm trying to use vue-instant component as a child component. I'm not sure how to add components without definition, or maybe my issue is in the webpack config ignoring node_modules because of the lack of type? Here's what I have:

SingleUserSearch.vue (my custom component):

<template> <div class="input-group"> <vue-instant v-model="value" @input="changed" :suggestions="suggestions" name="customName" placeholder="custom placeholder" type="google"></vue-instant> </div> </template> <script lang="ts"> import Vue from "vue"; import Component from "vue-class-component"; import axios from "axios"; import VueInstant from 'vue-instant' let vueInstantComponent : Vue.Component = VueInstant; @Component({ components: { 'vue-instant': vueInstantComponent } }) export default class SingleUserSearch extends Vue { value:string=""; suggestions : Array<string> = [] async changed() { var that = this this.suggestions = [] let response = await axios.get('https://api.themoviedb.org/3/search/movie?api_key=342d3061b70d2747a1e159ae9a7e9a36&query=' + this.value); alert(response); } } </script>

Then I compile my code using webpack without difficulties. When I try to test the code on page I get:

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

found in

---> at scripts\vue\components\SingleUserSearch.vue

webpack.config.js

var path = require('path'); var webpack = require('webpack'); module.exports = { entry: './scripts/vue/main.ts', output: { path: path.resolve('./scripts/build/'), filename: 'app.js' }, module: { loaders: [ { test: /\.tsx?$/, loader: 'ts-loader?' + JSON.stringify({ transpileOnly: true }) }, { test: /\.vue$/, loader:'vue-loader' }, { test: /\.js$/, loader: 'babel-loader', query: { presets: ['es2015','stage-0','stage-1','stage-2','stage-3'] } } ] }, resolve: { extensions: ['.js', '.vue'], alias: { 'vue': path.resolve('./node_modules/vue/dist/vue.esm.js') } }, stats: { colors: true }, devtool: 'source-map' };

Is it possible to create a computed property that relies on child components data? Seems like a trivial task but I can't figure it out...

foo component

<template> {{ foo }} </template> <script> export default { computed: { foo() { return Math.random() } } } </script>

parent component

<template> foo computed property sum: {{ sum }} <Foo v-for="n in 10"></Foo> </template> export default { computed: { sum() { // return...? } } } </script>