Software

I want to display the 'name' value only, within the object returned from the method.

• What is currently displayed is: [ { "city": "Ottawa", "name": "Senators", "province": "Ontario", ".key": "-Kp00XARET2EDFRZVMks" } ]

• I want displayed is "Senators".

Here's snippets of my code:

... in the template <td>{{props.item.away}} {{ teamDetail(props.item.away) }}</td> ... in the script methods: { teamDetail(inpt) { return this.teams.filter((team) => { return team['.key'] == inpt; }) },

props.item.away is the .key sent to teamDetail to retrieve the object for a specific team, the object returned in this case is [ { "city": "Ottawa", "name": "Senators", "province": "Ontario", ".key": "-Kp00XARET2EDFRZVMks" } ]

to display the 'name' only, I tried within the template {{ teamDetail(props.item.away).name }} and within the filter in the method

I'm new to webpack and Vue.js. I'm facing issues when trying to load images/videos in my nested components, it gives me "not found" error. I have project structure like that: Project structure image

Let's say in Signup.Vue I want to load an image from the assets folder, how can I do that? Because ".../assets/my-img.jpg" didn't work out, "assets/my-img.jpg" neither. In css I figured out that using require with "~" works (ex. '~assets/my-img.jpg" ). I don't undestand how paths work.

Placing my images in the same component's folder would be an option, but I want to use the main assets folder where I can fetch media from.

Using: webpack 2.7.0 / vue 2.0

Thank you in advance

I am using vue-loader in webpack and have a dialog.vue file with script, style and template.

When I import the file to another file and call new Vue(dialog) I get a instance. But if I call .$mount() on it (to mount it off DOM) I get a error:

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

When I do console.log(dialog.render) I se the function there, when I do console.log(instance.render) its undefined.

If I instanciate it without calling .$mount() the instance has no .$el property, its undefined...

What am I missing? how else can I import a .vue file to another and call new Vue() to instanciate it and then mount it so I have a .$el element from the instance?

I currently have a simple Vue.js application, I am using vue-router like this. index.html

<p> <router-link to="/" exact> Home </router-link> <router-link to="/about"> About </router-link> <router-link to="/contact"> Contact </router-link> <router-link to="/login"> Login </router-link> <router-link to="/register"> Register </router-link> </p> <router-view></router-view>

And I have this in my /routes.js

import VueRouter from 'vue-router'; let routes = [ { path: '/', component: require('./components/Home.vue') }, { path: '/about', component: require('./components/About.vue') }, { path: '/login', component: require('./components/Login.vue') }, { path: '/register', component: require('./components/Register.vue') } ]; export default new VueRouter({ mode: 'history', routes });

I have index.js file which initialized the app, I think I should do something within my created(){} module but I am not sure how it is done.

I can set/unset sessions, all I need to know is how to give access to a page only if this session exists.

I have a Friend.vue file where different states are being called and executed, so when users are not friends it displays icon -a- if request was send it displays icon -b- and when users are friends it should display icon -c- (chat icon so the users can chat)

but after the request is accepted icon -a-(send request) is displayed again because the status is -reset- to '0' but i can't figure out why.

my Friend.vue file

<template> <div> <p class="text-center" v-if="loading"> Laden... </p> <p class="text-center" v-if="!loading"> <a v-if="status == 0" @click="add_friend"><span title="Vriendschapsverzoek" class="add-friend"></span> </a> <a href=""><span title="Vriendschap bevestigen" class="accept-friend" v- if="status == 'pending'" @click="accept_friend"></span></a> <a href=""><span title="wachten op een reactie" class="pending" v- if="status == 'waiting'"></span></a> <a href=""><span v-if="status == 'friends'" title="Chatten" class="chat"> </span></a> </p> </div> </template> <script> export default { mounted() { this.$http.get('/check_relationship_status/' + this.profile_user_id) .then((resp) => { console.log(resp) this.status = resp.body.status this.loading = false }) }, props: ['profile_user_id'], data() { return { status: '', loading: true } }, methods: { add_friend() { this.loading = true this.$http.get('/add_friend/' + this.profile_user_id) .then((r) => { if (r.body == 1) this.status = 'waiting' this.loading = false }) }, accept_friend() { this.loading = true this.$http.get('/accept_friend/' + this.profile_user_id) .then((r) => { if (r.body == 1) this.status = 'friends' this.loading = false }) } }

}

the (relevant)functions in my controller

public function check_relationship_status($id){ if (Auth::user()->is_friends_with($id) === 1) { return [ "status" => "friends" ]; } if(Auth::user()->has_pending_friend_request_from($id)) { return [ "status" => "pending" ]; } if(Auth::user()->has_pending_friend_request_sent_to($id)) { return [ "status" => "waiting" ]; } return [ "status" => 0 ]; } public function add_friend($id) { return Auth::user()->add_friend($id); } public function accept_friend($id) { return Auth::user()->accept_friend($id); }

and the "button" that should display these icons

<friend :profile_user_id="{{ $user->id }}"></friend>

If I should add any more code to make it more clear or any other suggestion please do tell, this is my first laravel site, plus the first time I'm trying out Vue.js so please be kind to my beginners mistakes. thank you

<template> <header> <hamburger></hamburger> <app-title></app-title> <lives></lives> </header> </template> <script> export default { name: 'Titlebar', data() { return { } } } </script> <style lang="scss" scoped> @import "../styles/variables"; header { padding: $padding-titlebar; position: relative; } lives { position: absolute; right: 2.5vh; } </style>

Is it possible to use component tags like any regular HTML tag for styling purposes like I've written down there in lives { }?
I see that that writing <lives class="lives"> and using .lives { } in css works but that seems kinda redundant, would rather like to ommit adding aditional classes if it's possible to just use component tag.
I understand that Vue compiles <lives> into HTML code and that there is no "lives" tag for css to use after it's compiled, but still wondering.

I have a vuejs form component that has about 5 input fields for example.

But I need to separate the form component into 2 forms that take different user input.

Form 1 has

Name
Surname
Email

with a form name attribute value or form_1

Form 2 has

Username
Password

with a form name attribute value or form_2

The code:

created: function (formNameAttribute, inputNameAttribute) { var getForms = document.getElementsByTagName('form'); var inputElement = document.querySelectorAll('input'); for (var i = 0; i < getForms.length; i++) { formNameAttribute = getForms[i].name; switch (getForms[i].name) { case 'Account Details': console.log('Form Name: ', getForms[i].name); break; case 'Account Login': console.log('Form Name: ', getForms[i].name); break; default: } for (var j = i; j < inputElement.length; j++) { inputNameAttribute = inputElement[j].name; console.log('Input name attribute: ', inputNameAttribute); } }

}

How can I tell the form component to only display the fields it needs for form_1 and form_2

external link to code: Form Component

So I'm learning vue.js and vsCode is giving me this red dot on my code, the code is running perfectly fine and other editors such as atom is giving me no errors. What is that red dot for?

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?