Software
Vue Autocomplete component with slot instead of input
I have created custom autocomplete component which works as material input, but on focus or input debounces an ajax request and the reponse is a list of something which i can click and set as value of the input. The component uses labled-input component which is similar to Vuetify text input.
How ever, I would like to change to code to somehow using slots but its a problem since I have to listen for emits ( focus, blur ) from that slot.
So instead of my-labeled-input wanna change it to <slot></slot> and pass component from parent. The idea is to use the same code for selects too. Any suggestions?
<template> <div class="my-autocomplete"> <my-labeled-input :value="value" :title="title" @input="lInput" @focus="onFocus" @blur="onBlur"></my-labeled-input> <div class="list-container" v-if="focused"> <ul class="menu" v-if="list.length > 0"> <li v-for="item in list" @mousedown="itemClick(item.toponymName)">{{ item.toponymName }}</li> </ul> <template v-else> <p v-if="waiting"> Loading ...</p> <p v-else>No Data</p> </template> </div> </div> </template> <script> import debounce from 'lodash.debounce'; import myLabeledInput from '../../components/my-labeled-input/index.vue'; export default { name: 'my-autocomplete', components: { myLabeledInput, }, props: { value: { type: String, default: null, }, title: { type: String, default: null, }, apiUrl: { type: String, default: null, }, query: { type: Object, default: () => {}, }, debounceInterval: { type: Number, default: 1000, }, }, data() { return { list: [], focused: false, waiting: false, }; }, methods: { lInput(value) { this.$emit('input', value); this.waiting = true; this.getList(value); }, onFocus() { this.focused = true; this.waiting = true; this.getList(this.value); }, onBlur() { console.log('blur'); this.focused = false; }, getList: debounce(function (value) { // eslint-disable-line this.$http({ url: this.apiUrl, method: 'GET', params: { ...this.query, name_startsWith: value, }, }).then((response) => { console.log(response); this.list = response.data.geonames; this.waiting = false; }).catch(() => { this.list = []; this.waiting = false; }); }, 2000), itemClick(value) { this.$emit('input', value); }, }, }; </script>Vue delete child component
I have this code:
Vue.component('parent', { template: ` <div> <child v-for='(child, index) in children' :key='index' :childNumber="index+1" v-on:removeChild="removeChild" /> </div> `, data: function() { return { children: [{}, {}, {}] } }, methods: { removeChild: function(index) { this.children.splice(index, 1); } } }); Vue.component('child', { template: ` <div> <input :value="'I am child number: '+childNumber"></input> <button v-on:click="removeChild">Remove child {{childNumber}}</button> </div> `, data: function() { return {} }, methods: { removeChild: function() { this.$emit('removeChild', this.childNumber); } }, props: ['childNumber'] }); const app = new Vue({ el: '#app', data: { message: 'Hello Vue!', } });At the moment when you click any of the "remove" buttons, it deletes the last child, regardless of which button you clicked. How can I change my code so that it deletes the child you think it will delete, without touching the other children? (ie. clicking "Remove child 2" will leave just child 1 and 3 on the screen)
Fiddle: https://jsfiddle.net/wgr3sxqr/6/
Inserting a v-model into a vuejs element
I'm trying to do something like this, do not know how to describe in technical term, can't seem to find a solution for this.
<div id="app"> <input type="text" v-model="model1" /> </div> <div> <div id="model2">ABCDEFG</div> <input type="text" /> </div> <script> new Vue({ el: '#app', data: {'model1': 'value'}, ... ... ... }); </script>How can i add model2 element into my #app data? I do not want to wrap my model2 inside of #app because it is a partial, and is shared throughout the application. Is there a way i can inject it on a particular page when it is needed?
Vue.js + Socket.io - append an element in a real time app?
I'm new to Vue.js, so wonder how this can be done in Vue instead jQuery?
The socket.io and jQuery will append a <li> each time when someone has typed something on the browser.
<!doctype html> <html> <head> <title>Socket.IO chat</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font: 13px Helvetica, Arial; } form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; } form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; } form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; } #messages { list-style-type: none; margin: 0; padding: 0; } #messages li { padding: 5px 10px; } #messages li:nth-child(odd) { background: #eee; } </style> </head> <script src="/socket.io/socket.io.js"></script> <script src="https://code.jquery.com/jquery-1.11.1.js"></script> <script> $(function () { var socket = io(); $('form').submit(function(){ socket.emit('chat message', $('#m').val()); $('#m').val(''); return false; }); socket.on('chat message', function(msg){ $('#messages').append($('<li>').text(msg)); }); }); </script> <body> <ul id="messages"></ul> <form action=""> <input id="m" autocomplete="off" /><button>Send</button> </form> </body> </html>How is this done in Vue?
I tried:
$(function () { var socket = io(); $('form').submit(function(){ socket.emit('chat message', $('#m').val()); $('#m').val(''); return false; }); var app = new Vue({ el: '#app', data: { message: "Hello World" }, created: function() { socket.on('chat message', function(data) { this.message = data.message; }.bind(this)); } }); });in my new HTML:
<form action=""> <input id="m" autocomplete="off" /><button>Send</button> <span id="app">{{ message }}</span> </form>It does not work obviously.
Any ideas?
How to disable/enable case sensitive for v-select
İs that possible to set some rules for disable or enable case sensitive searchable v-select
<v-select label="name" taggable v-model="selectedAgency" :options="agencyList" :on-change="onAgencyChange" placeholder="Agency"/>"></v-select>Official page: https://sagalbot.github.io/vue-select/
GET request with parameters when using vue-resource in vue js
Hello i am trying to fetch details of task when clicked on task name the get api should take task name as parameter and return the task details i am unable to pass the parameter in my api
How to get reference to google map object inside a VueJs component?
This is my VueJs component:
<template> <div> <gmap-map ref="map" :center="center" @click="captureClickedLocation" :zoom="10"> </gmap-map> </div> </template>
How to get the reference to the current map object here, in order to use it with a google.maps.drawing.DrawingManager to display custom overlays, for example ?
Example code would be sth like this: var drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.MARKER, drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [ google.maps.drawing.OverlayType.CIRCLE, google.maps.drawing.OverlayType.POLYGON, google.maps.drawing.OverlayType.RECTANGLE ] }, markerOptions: { icon: 'images/beachflag.png' }); drawingManager.setMap(map);
How to get the reference to the gmap-map's map object? or, what would be the value for map in the last line ?
Building Cordova on vue.js app
Project written in vue.js, how long would it take to build it with Cordova to have functional mobile app? I am really on tight schedule, so any advice would be appreciated
rendered component not showing updated data
I have used vue-hotel-date-picker its working fine. the issue is when component rendered it does not show my placeholder value and not perform disabled dates on calender although the format of disabling dates is correct. same for placeholder.I debug it using Vue chrome extension for debugging it shows that my component has the respective data but it does not reflect on view
Here is an image when debugging
plugin link https://github.com/krystalcampioni/vue-hotel-datepicker
I don't know how to figure out and solve this problem , any help would be appreciated
npm installation file is incomplete
I use npm install ,but I can't get all files.
this is now files,it lack somethings. I can't run my project. enter image description here
this is before files ,Obviously this is correct files. enter image description here
why?How can I resolve it?
Tab Icon Changing from Custom to React icon. Why?
I'm working on some app and have this weird issue where the tab icon keeps switching from the (right) one I set to the ReactJS icon, as I navigate between routes. In my HTML file, I have the icon appropriately linked (or at least I'd presume), so what's wrong?
This is especially bizarre given the fact that I'm not even using React but rather Vue.js 2. What's happening, and how do I solve this?
I'm not sure code snippets would help but below is my root HTML.
HTML head section
<head> <meta charset="utf-8"> <title>RGB Guessing Game</title> <link rel="icon" href="./static/colors.ico"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Oxygen:300,400,500,700,400italic"> </head>Also, here are photos the two tab icon versions
Right version
Wrong (React) version
Vue.js - Accessing global variable in external class and component
I've written a basic form class in JS which I am using alongside vue.js. When the form submit button is clicked I want to toggle a class using vue (which I have done) to make the button show a loading icon.
I have had this working when I had my vue instance and component within the same file, but since I've extracted the form HTML into a separate vue component I can't access the 'isLoading' within the component to listen for it being updated to false. Hopefully this makes sense. Here's my code:
SignUpForm.vue
<template> <form method="post" class="columns signup-form is-multiline" @submit.prevent="onSubmit" @keydown="form.errors.clear($event.target.name)"> <section class="column is-6"> <div class="box"> <h3 class="title is-4">Provide your details</h3> <div class="field"> <div class="control"> <input type="text" class="input" name="name" id="name" placeholder="Full Name" autofocus="true" v-model="form.name"> <span class="help is-danger" v-if="form.errors.has('name')" v-text="form.errors.get('name')"></span> </div> </div> <div class="field"> <div class="control"> <input type="email" class="input" name="email" id="email" placeholder="Email Address" v-model="form.email"> <span class="help is-danger" v-if="form.errors.has('email')" v-text="form.errors.get('email')"></span> </div> </div> <div class="field"> <div class="control"> <input type="password" class="input" name="password" id="password" placeholder="Choose a Password" v-model="form.password"> <span class="help is-danger" v-if="form.errors.has('password')" v-text="form.errors.get('password')"></span> </div> </div> <div class="field"> <div class="control"> <input type="password" class="input" name="password_confirmation" id="password_confirmation" placeholder="Repeat Password" v-model="form.password_confirmation"> <span class="help is-danger" v-if="form.errors.has('password_confirmation')" v-text="form.errors.get('password_confirmation')"></span> </div> </div> <div class="control"> <button type="submit" class="button is-primary is-fullwidth" :class="{ 'is-loading': isLoading }">Sign up</button> </div> </div> </section> </form> </template> <script type="text/ecmascript-6"> export default { data: function () { return { form: new Form({ name: '', email: '', password: '', password_confirmation: '' }), isLoading: false } }, methods: { onSubmit() { this.form.submit('post', '/register'); } } } </script>app.js (main vue instance)
require('./bootstrap'); import axios from 'axios'; import Form from './classes/Form'; import SignUpForm from './components/SignUpForm.vue'; window.Vue = require('vue'); window.Form = Form; window.axios = axios; window.axios.defaults.headers.common = { 'X-Requested-With': 'XMLHttpRequest' }; window.app = new Vue({ el: '#root', data: { isLoading: false }, components: { SignUpForm } });Form.js (custom form class) - this class updates the app.isLoading when necessary
import Errors from './Errors'; class Form { /** * Form constructor accepting data object equals * fields. * * @param {object} data * @return {null} */ constructor(data) { this.originalData = data; for (let field in data) { this[field] = data[field]; } this.errors = new Errors(); } /** * Returns form data for submission. * * @return {object} data */ data() { let data = Object.assign({}, this); delete data.originalData; delete data.errors; return data; } /** * Resets the form * * @return {null} */ reset() { for (let field in this.originalData) { this[field] = ''; } if (app.isLoading) app.isLoading = false; } /** * Submits the form then delegates to onSuccess or * onFail methods. * * @param {string} requestType * @param {string} URL to target * @return {null} */ submit(requestType, url) { app.isLoading = true; axios[requestType](url, this.data()) .then(this.onSuccess.bind(this)) .catch(this.onFail.bind(this)); } /** * Handle a successful form submission. * * @param {object} response * @return {[type]} */ onSuccess(response) { alert(response.data); this.errors.clear(); this.reset(); } /** * Handle a failed form submission. * * @param {object} error * @return {[type]} */ onFail(error) { app.isLoading = false; this.errors.record(error.response.data.errors); } } export default Form;Hopefully what I'm trying to do, and the problem I am experiencing makes sense.
Thanks in advance for any help.
Vue.js, How to get tag in directive?
...
methods: { frameShow: function () { //id = a1 or a2 return (id === "a1") ? true : false; }, }How get value id ("a1" and "a2") in method frameShow, when the directive is executed. Or html element?
VueJS combine data sources
I have two data sources, one that I created inside my Vue instance and another that I am importing from an api. How do I match the data that I get from the api and combine it with the data I created to display in one table?
HTML:
<div class="ui container" id="app"> <br> <div class="ui two column divided grid"> <div class="row"> <div class="ten wide column"> <table class="ui unstackable green table"> <thead> <tr> <th>Instrument</th> <th class="right aligned">Position</th> <th class="right aligned">Price</th> <th class="right aligned">Total</th> <th class="right aligned">%</th> </tr> </thead> <tbody> <tr v-for="item in watchlist"> <td>{{ item.instrument }}</td> <td class="right aligned">{{ item.position }}</td> <td class="right aligned"></td> <td class="right aligned"></td> <td class="right aligned"></td> </tr> </tbody> </table> </div> <div class="six wide column" :attribute="priceData"> <table class="ui unstackable red table"> <thead> <tr> <th class="center aligned">Coin</th> <th class="center aligned">Price</th> </tr> </thead> <tbody> <tr v-for="coin in prices"> <td>{{ coin.name }}</td> <td class="center aligned">{{ coin.price_usd }}</td> </tr> </tbody> </table> </div> </div> </div> </div>Currently I have two tables that each displays the data that I would like to combine into one table.
Vue:
new Vue({ el: '#app', data: { watchlist: [ { instrument: 'Artbyte', position: 10000 }, { instrument: 'Civic (CVC)', position: 1000 }, { instrument: 'IOTA', position: 600 }, { instrument: 'Basic Attention Token', position: 600 }, { instrument: 'Sentiment (SAN)', position: 500 }, { instrument: 'TenX', position: 400 }, { instrument: 'OmiseGo', position: 100 }, { instrument: 'EOS', position: 200 }, { instrument: 'Litecoin', position: 30 }, { instrument: 'Ethereum', position: 10 }, { instrument: 'Bitcoin', position: 2 }, { instrument: 'District0x', position: 2000 }, { instrument: 'Aragon', position: 60 }, { instrument: 'LBRY Credits', position: 200 } ], prices: [] }, computed: { priceData: function () { var t = this axios.get('https://api.coinmarketcap.com/v1/ticker/') .then(function (response) { t.prices = response.data }) .catch(function (error) { console.log(error) }) }, getPrices: function () { return this.price } } })heres a jsfiddle https://jsfiddle.net/brklyn8900/83y53b2k/12/
Call method from other componet vue js & laravel
I made a small social network, I need that when following a user the list of friends is updated backend in laravel and frontend in vuejs
Clicking on following a user updates the list of possible friends and updates the list of friends that is in another component
blade
<div class="col-md-2"><amigos></amigos></div> <div class="col-md-8"><post-list></post-list></div> <div class="col-md-2"><no-amigos></no-amigos></div>app.js
Vue.component('post-list', require('./components/Posts.vue')); Vue.component('amigos', require('./components/Amigos.vue')); Vue.component('no-amigos', require('./components/noamigos.vue')); const app = new Vue({ el: '#app' });noamigos.vue (component)
<template> <div class="panel panel-default"> <div class="panel-heading">Amigos sugeridos</div> <div class="panel-body"> <div class="list-group" v-for="item in noamigos"> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading">{{item.name}}</h4> <button class="label label-success btn" v-on:click="seguir(item)"><b>+</b> Seguir</button> </a> </div> </div> </div> </template> <script> export default{ data:()=>({ noamigos: [], }), methods:{ listarNO:function(){ axios.get('noamigos').then(response =>{ this.noamigos = response.data; }) }, seguir:function(codigo){ axios({ method: 'POST', url: 'noamigos', data: { codigo: codigo.id_, }, }).then((response) => { this.listarNO(); //do somethig to call method listarSi() on Amigos component }).catch((error) => { console.log(error); }); } }, created(){ this.listarNO(); } }Amigos.vue (componet)
<template> <div class="panel panel-default"> <div class="panel-heading">Mis Amigos</div> <div class="panel-body"> <div class="list-group" v-for="item in siamigos"> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading">{{item.name}}</h4> </a> </div> </div> </div> </template> <script> export default { data:()=>({ siamigos: [], }), methods:{ listarSI:function(){ axios.get('amigos').then(response =>{ this.siamigos = response.data; }) }, }, created(){ this.listarSI(); } }different ways to render Vue template from a variable without vue router
I am currently using Vue JS and I am not using any router. I am not using stand-alone build and would like to implement with webpack and use it with .vue extension. Looking for better way to render a Vue template using a variable. For example :
// App.Vue var Loading = { template: `<div>Loading...</div>` } // main.js var currentView = Loading; new Vue({ el: "#app", render(h) { return h(currentView); } });The above example perfectly works fine without any issues. Would like to understand if there is a better way to handle.
Let's say if currentView contains a string like
currentView = "Loading" render(h) { return h(eval(currentView)); // works return h([currentView]); // template not found or mount error }How can we replace the value to the template before its passed to render function ?
Thanks in advance.
How to redirect to a different url inside the vue-router beforeRouteEnter hook?
I am building an admin page with Vue.js 2 and I want to prevent unauthenticated users from accessing the /admin route and redirect them to /login. For that I have used the In-Component Guard beforeRouteEnter in the Admin component like follows
... beforeRouteEnter(to, from, next) { if(userNotLogedIn) { this.$router.push('/login'); } }The problem here is that this is not defined in beforeRouteEnter hook. So what's the proper way to access $router and redirect to a different url in this case ?
I'm not geting data form database
I'm using vue.js in my Laravel chat project in that i'm using this to print messages in console:
<script> export default { date(){ return{ messages:[] } }, mounted () { axios.get('/chat/messages').then((response) => { console.log(response); //this.messages = response.data }); } } </script>but i'm not getting my messages in my browser's console.
sw.js forcing page to reload
My auth page will load, and then after a second or two, it will reload itself again.
I've not been able to figure out how to reproduce, but think it's being caused by sw.js reloading fresh assets.
Every time it happens I see the same service worker items in the console.
Why is sw.js forcing the page to reload and how can I prevent it from happening?
Prevent on click on parent when clicking button inside div
Is it possible to prevent the function on the <div> element from running when clicking the button inside the div?
When clicking the button element, the function: toggleSystemDetails should not be triggered? Is this possible in Vue?
<div v-on:click="toggleSystemDetails($event, system.id);" class="grid-tile__list-item" v-for="(system, index) in organization.systems" :key="system.id" :class="{'in-viewport fully-in-viewport': system.inview, 'is-xsmall': system.layout === 'xsmall', 'is-small': system.layout === 'small', 'is-medium': system.layout === 'medium', 'is-large': system.layout === 'large'}"> <div class="grid-tile__list-item--overlay"> <button v-on:click="toggleTileOptionsMode($event, system.id, system.name, system.layout)"> Layout Settings </button> </div>