Software
Vuetify DataTable custom-sort?
I have a DataTable from Vuetify in my current project, but it seems as though there is no alphabetical sorting for Strings. I want to make it so that fields of type String can be sorted as well. Vuetify documentation specifies that there is a custom-sort built-in function (https://vuetifyjs.com/components/selects), but I can't find any examples of exactly how to use it. Could someone who's used it please provide some information on how to implement it or point me to a link with some documentation?
Note: I am fairly new to front-end development, so I'm not sure if I'm missing something obvious?
resolve npm module dependencies
For a project, I'm using a library that I have built in order to share Vue components across the different applications.
So I import my component library as a npm module and I added it to the application package.json and that works fine.
The problem is that when I try to import something in the single component in the components library the application can't solve the dependencies of that component.
e.g component in the component library:
<template> <!-- my html --> </template> </script> // my script </script> <style scoped> // here I import the basic style for the component: @import "../../assets/base";in the application package.json I have:
"components": "git+ssh://git@git.xxxxx.com:xxxxx/xxxxx/my-library.git#development",and then I use the component normally in my project like this:
import MyComponent from "./components/MyComponent.vue";The component library works fine, but when I import the component in the application I get the following error from webpack:
This dependency was not found: * -!../../../../css-loader/index.js?sourceMap!../../assets/base in ./~/css-loader?sourceMap!./~/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-28803148","scoped":true,"hasInlineConfig":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./~/components/src/core/MyComponent.vue To install it, you can run: npm install --save -!../../../../css-loader/index.js?sourceMap!../../assets/baseOf course if I substitute the @import with the actual css needed everything works fine. How can I make this configuration works?
Pug (Jade) base HTML Page: Cannot find element: #app
I use vibed server. It use Pug preprocessor (before known as Jade). Here is my page code:
doctype html html head script(src="https://unpkg.com/vue") script(src="app.js") title Hello, World body h1 Hello World #app |{{message}}It generate next HTML output:
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/vue"></script><script src="app.js"></script><title>Hello, World</title> </head> <body> <h1>Hello World</h1> <div id="app"> {{message}} </div> </body> </html>My app.js code:
window.onload = function() { var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }); app.$mount('#app'); }But it's do not work. In browser console I am getting next error: Cannot find element: #app
upd: moving script(src="app.js") to down helped. But is there any better variant? Or it's ok?
Vue.js: Prevent form submit only if condition true
I am using VeeValidate for validating a form. However, I want to submit the form without using JS. However, I still want users not to be able to submit, if there are any errors. If I use
<form @submit.prevent="validateBeforeSubmit">it is disabling the default action completely.
Can you think of any solution to this? Thank you!
Showing computed properties in components
I just came upon Components section (One-way data flow) and I can't figure out how to show computed properties from them.
<div id="demo"> <input v-model="parentMsg"/> <child v-bind:my-message="parentMsg"></child> </div>JS:
var Child = { props: ['myMessage'], template: '<span>{{ lowerCaseMsg }}</span>', computed: { lowerCaseMsg: function() { return this.myMessage.trim().toLowerCase(); } } }); var data = { parentMsg: 'Message' } var demo = new Vue({ el: '#demo', data: data, components: { child: Child } })Inject css to a Vue component?
see below my-component.vue.This Component needs to be themable.
It needs to get extrenal css sheet as i need to allow other developers to customize its inner look.
Is there any other approach than accept a javascript object?
<template> <div class="container"> <div class="A"></div> <div class="B"></div> <div class="C"></div> </div> </template> <style scoped> .A { background-color:green; } .B { background-color: red; } .C { background-color: yellow } </style>Tinymce Vuejs - I got one error
This is my code so I want to integrate tinymce with vuejs
When I load the component I got an error "Uncaught ReferenceError: tinymce is not defined"
What I am doing wrong
Can someone help me please
php artisan vs apache/nginx for production
I just created my portfolio website http://ashishpatel.info using laravel and vue-router, now i wanted to host it on aws ec2-instance, and we can do it in two ways, 1- using php artisan,
php artisan serve --host=0.0.0.0 --port=802- using apache/nginx and doing some change in apache2.conf etc.
I wonder which is best way for doing it for production for handling more traffic?
Vue template not where should
My tr witd td's are not in my table... why? They are out of the table. I don't know why.
My view:
<table class="table-responsive"> <todo-list v-for="todo in todos" v-bind:todo-obj="todo" v-bind:key="todo.id" :todoObj.sync="todo" v-on:usun="deleteTod"></todo-list> </table>And here is my component:
Vue.component('todoList', { props: ['todoObj'], template: '<tr>' + '<td><div class="round"><input id="todoObj.id" type="checkbox" v-on:click="toggle" v-model="todoObj.done" /><label for="todoObj.id"></label></div></td>' + '<td class="textTodo">{{todoObj.description}}</td>' + '<td><button v-on:click="deleteTodo" class="btn-xs btn-danger">delete</button></td>' + '</tr>',And second problem is that my checboxes are not working. They looks fine, but they don't want to toggle... They only react when checking the first row from table. Why?
vue js isotope with packery layout-mode
I'm using vue-isotope component from https://github.com/David-Desmaisons/Vue.Isotope
I'd like use layout-mode: 'packery' and I have installed the node module packery. So I have imported this module in my file vue but dosn't work, like this:
import isotope from 'vueisotope' import 'packeryAny ideas? Thanks
How to publish an Vue.js NPM package with a Vuex module?
I am developing some Vue components that I would like to place in an NPM package. The problem that I am facing is that I have no idea how to publish components that rely on a Vuex module.
I have neatly placed all the code needed for this library of components into a separate Vuex module but how do I register my module when somebody imports my package?
A good start would be creating a plugin I guess but I would still need to check for a Vuex instance and somehow register my module.
I've seen plenty of tutorials on how to publish Vue components but not something more complex.
Any suggestions?
Display multiple json objects from a nested json to a cell data in Vuetable
I'm currently using Vuetable-2 to display data from my server.
Is there a way to display multiple json objects from a nested json to a a cell data in Vuetable?
Response payload from server:
Current Table Format:
Expected result:
x-editable on vuejs doesn't appear
I'm trying to use x-editable on a VueJs file inside of a symfony project. So what I did is first i went on http://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js
and copy the content in a file
/path/to/file/web/js/xeditable/bootstrap3-editable/js/bootstrap-editable.min.js
I also have a file
path/to/file/web/js/xeditable/bootstrap3-editable/css/bootstrap-editable.css
In my vue I have :
<span href="#" id="productName"> {{{ product.name }}} </span> <script> $( "#productName" ).editable(); import js from "path/to/file/web/js/xeditable/bootstrap3-editable/css/bootstrap-editable.css"; import xeditable from "/path/to/file/web/js/xeditable/bootstrap3-editable/js/bootstrap-editable.min.js" export default { [...] components: {xeditable} [...]But nothing happend
mergeData error when using Vue Grid Layout?
I am using Vue and Vue Grid Layout to make a dashboard application. When the user connects to the application with his account, his widgets are retrieved from a MongoDB database and displayed on the Home page with vue grid layout.
The error doesn't occur on first load, but always occurs when the user navigates through an other page (using Vue router) like his profile or settings, and then returns to the Home Page. Vue router doesn't seem to be the problem as the URL changes.
The error seems to be from Vue Grid Layout since when i comment the code the error doesn't appear.
Here is the exact error : Screenshot
Thanks in advance,
Passing method event handling in Vue.js
I am very new to Vue.js and wrapping my head around method event handling.
What my function is doing is to read a barcode using web camera input and display its raw content.
The function works fine if I just render the raw content. However, if I try to transform the raw content to a more readable form. I am getting the following error:
TypeError: Cannot read property '1' of null when calling formatBarcode method.
I am pretty sure it's probably not even related to Vue.js in particular but a common JS problem.
html
<div id="scan"> <div class="row m-b-1"> <div class="col-sm-6"> <video id="preview"></video> <h5>Camera</h5> <ul> <li v-for="camera in cameras"> <span v-if="camera.id == activeCameraId" :title="formatName(camera.name)" class="active">{{ camera.name }}</span> </li> </ul> </div> <div class="col-sm-6"> <h5>Scans</h5> <transition-group name="scans" tag="ul"> <li v-for="scan in scans" :key="scan.date" :title="scan.content">{{ formatBarcode(scan.content) }}</li> </transition-group> </div> </div> </div>JS
var app = new Vue({ el: '#scan', data: { scanner: null, activeCameraId: null, cameras: [], scans: [] }, mounted: function() { var self = this; self.scanner = new Instascan.Scanner({ video: document.getElementById('preview'), scanPeriod: 5 }); self.scanner.addListener('scan', function(content) { self.scans.unshift({ date: +(Date.now()), content: content }); }); Instascan.Camera.getCameras().then(function(cameras) { self.cameras = cameras; if (cameras.length > 0) { self.activeCameraId = cameras[0].id; self.scanner.start(cameras[0]); } else { console.error('No cameras found.'); } }).catch(function(e) { console.error(e); }); }, methods: { formatBarcode: function(content) { const regex = /(01)(\d{14}|\d{0}})(21)(\d{10}|\d{0})/g; let m; while ((m = regex.exec(content)) !== null) { // This is necessary to avoid infinite loops with zero-width matches if (m.index === regex.lastIndex) { regex.lastIndex++; } } return `Group1: (${m[1]}) ${m[2]} Group: (${m[3]}) ${m[4]}`; } } });This is the regex I'm trying to test https://regex101.com/r/SvCs5t/3
Working fiddle to test the regex transformation https://jsfiddle.net/o01474u2/
Walkthrough on Onsen -vue
How to load walkthrough component first among other component on the render method of vue?
import AppNavigator from './AppNavigator.vue'; import CustomToolbar from './partials/CustomToolbar.vue'; import WalkThrough from './pages/WalkThrough.vue'; Vue.use(VueOnsen); Vue.component('custom-toolbar', CustomToolbar); const app = new Vue({ el: '#app', render: h => h( AppNavigator //What I want to do is to load first walkthrough before loading the AppNavigator ) });Setting an active state with Vue JS and for loop
I have a list of strings in Vue, and I'm using v-for to list all of them in "list-group" with bootstrap. I want to set the "active" state on click on one of the items, but I can't find a way to ID a specific item on the list with the for loop.
HTML - <div class="list-group" id="ServersList"> <a href="#" class="list-group-item" v-for="Server in Servers">{{Server.text}}</a> </div>
VueJS - var ServersList = new Vue({ el: '#ServersList', data: { Servers: [ { text: '1' }, { text: '2' }, { text: '3' }, { text: '4' }, { text: '5' }, { text: '6' } })
Thanks!
Vue.js code doesn't work on a html without cdn
I'm new to Vue.js and i have a header html which doesn't have cdn link of Vue.js.
<nav class="navbar navbar-toggleable-md navbar-inverse"> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <div class="containerNav"> <div class="row"> <div class="col-6"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="navbar-brand" href="#"><img src="images/logo.png" height="30"/></a> </li> <li class="nav-item active"> <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="login.html">TestPage</a> </li> </ul> </div> <div class="col-5" id="login-App"> <ul class="navbar-nav float-right"> <li class="nav-item"> <a class="nav-link" href="#">{{data.user}}</a> </li> <li class="nav-item"> <a class="nav-link" onclick="cleanLocalStorage()" href="login.html">Log out</a> </li> </ul> </div> </div> </div> </div> </nav>I load this header html with jquery document.ready function.
$(document).ready(function () { $(".footer").load("./footer.html"); $(".header").load("./header.html"); });Thererefore i cant show Vue.js variable on the page. Here is my Vue.js code
var loginApp = new Vue({ el: '#login-App', data: function () { return { data: {} } }, methods: { fetchData: function () { Vue.set(loginApp.data, 'user', JSON.parse(localStorage.getItem('user')).name); } } });If i use cdn link on header html, it works, but i prefer to use only on index page. Is there any trick for this situation? Should i use Vue.js CLI instead of cdn?
Get data from nested json and display using Vue-Multiselect
Basically what I want to achieve is GET data from server and display the data in the nested json to display in Multiselect, Vue-Multiselect
I'm able to get the objects from the nested json to display in multiselect, but I'm not sure how to customize it to only show the name.
Current behaviour:
So expected behaviour would be, only Sofa, Table and Chair should be shown in the multiselect:
Is there a way for me to only display like the picture above?
Thank you for your help!
vue js 2: Access props in mounted function
I have data props in child components. Inside child component on mounted function I need to get specific value from props and set select dropdown value. I am using vue-multiselect plugin which is working fine. Here is the code.
module.exports = { props: ["Subscriptions"] mounted: function () { let vm = this; Vue.nextTick(function () { // I want to access props here but it return 0 length array console.log(vm.$parent.Subscriptions); }); }, beforeUpdate() { let vm = this; console.log(vm.$parent.Subscriptions); }, // updated() { // let vm = this; // console.log(vm.$parent.Subscriptions); // } };Now only time I do get subscriptions is in beforeUpdate and updated function but this called each time there is a change in value which is not required. I only need to change it first time in order to set drop down initial value.