Software

This seems to work in Chrome, but not IE. Do you have any ideas why?

<select v-model="selected"> <option v-for="option in options" :value="option">{{ option.foo }}</option> </select> var data = [{ foo: 1 }, { foo: 2 }] var demo = new Vue({ el: '#demo', data: { selected: null, options: data }, mounted: function() { this.selected = data[1] } })

http://jsfiddle.net/yMv7y/3267/

I'm new to vue.js and I'm trying to create a vue component.

Vue.component('sales-report', { data: function(){ return {products: products, seasons: seasons}} template: '<course-details-menu :dropdown-data="{ products, outlineClassifications, seasons, years }"></course-details-menu>' });

This is a simplified example of my app, and it works in Chrome, but in IE, I get this error from vue:

Error compiling template:: - invalid expression: :dropdown-data="{ products, seasons }" found in --->

I would like, to capture the value of my input and display on another div.

Look my code :

If you look the code, I save the value in function msgFunc, and after that I would apply this result in my variable msg, but I don't understand.

Thanks !

export default { data () { return { msg: '' } }, computed: { msgFunc: () => { return this.value } } } .flex { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; height: 90%; } .input-container { width: 410px; background-color: #fff; padding: 2px 15px 20px 15px; box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.3); transition: transform .1s ease-in-out; } .input-container input { margin-top: 10px; width: 100%; border-bottom: 1px solid #25A3FF; padding: 10px 0; font-size: 16px; color: #929292; } input:focus { outline: none; } <div class="flex"> <section class="input-container"> <input type="text" v-model="msg" @change="msgFunc" placeholder="Type your HEX color"> <h3>{{msg}}</h3> </section> </div>

While there are many examples of toggling classes in Vuejs, I am yet to find one that toggles a class narrowing down the scope of the element. If I define a global variable like this:

data { toggle: false }

I will run into a problem when I have an element, like this navigation bar:

<ul class="menu"> <li class="has-dropdown" v-bind:class="{ 'is-open': toggle }" @click="toggle = !toggle"> Foo <ul class="dropdown"> <li>Dropdown Item 1</li> <li>Dropdown Item 2</li> </ul> </li> <li class="has-dropdown" v-bind:class="{ 'is-open': toggle }" @click="toggle = !toggle"> Bar <ul class="dropdown"> <li>Dropdown Item 1</li> <li>Dropdown Item 2</li> </ul> </li> </ul>

See what happens here? If I click in one of these two elements, both are going to toggle the class, because it's changing a global variable. Now, how would I toggle the class of only the element that is clicked?

e.g.:

<div :data-some="someData ? okay : bad" :data-someother="someOtherData ? okay : bad"> </div>

I want not to specify any data-params if there's "bad" in the result.

How can I do that?

I need to add rows in table #dynamic but table static shouldn't be affected. If i hit button with the code below, of cause both tables will be updated, because they have the same v-for. And if I put a v-for in a v-for my datas wont be fetched. I can't figured it out how to "unique" the first table.

vue/html <template> <table id="dynamic"> <tr v-for="rows in list"> <td>Content of row {{ rows.item1 }}</td> <td>Content of row {{ rows.item2 }}</td> </tr> </table> <div @click="block = !block">click</div> <table id="static"> <tr v-for="rows in list"> <td>Content of row: {{ rows.item3 }}</td> <td>Content of row: {{ rows.item4 }}</td> </tr> </table> </template> js export default { data: function () { return { list: [], }; }, props: ['channelId'], mounted() { }, created() { this.fetchChannel(this.channelId); }, methods: { fetchChannel: function (channelId) { $.getJSON('/api/channel/' + channelId, function (data) { this.list = data; }.bind(this)); }, } }

I found some examples for help like this codepen or fiddle but I am not successful with it.

Hope somebody can help me in my case.

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.