Software
How can I combine Vue.js with Flask?
I want to use Vue.js and Flask together: Vue.js for a dynamic front-end, and Flask for the back-end. How can I do that?
How to make observable from multiple event in Rxjs?
How are you. I am newbie of Rxjs. I am not sure how to merge observable from different event. I integrated Rxjs with Vue.js
export default { name: 'useraside', data: function () { return { searchKey: '', isPublic: true } }, components: { User }, subscriptions () { return { // this is the example in RxJS's readme. raps: this.$watchAsObservable('searchKey') .pluck('newValue') // .filter(text => text.length > 1) .debounceTime(500) .distinctUntilChanged() .switchMap(terms => fetchRaps(terms, this.userdata._id, this.isPublic)) .map(formatResult) } } }Now event comes from searchKey changes, now I would like to subscribe same observable when isPublic value change. So I would like to get raps whenever searchKey changes or isPublic changes. Thanks.
How can I reset dropdown data if modal closed on vue component?
My case like this
I have two component, parent and child component
My parent component like this :
<template> ... <div class="row"> ... <location-select level="continentList" type="1"/> ... <location-select level="countryList" type="2"/> ... <location-select level="cityList" type="3"/> ... </div> </template> <script> ... export default{ ... } </script>The parent component is a modal bootstrap
My child component like this :
<template> <select class="form-control" v-model="selected" @change="changeLocation"> <option value="0" disabled>Select</option> <template v-for="option in options"> <option v-bind:value="option.id" >{{ option.name }}</option> </template> </select> </template> <script> ... export default{ props: ['level','type'], data() { return { selected: '' };}, computed:{ ...mapGetters([ 'getContinentList', 'getCountryList','getCityList' ]), options(){ const n = ['getContinentList', 'getCountryList','getCityList'] return this[n[this.type-1]] } }, methods:{ ...mapActions([ 'getLocationList' ]), changeLocation(event){ if(this.type==1){ this.getLocationList([{type:2},{level:'countryList'}]) this.getLocationList([{type:3},{level:'cityList'}]) }else if(this.type==2){ this.getLocationList([{type:3},{level:'cityList'}]) } } }, created() { if(this.type==1) this.getLocationList([{type:1},{level:'continentList'}]) if(this.type==2 && this.selected!='') this.getLocationList([{type:2},{level:'countryList'}]) if(this.type==3 && this.selected!='') this.getLocationList([{type:3},{level:'cityList'}]) }, mounted() { $(this.$parent.$refs.modal).on('hidden.bs.modal', (e) => { Object.assign(this.$data, this.$options.data()) }) }, }; </script>If the modal show, I select continent, country and city. Then I close the modal
After that I show the modal again. Then I select country and city first, the data is still exist
I want to reset the data. So if I open modal again, before I choose continent, country and city data is not showing
I try :
Object.assign(this.$data, this.$options.data())and this :
Object.assign(this.$data,this.$options.data.call(this))and this too :
this.$forceUpdate()when modal hidden
But, it does not work
Seems it must update data computed:{...}. But I'm still confused to do it
How can I solve this problem?
Vue.js can't find script tag
I'm developing an application for restaurant booking. I'm using Vue.js, Monaca and OnsenUI to develop the application. I need to get the restaurant and user location using google map. But, it doesn't show the map. After debugging for several hours found out that, home page can't find the script for google map API. I have <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDX3SEHwFUY-k_Jp7YMp0-uTvo7up-paXM"></script> in my index.html but when I inspect the home page it doesn't show this script but shows all other tags. Why does this happen ? How to get this work ?
index.html
<!DOCTYPE html> <html> <head> <!-- This file is the template for "www/index.html". Modify it to fit your needs --> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDX3SEHwFUY-k_Jp7YMp0-uTvo7up-paXM"></script> <!-- The following EJS lines include the necessary CSS and JS from Monaca (cordova.js/ loader.js) in production mode --> <link href="main.css" rel="stylesheet"> </head> <body> <div id="app"></div> <map></map> <script type="text/javascript" src="bundle.js"></script> </body> </html>main.js
import 'onsenui'; import Vue from 'vue'; import VueOnsen from 'vue-onsenui'; // Onsen UI Styling and Icons require('onsenui/css-components-src/src/onsen-css-components.css'); require('onsenui/css/onsenui.css'); import App from './App.vue'; Vue.use(VueOnsen); new Vue({ el: '#app', template: '<app></app>', components: { App } });Home.vue
<template> <v-ons-page> <p style="text-align: center"> Welcome home. </p> <div id="map"></div> </v-ons-page> </template> <script> export default { data() { return { } }, mounted: function() { this.initMap(); }, methods: { initMap: function() { var map; map = new google.maps.Map(document.getElementById('map'), { center: {lat: 83.9207, lng: 35.9565}, scrollwheel: false, zoom: 14 }) } } } </script> <style> #map {height:300px;width:500px;} </style>Home page is showing Welcome Home only, nothing else.
How to convert object's attributes in kebab-case to camelCase [duplicate]
This question already has an answer here:
I'm receiving a json formatted in kebab-case, like so :
{name: "田中 太郎", profile-image: "", visit-frequency: "10"}I have multiple objects that I want to display in my template, so I'm using a v-for. But I can't figure out how to display profile-image or visit-frequency, as I obviously can not do :
<li class="cell" v-for="item in members"> <img :src="item.attributes.profile-image" :alt="item.attributes.name"> </li>I'm thinking about a loop on my list of objects and rename those attributes, but I feel like there something better than that.
Import style file doesn’t scoped?
when I try to import CSS file like this, the CSS doesn't scoped.
must write style in style tag that can be work ???
I use the vue-cli to try this
<style scoped> @import "hell.css"; </style>How can I reload a vue component?
I know the solution is update the prop data like this :
this.selectedContinent = ""But I want to use another solution
After I read some reference, the solution is :
this.$forceUpdate()I try it, but it does not work
Demo and full code like this :
https://jsfiddle.net/Lgxrcc5p/13/
You can click button test to try it
I need a solution other than update the property data
Bulma's navbar-buger doesnt connect to menu items in Vue.js 2
I am trying to implement a navbar for my application whose front end is built using Vue 2.0 and Bulma . It works well on desktops and but on smaller screens its showing the burger icon but it is not showing any elements. Its just present.
<template> <div class="container is-fluid"> <div> <nav class="navbar is-dark"> <div class="navbar-brand"> <a class="navbar-item" href="#"> <img alt="K R O N O S" height="100px"> </a> <div class="button navbar-burger" data-target="navMenu"> <span></span> <span></span> <span></span> </div> </div> <div class="navbar-menu" id="navMenu"> <div class="navbar-end"> <div class="navbar-item"> <a class="" href="#"> Docs </a> </div> <div class="navbar-item "> <a class="" href="#"> Report </a> </div> <div class="navbar-item"> <a class="">More</a> </div> <div class="navbar-item"> <a class="">Logout</a> </div> </div> </div> </nav> </div> </div> </template> <script> document.addEventListener('DOMContentLoaded', function () { // Get all "navbar-burger" elements var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0) // Check if there are any navbar burgers if ($navbarBurgers.length > 0) { // Add a click event on each of them $navbarBurgers.forEach(function ($el) { $el.addEventListener('click', function () { // Get the target from the "data-target" attribute var target = $el.dataset.target var $target = document.getElementById(target) // Toggle the class on both the "navbar-burger" and the "navbar-menu" $el.classList.toggle('is-active') $target.classList.toggle('is-active') }) }) } }) export default { name: 'Navbar', data () { return { msg: '' } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> div{ border: 0px solid black; } </style>As you can see I have tried implementing the example code in on which was present here but with no use. Shouldnt Bulma give me responsive navbar out of the box. All the examples and solutions I have found are for the older "nav" class not the newer "navbar". Help would be much appreciated.
Can we use selenium webdriver to automate VueJS applications?
I am trying to build a selenium fraewmork for an application which is based on VueJS.It would be great help if somebody can share their knowledge on this topic as it will me in taking a better decision.
render custom tag from REST API response
I have the following component MyComponent.vue:
<template> <div v-html="content"></div> </template> <script> import Vue from 'vue' import CustomComponent from 'CustomComponent.vue' Vue.use(CustomComponent) export default { name: `my-component`, computed: { content() { return this.$store.state.content } } // ... } </script>Where this.$store.state.content is html-string which I get from REST API. For example:
<custom-component data-count="1"></custom-component><p>some text</p>custom-component tag is not rendered in may case.
Is it possible to render vue component from html-string which I get from REST API and if I use this string in v-html?
Using a product tour library with VueJS
I'm trying to setup a feature intro tutorial for my web app (like intro.js). I'm having trouble with intro.js with nothing happening (no error message or tour messages). I tried setting up the data attributes that intro.js uses and calling the tour start from the mounted function on App.vue, but no luck. I'm looking to see if anyone has experience with with libraries like this combined with VueJS.
Code from App.vue:
mounted: function() { const introJS = require('intro.js') introJS.introJs().start() }Inside of the same component in it's <template>:
<div class="card card-accent-info" v-if="!isLoading" data-intro="Test step here" data-step="1">I also have the css loaded in App.vue:
@import "~intro.js/minified/introjs.min.css";
Spark is not defined
I using spark in laravel with vue.js. I add in home.blade.php and I got this error:
Uncaught ReferenceError: Spark is not definedwhat I had done:
php artisan spark:installCall parent method with component
I have a component and want to add a click listener that runs a method in the parent template in Vue. Is this possible?
<template> <custom-element @click="someMethod"></custom-element> </template> <script> export default { name: 'template', methods: { someMethod: function() { console.log(true); } } </script>VueJS Element vue-data-tables Search box filter with range
I am using VueJS 2.0 along with http://element.eleme.io and https://njleonzhang.github.io/vue-data-tables. Been trying to figure out how I can do a ranged search (X to Y) with https://njleonzhang.github.io/vue-data-tables/#/searchBoxFilter but unable to figure it out and could not find any examples. I feel like it can be done with the filterFunction, but unsure. Or maybe just add more text inputs that can take two numbers, and pass those values to the filterFunction? I am not really sure so if anyone has a example on how this is done, I would extremely appreciate it. Below is what I have so far, I removed everything I tried, to not confuse anyone.
<template> <data-tables ref="multipleTable" :data="tableData" :pagination-def="paginationDef" :search-def="searchDef" @filtered-data="handleFilteredData" @selection-change="handleSelectionChange"> <el-row slot="custom-tool-bar" style="margin-bottom: 10px"> <el-col> <el-button @click="hideFilteredData()" type="primary">Delete Filtered</el-button> <el-button @click="hideSelectionData()" type="primary">Delete Selected</el-button> </el-col> </el-row> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column prop="id" label="ID" sortable="custom"> </el-table-column> <el-table-column prop="title" label="Title" sortable="custom"> </el-table-column> </el-table-column></data-tables> </template> <script> import axios from 'axios' export default { data() { return { tableData: [], filteredData: [], paginationDef: { pageSize: 10, pageSizes: [10, 20, 50, 100], }, searchDef: { props: ['title', 'id'] }, multipleSelection: [] } }, mounted() { axios.post('select.py', { table: 'master', where: [ { hidden: 0, deal_website: 'dailysteals' } ] }) .then(response => { this.tableData = response.data }) .catch(function (error) { console.log(error); }); }, methods: { handleFilteredData(filteredData) { this.filteredData = filteredData }, hideFilteredData(){ this.filteredData.forEach(function(item){ console.log('ID: ' + item.title); }) }, handleSelectionChange(val) { this.multipleSelection = val; }, hideSelectionData(){ this.multipleSelection.forEach(function(item){ console.log(item.id) }) } } } </script>vuejs with select 2 control missing
I have a very simple Vue js setup that I am trying to used to bind a select2 using a directive. I would rather use a template but for reasons beyond my control I am actual forced to use an asp:DropDownList which means I am forced to have my select boxes inline on the client side.
So I am attempting to set up a Vue.directive but after executing the directive, the select2 is not anywhere to be found. Because the select2 was executed, the original select box get hidden and I end up with nothing showing on the page.
debugging stops are being hit and there are not errors being displayed in the console.
<div id="tabUserInfo"> <input id="myid" type="text" required="required" ref="myid" v-model="firstName" /> <span>{{firstName}}</span> <select id="sel" v-select2="''" v-model="optid"> <option value="1">1</option> <option value="2">2</option> </select> </div><script type="text/javascript"> $(document).ready(function () { Vue.directive('select2', { bind: function (elem, fieldName) { $(elem).select2(); debugger; }, unbind: function (elem) { debugger; } }); var me = "Scott"; var vm = new Vue({ el: '#tabUserInfo', data: { firstName: 'Scott', optid:2 }, }); }); </script>These dependencies were not found error in Vue.js
After updating npm & node to their last versions, I get following errors when I try to run my vue project:
These dependencies were not found:
- !!vue-style-loader!css-loader!../../../../../../../../../swlkagenda/1.2.0/build/node_modules/vue-loader/lib/style-rewriter?id=data-v-c906422a&scoped=true!wisaapp/login/login.css in /home/projects/wisaweb/trunk/app/modules/wisaapp/login/login.vue
I get same errors for all of my vue files, which all look like as follows:
Login.vue:
<template src="wisaapp/login/login.html"></template> <script src="wisaapp/login/login.js"></script> <style src="wisaapp/login/login.css" scoped></style>The first error message I wrote was for referred css files in vue file. For js files I get the following error:
- !!babel-loader!wisaapp/login/login.js in /home/projects/wisaweb/trunk/app/modules/wisaapp/login/login.vue
The path for .js and .css files were before relative but it didn't make any difference.
What can be wrong?
Here is my package.json:
{ "name" : "swllagenda", "version" : "1.0.0", "description" : "Agenda voor Leerlingen die de gegevens van de Schoolware agenda toont.", "author" : "hedwig.theunis@wisa.be", "private" : true, "scripts" : { "dev" : "node build\/dev-server.js", "build" : "node build\/build.js", "unit" : "cross-env BABEL_ENV=test karma start test\/unit\/karma.conf.js --single-run", "e2e" : "node test\/e2e\/runner.js", "test" : "npm run unit && npm run e2e", "lint" : "eslint --ext .js,.vue src test\/unit\/specs test\/e2e\/specs" }, "dependencies" : { "axios" : "^0.15.3", "vue-axios" : "^1.2.2", "lodash" : "^4.17.4", "uglify-js" : "git+https:\/\/github.com\/mishoo\/UglifyJS2.git#harmony", "vue" : "^2.1.10", "vue-router" : "^2.2.0", "vue-style-loader" : "^2.0.4", "vue-touch" : "^2.0.0-beta.4", "vuex" : "^2.1.2", "wisaapp" : "./../../../../wisaweb_trunk/app/modules/wisaapp", "wisaapp-agenda-common" : "./../../../../wisaweb_trunk/app/modules/wisaapp-agenda-common" }, "devDependencies" : { "autoprefixer" : "^6.7.2", "babel-core" : "^6.22.1", "babel-eslint" : "^7.1.1", "babel-loader" : "^6.2.10", "babel-plugin-transform-runtime" : "^6.22.0", "babel-preset-es2015" : "^6.22.0", "babel-preset-stage-2" : "^6.22.0", "babel-register" : "^6.22.0", "chalk" : "^1.1.3", "connect-history-api-fallback" : "^1.3.0", "css-loader" : "^0.26.1", "eslint" : "^3.14.1", "eslint-friendly-formatter" : "^2.0.7", "eslint-loader" : "^1.6.1", "eslint-plugin-html" : "^2.0.0", "eslint-config-standard" : "^6.2.1", "eslint-plugin-promise" : "^3.4.0", "eslint-plugin-standard" : "^2.0.1", "eventsource-polyfill" : "^0.9.6", "express" : "^4.14.1", "extract-text-webpack-plugin" : "^2.0.0-rc.2", "file-loader" : "^0.10.0", "friendly-errors-webpack-plugin" : "^1.1.3", "function-bind" : "^1.1.0", "html-webpack-plugin" : "^2.28.0", "http-proxy-middleware" : "^0.17.3", "webpack-bundle-analyzer" : "^2.2.1", "cross-env" : "^3.1.4", "karma" : "^1.4.1", "karma-coverage" : "^1.1.1", "karma-mocha" : "^1.3.0", "karma-phantomjs-launcher" : "^1.0.2", "karma-sinon-chai" : "^1.2.4", "karma-sourcemap-loader" : "^0.3.7", "karma-spec-reporter" : "0.0.26", "karma-webpack" : "^2.0.2", "lolex" : "^1.5.2", "mocha" : "^3.2.0", "chai" : "^3.5.0", "sinon" : "^1.17.7", "sinon-chai" : "^2.8.0", "inject-loader" : "^2.0.1", "babel-plugin-istanbul" : "^3.1.2", "phantomjs-prebuilt" : "^2.1.14", "chromedriver" : "^2.27.2", "cross-spawn" : "^5.0.1", "nightwatch" : "^0.9.12", "selenium-server" : "^3.0.1", "semver" : "^5.3.0", "opn" : "^4.0.2", "ora" : "^1.1.0", "shelljs" : "^0.7.6", "url-loader" : "^0.5.7", "vue-loader" : "^10.3.0", "vue-style-loader" : "^2.0.0", "vue-template-compiler" : "^2.1.10", "webpack" : "^2.2.1", "webpack-dev-middleware" : "^1.10.0", "webpack-hot-middleware" : "^2.16.1", "webpack-merge" : "^2.6.1", "transfer-webpack-plugin" : "^0.1.4" }, "engines" : { "node" : ">= 4.0.0", "npm" : ">= 3.0.0" } }npm version : 5.4.1
nodejs version: 0.10.25
Vue Component Fail to render in blade.php
I'm new in vuejs and laravel so many thing i am not familiar with. Anyway, this is my code
component.vue
<template> <div class="panel-heading">NewComponent</div> </template> <script> export default { name: 'component', components: { component }, mounted() { console.log('Component mounted.') } } </script>app.js
require('spark-bootstrap'); require('./components/bootstrap'); import component from './components/component.vue'; Vue.component('component', { template: '<div>Your HTML here</div>', data: function() { return { interval: 0, exposure: 0, clicks: 0, total: 0, cpc: 0 } }, var app = new Vue({ el: '#app', data: { message: 'hello world' }, mixins: [require('spark')] });home.blade.php
<div id="app"> <component></component> </div>I google many solutions but none of it is working. Is there anything wrong in my code? The error I get is this:
Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Vue CLI - How to have components on multiple pages (Flask)
I have a NON spa application with pages served by python flask. I am trying to move to using vuecli so that i can get the benefits of ES6. What i thought i would need to do is in the master.jinja2 template i would just wrap the entire thing in . Then i would create components and on the pages where i need those components i could just do .
What's happening instead is the entire app disappears on page render.
How i can i prevent the global Vue instance created by cli in master.js from replacing all content and only load the components when they are on the page.
Thanks not new to vue but i have done everything with include js files is es5 prior to this so its a bit different i think i am just missing something basic to get this to work.
If there is a better way to get what i am after please let me know. If this is in the wrong place please point me to the correct place.
Bottom to top layout desing for chat application
I am designing a webapp for chat application. I have an API which returns a list of messages:
chatsite.com/api/thread/1/messages/ [ { "id": 2, "sender": { "id": 2, "email": "usertwo@gmail.com" }, "sent_datetime": "2017-09-06T17:31:30Z", "body": "user two sending a message in new thread (pk1)" }, { "id": 1, "sender": { "id": 1, "email": "user@gmail.com" }, "sent_datetime": "2017-09-06T17:28:56Z", "body": "Nwe thread est body" } ]This is how the html is layout for now:
<div id="Thread"> <div id="Header"></div> <div id="MessageList"> <div class="message"> <p>{{message.body}}</p> </div> <div class="message"> <p>{{message.body}}</p> </div> <div class="message"> <p>{{message.body}}</p> </div> </div> <div id="Footer"></div> </div>And its related css:
#Thread { background-color: mediumseagreen; display: flex; flex-direction: column; overflow-y: hidden; height: 600px; } #Header { height: 100px; background-color: blueviolet; } #MessageList { background-color: deepskyblue; height: 100%; display: flex; flex-direction: column; overflow-y: auto; } .message { background-color: white; padding: 8px; border: 1px solid #f9f9f9; font-size: 30px; margin: 4px; } #Footer { height: 100px; background: red; }As of now all, the messages are ordered by the latest message in a Top to Bottom fashion. Latest being on the top, and so on :
__________________ | | | HEADER | |________________| | | | Latest msg | |________________| | | | 2nd latest msg | |________________| | | | | | | | | |________________| | | | FOOTER | |________________|But I would like to get the messages in Bottom to Top way like all the messaging platform are these days. Latest being on the bottom an so on:
__________________ | | | HEADER | |________________| | | | | | | | | |________________| | | | 2nd latest msg | |________________| | | | Latest msg | |________________| | | | FOOTER | |________________|If it helps, I am using Vuejs as the frontend framework.
Custom Vue directive to omit tag but render tag's contents?
I'd like to create a custom Vue directive to omit the tag but render the tag's contents when the directive is true.
So for example, if the data for my vue instance is defined as
data:{ omitIt: true }And if the markup looks like this:
<div v-omit="omitIt" class="someClass"> Hello world! </div>When omitIt is set to false as it is above, I'd like the following rendered into the dom:
<div class="someClass"> Hello world! </div>But when omitIt is true I'd like only the following rendered into the dom:
Hello world!I initially tried to solve this by doing the following (admittedly not a custom vue directive):
<template v-if="!omitIt"> <div class="someClass"> </template> Hello world! <template v-if="!omitIt"> </div> </template>The above isn't pretty but I thought perhaps it would work. But alas what gets rendered into the dom when omitIt is false is:
<div class="someClass"></div> Hello world!Any suggestions on how to achieve the results I'm looking for?