Software

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>

I installed npm in the Vagrant box, and when I tried to start the project, the error occurred. The error is as follows:

vagrant@vagrant-ubuntu-trusty-64:~$ sudo npm run dev npm ERR! Linux 3.13.0-121-generic npm ERR! argv "/opt/node-v6.11.2-linux-x64/bin/node" "/usr/local/bin/npm" "run" "dev" npm ERR! node v6.11.2 npm ERR! npm v3.10.10 npm ERR! path /home/vagrant/package.json npm ERR! code ENOENT npm ERR! errno -2 npm ERR! syscall open npm ERR! enoent ENOENT: no such file or directory, open '/home/vagrant/package.json' npm ERR! enoent ENOENT: no such file or directory, open '/home/vagrant/package.json' npm ERR! enoent This is most likely not a problem with npm itself npm ERR! enoent and is related to npm not being able to find a file. npm ERR! enoent npm ERR! Please include the following file with any support request: npm ERR! /home/vagrant/npm-debug.log

my Vagrantfile:

Vagrant.configure(2) do |config| config.vm.box = "~/Dev/WebstormProjects/ubuntu_former.box" config.vm.network "private_network", ip: "192.168.33.10" config.vm.synced_folder "../web-admin", "/vagrant_data" end

Please help me, and thank you

Vue components exposes this.$data. Is there any way to access computed properties in a similar fashion?

They are not exposed on $data, and there is no such thing as this.$computed

I am trying to implement search component for my application, parent component have the search text box and button. When the user provide some value i want to send the data to api and show the result in child component. I am bit confused where to call the api and also how to populate the data in child component. Also, initially my child component should not render in the parent component, when the search get some result then it can render. Please help me how to implement a search functionality in vue js 2.

Parent Component

<template> <div><h3> Search </h3></div> <div class="row"> <form role="search"> <div class="form-group col-lg-6 col-md-6"> <input type="text" v-model="searchKey" class="form-control"> </div> <div class="col-lg-6 col-md-6"> <button type="button" id="btn2" class="btn btn-danger btn-md" v-on:click="getInputValue">Search</button> </div> </form> </div> <result :searchdataShow='searchData'></result> </template> <script> import resultView from './result' export default { components: { 'result': resultView }, data () { return { searchKey: null, searchData: null } }, methods: { getInputValue: function(e) { console.log(this.searchKey) if(this.searchKey && this.searchKey != null) { this.$http.get('url').then((response) => { console.log(response.data) this.searchData = response.data }) } } } </script>

Search Result component(child component)

<template> <div> <div class="row"><h3> Search Results</h3></div> </div> </template> <script> export default { props: ['searchdataShow'] } </script>

Let's say I have a basic page with VueJS as follows:

Vue.component('child', { template: '<p>Placed at index {{index}}</p>', data() { return { index: 0 } }, mounted() { this.index = this.$parent.addElement(this); } }); new Vue({ el: '#theParent', data() { return { allElements: [] } }, methods: { addElement(elem) { this.allElements.push(elem); return this.allElements.length - 1; } } }); <script src="https://cdn.jsdelivr.net/vue/2.3.2/vue.min.js"></script> <div id="theParent"> <child></child> <child></child> <child></child> </div>

The purpose of the output is just to illustrate at what index the elements have been inserted at. My use case requires that the elements are added in the same order that they appear in the HTML. Every time I run this page it appears that this is indeed happening as the output is in order.

My question is: Is this behavior guaranteed to always happen - will VueJS always execute mounted() on components in the order they appear in the HTML? If not, is there an alternate way to guarantee that they are added to my array in the proper order?

I have two Vue components, one extends the other:

// CompA.vue export default { props: { value1: Object, }, data: function () { return { value2: 'hello2 from A', value3: 'hello3 from A' } } } // CompB.vue import CompA from './CompA.vue'; export default { extends: CompA, props: { value4: Object }, data: function(){ return { value2: 'hello2 from B' } } }

As described in the docs, CompB's options are merged into CompA's, resulting:

{ props: { value1: Object, value4: Object }, data: function () { return { value2: 'hello2 from B', value3: 'hello3 from A' } } }

However my desired result is having property value1 removed:

{ props: { value4: Object }, data: function () { return { value2: 'hello2 from B', value3: 'hello3 from A' } } }

I think it should be possible using Custom Option Merge Strategies

But even if I return null or undefined, the property isn't removed.

Vue.config.optionMergeStrategies.data = function(parentVal, childVal) { return null; };

Is it even possible to such thing? If yes, how?

I have a JS file from here that I'd like to include in my single-file component.

I can't include the script tag in my template section, as that results in an error.

I also tried:

require('/static/sql.js'); import '/static/sql.js'

etc. following the instructions here.

in the script section of my .vue file, but those either complained that the file couldn't be found, or that the dependency wasn't installed. It's a large JS file (2 MB) so I'd prefer that it not be compiled by Vuejs/webpack. If I do an 'import', what function do I import from sql.js?

Should I instead install the node version of the sql.js library, along with its fs dependency? I would like to serve this as a static webpage, so I don't know if it makes sense to have the 'fs' module in there.

I'm currently just including the script tag in the index.html of my entire app, but would prefer that it just be loaded when I need this specific component.

Let's say I have a basic page with VueJS as follows:

Vue.component('child', { template: '<p>{{message}}</p>', props: ["message"] }); new Vue({ el: '#theParent', data() { return { message: "It works!" } } }); <script src="https://cdn.jsdelivr.net/vue/2.3.2/vue.min.js"></script> <div id="theParent"> <child v-bind:message="message"></child> <child v-bind:message="message"></child> <child v-bind:message="message"></child> </div>

The message It works! shows up three times as expected, but if I remove v-bind:message="message" on my <child> components it doesn't work. As all my <child> components will require the value of message from the parent, is there a way to specify this once in the VueJS component declaration rather than each time in the HTML when adding a <child>?

I'm trying to replicate Vue.js just for learning purposes.

In very basic terms I can do this

<button v-on-click="reverseMessage">Reverse Message</button> var element = document.querySelectorAll('[v-on-click]')[0]

But I'm very interested to know how they select v-on:click

Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '[v-on:click]' is not a valid selector.

I need to develop an application in ASP.NET MVC Core with Vue.js views.

How should I setup my application to work with both technologies?

Regards

Based on the tree view sample (https://vuejs.org/v2/examples/tree-view.html) on Vue , I reorganize its code as the followings: in a parent component

<ul> <item class="item" :model="treeData" v-on:changeType="changeTypeEvent"></item> </ul> ... <script> ... methods: { changeTypeEvent: function () { console.log('Incoming event ' ) } ... </script>

In its child component,

<li> <div :class="{bold: isFolder}" @click="toggle" @dblclick.once="changeType"> {{model.name}} <span v-if="isFolder">[{{open ? '-' : '+'}}]</span> </div> <ul v-show="open" v-if="isFolder"> <item class="item" v-for="model in model.children" v-bind:key="model.name" :model="model"> </item> <li class="add" @click="addChild">+</li> </ul> </li> ... <script> ... changeType: function () { if (!this.isFolder) { console.log('Double click ') this.$emit('changeType') } },

For some reason, the event is not detected in the parent component. I have a working code with the same structure. Why doesn't it work in this case?

I am currently building a Wordpress theme and i would like to incorporate Vue.js (2.0) into it. However i need to be able to pass variables from Wordpress to Vue, such as page or post content. Currently i am attempting to return the page content.

I attempted it with this method too but this didn't seem to work either: Pass php variable to vue component instance

In the page template i have the following:

<content inline-template :content="{{ $content }}"> <div id="content" class=""> </div> </content>

The component:

Vue.component('content', { props: ['content'] }); new Vue({ el: "#app" });

I'm trying to build an application on VueJs 2.0 where I'm having following codes

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

I want to disable v-select element if v-model withClient = 0 and enable withClient= 1

<v-select multiple :options="contacts" :on-search="getOptions" placeholder="Contact name" v-model="contactParticipants"></v-select>

My problem is: I'm trying to do a pagination function to my datatable, it works fine but when I change the limit of items in my table, the total of pages doesn't update. How can I proceed? I have this filter:

filters: { paginate: function(list) { this.resultCount = this.movimientos.length; if (this.currentPage >= this.totalPages) { this.currentPage = Math.max(0, this.totalPages - 1); } var index = this.currentPage * this.upperLimit; return this.movimientos.slice(index, index + this.upperLimit); } }

And here I'm calculating the number of pages

computed: { totalPages: function() { return Math.ceil(this.resultCount / this.itemsPerPage); } }, methods: { setPage: function(pageNumber) { this.currentPage = pageNumber; console.log(pageNumber); }, <div v-for="pageNumber in totalPages" class="c-paginacao__select"> <a href="#" v-on:click.prevent="setPage(pageNumber)"><span class="active">{{pageNumber+1}}</span></a> </div>

Just have such a view:

<div class="items"> <div class="datemark" data-date="1">Today</div> <div class="item" data-date="1">Item 1</div> <div class="item" data-date="1">Item 2</div> <div class="item" data-date="1">Item 3</div> <div class="datemark" data-date="2">Tommorow</div> <div class="item" data-date="2">Item 1</div> <div class="item" data-date="2">Item 2</div> <div class="item" data-date="2">Item 3</div> </div>

with such data:

data = { 1: { human: 'Today', date: 1, items: { item1: {...}, item2: {...}, } }, 2: { human: 'Tommorow', date: 2, items: { item1: {...}, item2: {...}, } } }

How to make it works and can be sorted desc/asc by datemarks and 'inside' datemarks range if it have different hours and minutes also?

Tried v-for but only simple lists, how with datemarks?

Thanks!