Software
How to disable v-select options dynamically in Vuejs
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>VueJS: changing number of paginate values?
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>How to make a list with datemarks on Vue.js?
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!
VueJS use v-for variable as attribute value
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?
Async components in Vue2
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?
A Custom vuejs form component
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
Section div closing handle z-index
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.
Algolia price-range when price is in cents
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?
Vue JS toggle html div class on a button click not working
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:
How i call custom filter on click? (Vue.js)
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?
Json being displayed instead on Vue component when browser's back <- button is clicked
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> @endsectionHere'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
emit changes to parent from child
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/
How do I use "custom filter" prop in data tables in vuetify? or How do I create a custom filter to filter by headers?
As of date of posting, I cannot find any documentation to use the "custom filter" prop in data tables.
I just want to create a custom filter to filter my data table by headers. I have a dropdown, and when user click on one of the options for the dropdown, it will filter the list for one specific header.
Example: Dropdown options: Food type: fruit, meat, vegetable
- Bakchoi (vegetable)
- Pork (meat)
- Chicken Thigh (meat)
- watermelon (fruit)
If I select dropdown as meat, it should only show me pork and chicken thigh.
Vue Js Authentication with keeping same url for home component and login component
How can I implement authentication with keeping URL same in browser as facebook does?
If user is authenticated, it shows home page, if not, it shows login page. But in both case URL is same.
How can I achieve that using Vue js.
I don't want to keep home page html at client side if not authenticated (might be server side rendering will require for this scenario).
I have used asp.net core, identity server 4, typescript, webpack in project.
How do i take radio value checked in vuejs?
I have this code so far, i try to take the value from radio button.I can take from v-model value but with radio i have some problems.For example if i have more radio buttons how i can take the checked one.
new Vue({ el:'#root', data:{ removelines: [ {value:'a'}, {value:'b'} ] }, methods:{ insert:function(){ let vueIn = this; axios.post('/vue', {removelines: vueIn.removelines.value}).then( function(response){ vueIn.removelines = response.data.removelines.value; } ).catch(function(error){ console.log(error.message); }); } } });html code here:
<div class="card-block"> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-warning active"> <input v-model="removelines" name="removelines" type="radio" class ="cheker" autocomplete="off" v-bind:value="a" checked> Yes </label> <label class="btn btn-warning"> <input v-model="removelines" name="removelines" type="radio" class ="cheker" v-bind:value="b"> No </label> </div> </div>VueJS data object is 2 data objects combined
So I have this basic VUE.js page, but I want variable C to be a composite of variable A and B together.
var app = new Vue({ el: '#app', data: { firstname: '', lastname: '', fullname: firstname + lastname } })so I can use it in a <input type="text" v-model="fullname"> and it will contain the values of firstname and lastname.
firstname and lastname will be binded to 2 other inputs as follows:
<label>Insert your first name:</label> <input type="text" v-model="firstname"> <label>Insert your last name:</label> <input type="text" v-model="lastname">so the fullname variable will be a dynamically binded firstname + lastname variable.
I've tried several things but I can't seem to get this working.
Vue.js + Vuex: How to mutate nested item state?
let's say I have following tree:
[ { name: 'asd', is_whatever: true, children: [ { name: 'asd', is_whatever: false, children: [], }, ], }, ],The tree is stored in a module via Vuex under key 'tree' and looped through with following recursive component called 'recursive-item':
<li class="recursive-item" v-for="item in tree"> {{ item.name }} <div v-if="item.is_whatever">on</div> <div v-else>off</div> <ul v-if="tree.children.length"> <recursive-item :tree="item.children"></recursive-item> </ul> </li>Now i want to toggle item's property 'is_whatever', so i attach a listener
<div v-if="item.is_whatever" @click="item.is_whatever = !item.is_whatever">on</div> <div v-else>off</div>When i click it, it works, but emits following
"Error: [vuex] Do not mutate vuex store state outside mutation handlers." [vuex] Do not mutate vuex store state outside mutation handlers.How am I supposed to implement it without this error? I can see no way how to dispatch an action or emit event to the top of the tree because it's nested and recursive, so I haven't got a path to the specific item, right?
Can options be created based on the search term?
Is it possible for a vuetify.js to add an option in the standard selection component based on the user's search? As in this example for select2:
$(".js-example-tags").select2({ tags: true })How add multiple components (more than two) in one Vue-template
Is there a way to add three or more components in one Vue-template.
<template> <div id="app"> <navbar></navbar> <router-view></router-view> <footer></footer> //adding third component will not work this way </div> </template>
I am using vue-resource with vue cli webpack i have 'Access-Control-Allow-Origin' issue
i get this console error :
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.i test vue-resource with reddit and it worked fine but with this url gives the problem . please help .