Feed aggregator
Child Component not updating when parent updates vuejs
I have a vue instance that passes an object to a child component. The child component has a checkbox that when clicked calls an event that the vue instance handles to update the object on the parent that is passed to the child component. Based on the vue documentation I thought this would cause the child component to update the related fields. However, the date field is not updating as I would expect when I click on the checkbox. In the image below, when I check the Management Name checkbox, I would expect the current day to appear, but I am not seeing any date. What am I missing here?
Design
Slide Up/Down in a table row with vanilla JavaScript
I'm trying to do an accordion-type transition component in a table VUE component. The problem is that with display: none; can't be calculate the height before applying the transition. JQuery does, but I can't reproduce it with pure javascript. Any CSS / JS guru that can help me?
Core of the transition:
methods: { beforeEnter (el) { const heightNeeded = el.scrollHeight el.classList.remove('collapse') el.style.display = 'table-row' el.classList.add('collapsing') el.style.height = heightNeeded + 'px' }, afterEnter (el) { el.classList.remove('collapsing') el.classList.add('collapse', 'in') }, beforeLeave (el) { el.classList.add('collapsing') el.classList.remove('collapse', 'in') el.style.height = 0 }, afterLeave (el) { el.classList.remove('collapsing') el.classList.add('collapse') el.style.display = 'table-row' } }Is there an issue retriving json data when using vue, axios, and laravel?
I am trying to replicate a tutorial on vuecasts (https://laracasts.com/series/learn-vue-2-step-by-step/episodes/18).
Everything looks fine and I don't get any errors except a warning:
Resource interpreted as Document but transferred with MIME type application/json: "http://vueme.app:8000/skills"
web.php:
Route::get('/', function () { return view('welcome'); }); Route::get('skills', function(){ return ['javascript', 'php', 'python']; });welcome.blade.php:
<!doctype html> <html lang="{{ app()->getLocale() }}"> <head> <meta charset="utf-8"> <title>Laravel</title> </head> <body> <div id="root"> <ul> <li v-for="skill in skills" v-text="skill"></li> </ul> </div> <script scr="https://unpkg.com/axios/dist/axios.min.js"></script> <script scr="https://unpkg.com/vue"></script> <script scr="/js/app.js"></script> </body> </html>app.js:
new Vue({ el: '#root', data:{ skills:[] }, mounted(){ axios.get('/skills').then(response => this.skills = response.data); } });What's not working?
Property or method "LoadData" is not defined on the instance but referenced during render
I am using vibed.org that use Pub-based HTML preprocessor. The generated page is look like:
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/vue"></script><script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></script> <link rel="stylesheet" type="text/css" href="site.css"/> <title>Hello, World</title> </head> <body> <div id="app"> {{message}} <div class="MainContainer"> <div class="LeftSide">44</div> <div class="RightSide"> <button @click="LoadData()">LoadData</button> </div> </div> </div> <script src="app.js"></script> </body> </html>app.js:
document.ready= function() { var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }, methods: { LoadData: function() { console.log('Hello'); } } }); app.$mount('#app'); }My page in browser looks like:
So message is rending correctly. But when I am clicking on button I am getting error: vue@2.4.2:485 [Vue warn]: Property or method "LoadData" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
extend vue component with google.maps.OverlayView()
I'm trying to implement custom google maps markers with vue.js; based on this document to add custom marker on map it's require to define subclass of new google.maps.OverlayView() with prototype inheritance.
How could I inherit my vue.js component from it. when I do something like:
let Marker1 = Vue.component('marker1', { ... }) Marker1.prototype = new google.maps.OverlayView();it's fails with exception:
Uncaught TypeError: this._init is not a function
Set an interval for every 12 hours
I need a function to run initially and then to rerun at 12pm and 12am. I'm using VueJS if that has any influence.
fetch_datetime() { axios.get('/api/core/datetime').then((response) => { this.datetime = response.data; this.set_interval(); }); }, set_interval() { var current_date = new Date(); var hours = current_date.getHours(); var minutes = current_date.getMinutes(); var seconds = current_date.getSeconds(); if(hours == 12 && minutes == 0 && seconds == 0 || hours == 0 && minutes == 0 && seconds == 0) { this.fetch_datetime(); } else { if(hours >= 12) { setTimeout(this.fetch_datetime, (1000 * (60 - seconds) * (60 - minutes)) + (1000 * 60 * (24 - hours - 1) * 60)); } else { setTimeout(this.fetch_datetime, (1000 * (60 - seconds) * (60 - minutes)) + (1000 * 60 * (12 - hours - 1) * 60)); } }However this isn't working as expected and the function runs early and then runs multiple times on the hour.
Why would this v-text-field loose its binding and formatting when placed inside a tab Vuetify tab component
I am using Vuetify and using the tabs component. However, when I put v-text-field inside a one of the tabs. Load the page up first time you click on the text field then it highlights properly and is bound. Click on the link to go to tab 2 then click back to 1 and the input will disappear. Then cycle through again and the input is back but unbound and unformatted. Does anyone have any idea how to to keep it bound?
This is the code pen https://codepen.io/jakemcallister/pen/rzaLRK
Bellow is the code: JS
var demo = new Vue({ el: '#demo', data: { title: 'Demo', current_object: { name: 'Hello' } } })HTML:
<div id="demo" v-cloak> <h1>{{title | uppercase}}</h1> <v-tabs light :scrollable="false" transition="none"> <v-tabs-bar slot="activators" class="grey lighten-3 light"> <v-tabs-slider class="light-blue darken-4"></v-tabs-slider> <v-tabs-item key="details" href="#details"> details </v-tabs-item> <v-tabs-item key="users" href="#users"> users </v-tabs-item> </v-tabs-bar> <v-tabs-content key="details" id='details' transition="none"> <v-card flat> <v-container fluid > tab 1 <v-layout row> <v-flex xs2><v-subheader>Name</v-subheader></v-flex> <v-flex xs4><v-text-field v-model="current_object.name" single-line key='company-name'></v-text-field></v-flex> </v-layout> </v-container> </v-card> </v-tabs-content> <v-tabs-content key="users" id='users' transition="none"> <v-card flat> tab 2 </v-card> </v-tabs-content> </v-tabs> </div>vuejs blank page after npm run build
I faced problem in a vue.js SPA project when upload in a server.
When I run npm run dev it works properly but after I run npm run build and upload to server then the project has blank page. But the favicon and title work fine. When I run npm run build got this message
"Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work."
If I manually refer the project resources in index.html, the page display it's contents but vue-router doesn't work.
I would appreciate if someone can suggest solutions to get rid off this problem.
Why computed data not updated in vuejs?
Vue don't re-render block after data changed
All data in vuex store
On click in element called method checkSys
Why cur_systems not updated and return empty array?
VueRouter route should select first child by default
Hi everyone i'm using Vue-Router 2.5.3 and i have the following Route structure.
path: "/admin", component: require("./views/layouts/MasterLayout.vue"), meta: { requiresAuth: true }, children: [ { path: 'dashboard', component: require("./views/Dashboard.vue"), alias: "/", name: "dashboard" }, { path: 'upload', component: require("./views/Upload.vue"), name: "upload", redirect: {name: 'upload.photo'}, children: [ { path: 'photo', component: require("./components/Uploaders/ImagesUploader.vue"), name: "upload.photo", props: { selected: true, successEndpoint: "/api/v1/upload/complete", uploadEndpoint: "/api/v1/upload" } }, { path: 'video', component: require("./components/Uploaders/VideoUploader.vue"), name: "upload.video", props: { selected: true, successEndpoint: "/api/v1/upload/complete", uploadEndpoint: "/api/v1/upload" } } ] },And i have an issue with this configuration, whenever i navigate to "admin/upload" it shows a blank page, i want it to show "admin/upload/photo" by default even if my users navigate to "admin/upload" how can i acheive this in Vue Router?
I've already tried defining aliases in both "upload" and in the child routes and nothing happened, then i tried to define the redirect key in the "upload" parent route as well and again blank page...
I don't quite get what im going wrong, is it the fact that my structure has two levels of nesting? But if that's a problem how do i define these routes using only one level of nesting?
setTimeout() not working called from vueJS method
I am trying to allow a user to reset or shutdown a given server from an app. Im working on the interface right now, and want to give the user messages as to what is happening. I display a message defined in my data object to indicate the action taken. I thene use setTimeout to switch a resetting.... message with a reset message. See the following method.
systemReset: function(){ this.message = this.server + ': Resetting'; setTimeout(function(){ this.message = this.server + ': Reset'; }, 2000); }In my browser I can trigger this message and my message of "Resetting" displays, but the following "Reset" message is never output. Do I have any formatting errors?
To put this method in context here is my entire component.
<template> <div> <p>{{message}}</p> <button @click="systemReset">Reset Server</button> <button @click="systemPowerDown">Poweroff Server</button> </div> </template> <script type="text/javascript"> export default{ data: function(){ return{ message: '' } }, methods: { systemPowerDown: function(){ this.message = this.server + ': Server Down'; }, systemReset: function(){ this.message = this.server + ': Resetting'; setTimeout(function(){ this.message = this.server + ': Reset'; }, 2000); } }, props: ['server'] } </script> Am I missing something obvious? Or is there some vue limitation I am unaware of?Vue js --The dependency was not found : ts-loader not compiling
The scenario: There is a library with generic vue js components that will be used by several projects and not using typscript. The library is a seperate project and have seperate webpack settings.
This library is being consumed inside my project as a git sub module atm and my project( I will call as main project here) is using typscript and ts-loader to compile the js and ts .
Can any one guide me wether it is problem because one project is using ts and other not? something with the module config? I can access other folder and files outside of main project src directory, but not the components inside of this library? If any one has a better way of doing the, will be thankful for advise!
/** webpack.base.conf (from main project **/ module: { { test: /\.ts$/, loader: 'ts-loader', include: [resolve('src'), resolve('test')], exclude: '/node_modules', options: { appendTsSuffixTo: [/\.vue$/] } } }Inside of my main projects component I am trying to import one the components from the library, which I am unable to as ts-loader tells the dependency was not found
/** Header.vue (main project)**/ <template> </template> <script lang="ts"> // lib in root same as src folder for main project import GenericComponentFromLib from 'lib/generic-components/src/components/GenericButton' @Components({ components: { GenericButton } }) /** tsconfig.json (main project) **/ { "compilerOptions": { "target": "es5", "lib": ["es5", "es2015.promise","es2017.object", "dom"], "module": "commonjs", "rootDir": ".", "moduleResolution": "node", "allowSyntheticDefaultImports": true, "experimentalDecorators": true }, "exclude": [ "node_modules" ] }TypeScript and the this keyword (SharePoint Framework and Vue)
I'm working on a SharePoint Framework web part and using Vue.js.
Given this snippet:
export default class MyWorkspaceTestWebPart extends BaseClientSideWebPart<IMyWorkspaceTestWebPartProps> { public uol_app; public render(): void { this.domElement.innerHTML = "some markup" this.uol_app = new Vue({ el: `#vueapp-${this.context.instanceId}`, data: { announcements: [], numOfAnnouncements: 4 }, computed: { announcementsTrimmed: function() { return this.uol_app.announcements.splice(0, this.uol_app.numOfAnnouncements) } } }) } }On that last return statement, how can I get to the announcements and numOfAnnouncements Vue data properties?
I have tried:
return this.uol_app.announcements.splice(0, this.uol_app.numOfAnnouncements) return this.uol_app.data.announcements.splice(0, this.uol_app.data.numOfAnnouncements) return this.data.announcements.splice(0, this.data.numOfAnnouncements) return this.announcements.splice(0, this.numOfAnnouncements) return uol_app.announcements.splice(0, this.numOfAnnouncements)How to publish a library of Vue.js components?
I am working on a project containing a Vuex module and an abstract components that users can extend from.
I would love to publish this on NPM to clean up my codebase and pull this away from my project as a solid well tested module. I have specified the main file in package.json to load an index which imports everything I want to expose:
https://github.com/stephan-v/vue-search-filters/
The index contains this at the moment:
import AbstractFilter from './src/components/filters/abstract/AbstractFilter.vue'; import Search from './src/store/modules/search'; module.exports = { AbstractFilter, Search };For this to work I need to transpile this since a babel compiler normally won't transpile files imported from node_modules(Correct me if I am wrong here). Besides that I would probably be a good idea to do this so it can be used by different systems.
How do I transpile only the files that I need though with Webpack? Do I have to create a separate config for this?
What does a config like that look like? I know the vue-cli has a build command for one single file component but this is a bit different.
Any tips or suggestions on how to transpile something like this are welcome.
How to combine max-width, min-width in matchMedia query?
I am working with the matchMedia API to determine viewports within javascript, so I can minimize the amount of dom manipulation taking place.
Instead of using display: none everywhere I determine if elements are inserted into the DOM or not with a v-if directive from Vue.
I have set it up like this:
resize() { this.mobile = window.matchMedia('(max-width: 767px)').matches; this.tablet = window.matchMedia('(max-width: 767px)').matches; this.desktop = window.matchMedia('(min-width: 992px)').matches; }The mobile matchmedia query is fine but how do I determine exactly what is tablet size? I am wondering if I can combine max-width and min-width values within the matchMedia query.
Of course I could do something like this:
resize() { this.mobile = window.matchMedia('(max-width: 767px)').matches; this.desktop = window.matchMedia('(min-width: 992px)').matches; this.tablet = !this.mobile && !this.desktop; }I am wondering is this is properly set up like this though.
Vue Render JQuery Plugin Upon v-if Set to True On Ajax Call
I have a checkbox that is being styled by iCheck, a JQuery plugin. The checkbox has a v-if directive, which will be set to true by a JQuery Post request.
function initializeICheck() { $('input').iCheck({ checkboxClass: 'icheckbox_square-blue', radioClass: 'iradio_square-blue', increaseArea: '20%' // optional }); } var login = new Vue({ el: '#vLogin', data: { showcheckbox: false, }, methods: { validateLogin: function() { $.post("validate", function(data, textStatus, xhr) { }).done(function(response) { login.showcheckbox = true; initializeICheck(); }); } } });However, when the validateLogin method is being called, the checkbox appears, but the call to function doesn't seem to work.
Any idea how do I properly render the checkbox styling?
vue js nested array load to table
in vue js how to load nested array to a html table. when I use v-for inside v-for it qives an error Property or method "key" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
[ { jobtype_id:"1", jobtype_code:"L001", jobtype_name:"Labour", jobtype_order:"1", jobtype_comment:"1", jobs:[ { jobinvoicedtlid:"1", JobInvNo:"JBIN0016", JobCardNo:"", JobType:"1", JobCode:null, JobDescription:"Wheel alignment", JobQty:"2", JobPrice:"800.00", JobTotalAmount:"1600.00", JobDiscount:"0.00", JobNetAmount:"1600.00", JobDiscountType:"1", JobinvoiceTimestamp:"2147483647", Description:"Labour" }, { jobinvoicedtlid:"2", JobInvNo:"JBIN0016", JobCardNo:"", JobType:"1", JobCode:null, JobDescription:"Full Service", JobQty:"4", JobPrice:"250.00", JobTotalAmount:"1000.00", JobDiscount:"0.00", JobNetAmount:"1000.00", JobDiscountType:"1", JobinvoiceTimestamp:"2147483647", Description:"Labour" } ] }, { jobtype_id:"2", jobtype_code:"S002", jobtype_name:"Parts Outside", jobtype_order:"3", jobtype_comment:null, jobs:[ { jobinvoicedtlid:"3", JobInvNo:"JBIN0016", JobCardNo:"", JobType:"2", JobCode:null, JobDescription:"Oil Change", JobQty:"5", JobPrice:"500.00", JobTotalAmount:"2500.00", JobDiscount:"0.00", JobNetAmount:"2500.00", JobDiscountType:"1", JobinvoiceTimestamp:"2147483647", Description:"Parts Outside" } ] } ] <tbody> <tr v-for="item,key in printdata"> <td colspan='6'> <b>{{item.jobtype_name}}</b></td> <table border="1"> <tr v-for="itm in printdata.jobs"> <td>itm.JobDescription</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </tr> </tbody>
VueJS dynamic v-model value
I want to set v-model to a value dictated by the value in my v-for loop. here's my code:
<tr v-for="campaign in _campaigns"> <el-switch v-model="campaign.enabled"></el-switch> </tr>now if campaign.enabled === 'active' i want to set v-model to on , or if
campaign.enabled === 'inactive' than off.
i tried to add logic to v-model in few ways like: v-model="campaign.enabled === 'active' ? on : off" or to use a method but none worked. Any idea what will consider as best practice to achieve that?
Vuex Modules Structure
Tried to find this across tutorials and examples, but didn't find anything related. I know it is kind of up to the developer to structure it, but I was wondering how should be the best approach to the following:
I have a store, with modules like:
- root/ --- app-store.js --- modules/ ----- tasks.js ----- another-module.jsand so on.
I get the whole idea of modules, namespacing. But I'm not quite sure how to handle this situation (example):
1 - I access the list of Tasks. 2 - You click on a task in the list, it displays a view with all the details. 3 - You do some changes on this task (update, delete, etc)
What I'm doing right now:
one single file called 'tasks.js'
it loads all tasks with the information of each one nested already
when I click, I set a 'currentTaskId' variable. All actions references this variable when updating/deleting/etc
I'm loading the task list with the ID as the key, so I can easily reference it by tasks[id], instead of doing a search everytime.
My doubts:
Is this structure ok? Or should I create a module just to handle a single object?
Is using the ID as a Key for the array really a good practice?
Any other input. I know Vuex is quite flexible about the structure, but I find myself trying to come up with a nice structure, but I'm afraid of being overthinking something that should be simpler.
Can’t access to custom canvas attribute in Vue
Has anyone used this component with Vue?
https://www.npmjs.com/package/aframe-draw-component.
I want to use Advanced Usage with “aframe-draw-component”. it works with raw html but not vue.js.
I get this error: App.vue?b405:124 Uncaught (in promise) TypeError: Cannot read property ‘canvas’ of undefined at NewComponent.init (eval at
It can’t find the custom dependency “draw”.
Can somebody help me ?
Thanks.