Software

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!

I have an iterative loop that using v-for on an array of objects that then renders a html li item

<li class="block" v-for="(section, key) in sectionDetails"> <a href="#" tabindex="{{ key }}">Item {{ key }}</a> </li>

The problem here is that key in the tabindex attribute is not being rendered, what IS being rendered is {{ key }}.

How can I get the value of key to be used for tabindex?

I’d like to have all my routes to show Navbar and Footer except “Login” route - it should contain ONLY Logins component content.

In App.vue (my root component) I have this:

<template> <router-view v-if="$route.name === 'Login'"></router-view> <div v-else> <app-nav></app-nav> <div class="container"> <transition name="bounceLeft" mode="out-in" appear> <router-view :key="$route.fullPath"></router-view> </transition> </div> <app-footer></app-footer> </div> </template> <script> export default { components: { 'AppNav': () => import( "@/components/AppNav.vue" ), 'AppFooter': () => import( "@/components/AppFooter.vue" ) } } </script> <style> </style>

It works, but as you can see, I want to “lazy load” my AppNav and AppFooter components, so they will be downloaded ONLY when they are needed (when routes name IS NOT ‘Login’). Unfortunately this doesnt work - when I go to Login route, these components are still downloaded from the server.

How can I achieve lazy-loading component in this example?

I have already composed the forum post here on Vuejs forum and the explanation is there too. I have developed my solution as far as I could but I am stuck with an issue on this. Need some help here please.

The link to the code is as follows: Custom form component

I have a div that has a closing element, i am building it with bootstrap panels, here is the example that i have at the moment:

<div @click.prevent="changeView(value.key)" v-if="value.key != 'Document'" class="panel panel-primary" v-for="(value, key, index) in myList"> <div class="panel-body quote"> <span @click="removeSection(index,key)" class="pull-right glyphicon glyphicon-remove text-info above"></span> <p>{{value.key}}</p> </div> </div>

don't worry too much i have some events inside (Vue.js), the main focus is the span element, since i have the span inside (closing element) my issue is that i want to define diferent events for the closing tag, and the div click(section around the closing tag.

Everytime i click the div it opens a edition section(behaviour i want), evertytime i click the closing tag(it deletes my section, and opens a modal with edition - behaviour i don't want).

How can i handle the click behaviour so when i click the closing element it doesn't open the edition modal? A way i thaught was defining the element outside the section but so i don't know what i am deleting, any help?

I tried to use z-index, but i don't know if it is a good way with this.

I am using Vue InstantSearch price range and my entries (in algolia) are in cents. The default price-range implementation handles the filtering in decimal (e.g. $10.52), not cents.

I want the user to be able to filter using the decimal format ($10.52) and before the library hits the algolia API, the number to be transformed to cents (1052).

Is there any way to override the code without modifying the file in node_modules?

I am currently learning Vue.js for a project I am busy with. I have been learning through online resources, as well as a Udemy course by Maximilian Schwarzmüller, Which i'd highly recommend.

I am having an issue building a hamburger menu for practice purposes. I am adding/removing a class on a div which holds my menu content. The adding/removing of the class happens via a button click (my "hamburger").

As far as I can tell through my course and other online sources, including a good few StackOverflow questions, what I have done should work.

Please let me know if you can see any issues, as it isn't working in my codepen. Thanks in advance =)

relevant HTML:

<button v-on:click="isActive = !isActive" class="navigation-hamburger"> <p>-<br>-<br>-</p> </button> <div class="menu-contain" v-bind:class="{ active: isActive}"> <ul> <li><a href="#" class="links">Home</a></li> <li><a href="#" class="links">About</a></li> <li><a href="#" class="links">Contact</a></li> </ul> </div>

CSS:

.menu-contain { width: 100%; height: 0px; background-color: #09333C; transition: all 0.5s linear; } .active { width: 100%; height: 300px; background-color: #8BAFB5; text-align: center; display: flex; justify-content: center; align-items: center; transition: all 0.5s linear; }

Vue js:

new Vue({ el: '#wrap', data: { isActive: false } });

Here is the codepen:

https://codepen.io/-Infamous/pen/KvXNJB

I've got this filter:

Vue.filter('limit', function (value, amount) { return value.filter(function(val, index, arr){ return index < amount; }); });

and i'm using like this:

<div v-for="movimiento in movimientos | limit 7" class="c-movimientos-tabla__block">

Q: How can i change the limit number on click in any button?

I have created a small project using Laravel 5.4 and VueJs 2.0. It is not a Signle Page Application. I am using vue components on each and every page to display the contents. The flow of my application is goes like this. Whenever a use clicks on the tab in navbar, he's redirected to the respective components. On the laravel side, I am simply using return view(login); and on the login.blade.php, I am using <login-component></login-component> which then sends the ajax requests to fetch data. I don't really know if this is the right approach as to get the 2 http requests are generated (if anyone knows a beeter approach, please do let me know). Mostly for for the ajax requests to load the vue component, the controller returns json data. Everything works fine, but when I click the back <- button on the browser, only json gets displayed. I then have to refrest the pager (ctl + R) in the browser the get the vue component.

Here's the controller code:

public function index(Request $request, VideoRepository $video_repo, Channel $channel) {

if ($request->ajax()) { $videos = $video_repo->getChannelVideos($channel); return response()->json([ 'data' => [ 'message'=> 'Success', 'videos' => $videos, 'channel' => $channel, ] ], 200); } return view('channels.index')->with([ 'channel_slug' => $channel->slug, ]); }

Here's my channel.index page:

@extends('templates.default') @section('content') <channel-dashboard channel-slug="{{ $channel_slug }}"></channel-dashboard> @endsection

Here's my channel-dashboard vue component:

axios.get('/channels/' + this.channelSlug) .then(({data}) => { this.videos = data.data.videos; this.channel = data.data.channel; this.divideVideosArrayInChuncks(); }) .catch(({response}) => { this.error = response.data; });

What do I need to do get vue component

I have a problem making the parent binding update from changes in the child.

I have the following vue code:

Vue.component('usercomp', { template: '<input v-model="user.name.lastname">', props:['user'], computed: { fullname: function() { return this.user.firstname + ' ' + this.user.lastname; } } }); new Vue({ el: '#user-example', data: function() { return { user: { name: { fullname: '', firstname: '', lastname: '', } } } } })

where I am binding the computed property of the child on the parents view. I'm trying to get a computed property from the child to update a <p> in the parent. I've tried using a store, but seems to give the exact same result unfortunately.

I have created this fiddle: https://jsfiddle.net/alexintime/02jxvqex/7/