Vuejs
most recent 30 from stackoverflow.com
2017-09-14T21:10:11Z
Updated: 7 years 1 week ago
make rewuest in axios with credentials and data
I need to make this request but in axios
$.ajax({ type: "POST", url: url, data: {'HTTP_CONTENT_LANGUAGE': 'en'}, xhrFields: { withCredentials: true },I tried
params = { data: { 'HTTP_CONTENT_LANGUAGE': 'en', }, withCredentials: true }; axios.post(url, params)But didn't work what do I do?
Categories: Software
Json Array object access
I want some help in getting data form json array file is in the link
Html <div> <div v-for="data in myJson.id " >{{ data }}</div> </div> js import json from '.././json/data.json' export default { components: { MainLayout, }, data: function(){ return { myJson:json } }, method:{ getjson:function(){ this.json = JSON.parse(myJson); } } }i want to access only the data with some specific id and i cannot access it using the syntax i am using Json file
Categories: Software
How can I bind a VueJS event to a C# razor input?
I have a few dropdowns created with razor html helpers:
@Html.DropDownList("formtype-filter", Model.FormTypes, "Any Type...", new { @class = "form-control" })I want to add a 'change' event handler to this input using VueJS
Normally I would try to add something along the lines of v-on:change="foo()"
However when I try to add this to my razor input, I receive errors because the razor template doesn't support colons as far as I'm aware
@Html.DropDownList("formtype-filter", Model.FormTypes, "Any Type...", new { @class = "form-control", @v_on:change="foo()" }) //^- Not allowedHow can I bind a Vue.js action/event to this input? Is it possible?
Categories: Software
Components option failing on webpack build with typescript vuejs
I am trying to use a component within my main .ts file using the components option from vue. However, when I use the components option, I get the following error on build:
(42,20): error TS2345: Argument of type '{ components: { SignOff: "string" | "number" | "boolean" | "symbol" | "undefined" | "object" | "f...' is not assignable to parameter of type 'ComponentOptions'. Types of property 'components' are incompatible.
I am able to resolve the error by using render: h => h(EvaluationMain) instead of the components option, but this doesn't help me too much because in my EvaluationMain I also need to import several components and can't use the render function as far as I am aware.
How can I resolve this error?
Evaluation.html <!DOCTYPE html> <html> <head> <title>Evaluations</title> <link href="../../Content/bootstrap.min.css" rel="stylesheet" /> <link href="./Evaluations.css" rel="stylesheet" /> </head> <body> <div v-cloak id="evaluations-app"> <evaluation></evaluation> </div> <label hidden>Icons by http://www.flaticon.com/authors/those-icons from www.flaticon.com</label> <script src="../../Scripts/jquery3.1.1.min.js"></script> <script src="../../Scripts/polyfill.min.js"></script> <script src="../../Scripts/vue.min.js"></script> <script src="../../Scripts/bootstrap.min.js"></script> <script src="../../Scripts/require.js" data-main="./Evaluations.bundle"></script> <script src="../WebAPI/WebAPI.bundle.js"></script> </body> </html> Evaluations.ts "use strict"; import Vue from 'vue'; import EvaluationMain from './components/EvaluationMain.vue'; new Vue({ el: "#evaluations-app", components: { 'evaluation' : EvaluationMain } //render: h => h(EvaluationMain) }); EvaluationMain.vue <template> <div> <competency></competency> <sign-off></sign-off> </div> </template> <script lang="ts"> import Vue from 'vue'; import * as vts from 'vue-typescript-component'; import SignOff from './SignOff.vue'; import Competency from './Competency.vue'; import bus from './EventBus'; @vts.component({components: {SignOff, Competency}}) export default class EvaluationMain extends Vue{ evaluation = new Evaluation(); initialize = async function () { // intialization details }; get perspective () { // get security perspective }; mounted = async function () { // Stuff to do when mounted }; } </script> <style scoped> </style> tsconfig { "compilerOptions": { // "allowJs": true, "allowSyntheticDefaultImports": true, "experimentalDecorators": true, "lib": [ "es2015", "dom", "es2015.promise" ], // "strict": true, "module": "es2015", "moduleResolution": "node", "noEmitOnError": true, "noImplicitAny": false, //"outDir": "./build/", "removeComments": false, "sourceMap": true, "target": "es5" }, "exclude": [ "./node_modules", "wwwroot", "./Model" ], "include": [ "./CCSEQ", "./WebResources", "./sfc.d.ts" ] } webpack.config const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = { entry: { Evaluations: './WebResources/Evaluations/Evaluations.ts', ExpenseUpload: './WebResources/ExpenseUpload/ExpenseUpload.ts' }, devServer: { contentBase: './dist' }, module: { rules: [{ test: /\.ts$/, loader: 'ts-loader', exclude: /node_modules|vue\/src/, options: { appendTsSuffixTo: [/\.vue$/] } }, { test: /\.vue$/, loader: 'vue-loader', options: { esModule: true } }, { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.(png|svg|jpg|gif)$/, use: [ 'file-loader' ] }, ] }, resolve: { extensions: [".ts", ".js"], alias: { 'vue$': 'vue/dist/vue.esm.js' } }, plugins: [ new CleanWebpackPlugin(['dist']) , new CopyWebpackPlugin([ { from: './Scripts', to: './Scripts' }, { from: './WebResources/Evaluations/*.css' }, { from: './WebResources/Evaluations/*.html' }, { from: './WebResources/ExpenseUpload/*.css' }, { from: './WebResources/ExpenseUpload/*.html' }, { from: './Content', to: './Content' } ]) , new webpack.optimize.CommonsChunkPlugin({ name: 'WebAPI' }) ], output: { filename: './WebResources/[name]/[name].bundle.js', path: path.resolve(__dirname, 'dist') } }
Categories: Software
First vue/webpack app and there is no webpack.config file
I cannot seem to get my app to load css files properly and I thought it might have to do with the fact that my app seems to be using webpack, but there is no webpack.config.js file in the root.
I have webpack.base.conf.js and webpack.dev.conf.js and webpack.prod.conf.js but they are all in the ./build folder.
Is this wrong?
Categories: Software
Rewrite jquery ajax request in axios and set xhrFields
i HAVE jquery request
$.ajax({ type: "GET", url: "http://6232423.212342343.100.89:9000/api/v2/content/categories/", xhrFields: { withCredentials: true }, });how do I make the same but in axios? I tried like this:
axios.get(portal.categoriesUrl, {xhrFields: { withCredentials: true }} )but didn't work
Categories: Software
how to populate data in a dropdown menu chained together in vuejs?
Hello i am trying to create a dropdown menu in my form in which there are three fields college name , college city and college name. The problem is i am not able to chain the dropdown menu.It should be like if i choose a particular state the city dropdown menu should populate with the cities in that state and then college should get populated by the city.
My data is coming in a form of array:
[{college_city:bangalore college_name:psit college_state:karnatak},{college_city:Delhi college_name:LSR college_state:Delhi}]
Categories: Software
How to optimize parameters binding from blade to Vue component's children?
having in blade a directive for a parent component like this:
<component v-bind:mydata="data" v-bind:basepathimg="{{config('base_path_images')}}" ></component>Which in turns loads multiple times its children like:
<div v-for="(c, index) in mydata"> <childcomponent v-bind:c="item" v-bind:basepathimg="basepathimg" ></childcomponent> </div> .... <script> export default{ props: ['mydata', 'basepathimg', ....], ....then finally in child component
<img :src="basepathimg" class="img-responsive"> <script> export default{ props: ['item', 'basepathimg', ....], ....Focus here is on "basepathimg" As you see it has to be passthrough blade parentcomponent ant then child component... but actually I don't need it in parent component.
Could I optimize this some way?
Categories: Software
VueX state one step behind with dynamic routes (nuxt)
I am trying to update my state every route change by updating the 'activeCategory' of a post.
I am firing a VueX action every time the route changes. But the state is always one step behind, as it displays the category for the previous post not the current one.
I fire the action on mounted when the user initially hits the page and then fire the action every route change as i'm using dynamic routes.
Any help would be great! Thanks
Categories: Software
highlight a drop area before drop image to upload vue js
I am working with laravel and vue 2. I want to highlight an drop-able area when select images for upload or drag the selected image just before drop the images. So far in my knowledge it can be done by dynamically add a class to change css for highlighting the area when drag the image on the area. But i don't know which event i should trigger when i drag the images to the area. or even better suggestion will be appreciable. any help please??
Categories: Software
Veu.js: vue-alert component not rendering
import VueAlert from 'archer-vue-alert';
Vue.use(VueAlert);
this.$alert({
title: 'alertTitle',
message: 'alertMessage', //message accepts string and raw_html
confirmTxt: 'confirm btn txt' //default is 'OK'
}).then(function () {
//...
})
I am sure that there is no problem with archer-vue-alert package, in fact I used vue-alert package as well. Same problem. Not sure why alert is never displayed.
Please suggest.
package.json
"archer-vue-alert": "^2.0.2", "onsenui": "^2.5.1", "vue": "^2.4.2", "vue-i18n": "^7.1.1", "vue-infinite-scroll": "^2.0.1", "vue-onsenui": "^2.1.0", "vue-resource": "^1.3.4", "vue-router": "^2.7.0", "vuex": "^2.3.1"
Categories: Software
Model and Computed Property interaction in Vue.js
Using vue.js I am trying to build a simple task manager.
When a user clicks the "complete" checkbox I want two things to happen:
- If the "Show all tasks" is unchecked, hide the task.
- Send an ajax request to the server to mark the task as complete/open.
The impotent parts are shown below:
<div id="tasks-app"> <input type="checkbox" id="checkbox" v-model="show_all"> <label for="checkbox">Show all tasks</label><br> <table class="table"> <tr><th v-for="column in table_columns" v-text="column"></th><tr> <tr v-for="row in visibleTasks" :class="{danger: !row.daily_task.complete && row.daily_task.delayed, success: row.daily_task.complete}"> <td v-text="row.task.name"></td> <td v-text="row.task.deadline"></td> <td v-text="row.daily_task.status"></td> <td v-text="row.daily_task.task_user"></td> <td> <input type="checkbox" v-on:change="updateStatus(row)" v-model="row.daily_task.complete" >Complete</input> </td> <td><input v-model="row.daily_task.delay_reason"></input></td> </table> </div>And the VUE.js code:
app = new Vue({ el: '#tasks-app', data: { table_columns: ['Task','Deadline','Status','User','Actions','Reason'], tasks: [], filter_string: '', show_all: false }, computed: { visibleTasks() { show_all = this.show_all if(show_all){ search_filter = this.tasks }else{ search_filter = _.filter(this.tasks,function(task){ return !task.daily_task.complete; }) } return search_filter } }, methods: { updateStatus(row){ var id = row.daily_task.id var complete = row.daily_task.complete if(complete){ axios.get('set_task_complete/' + id) }else{ axios.get('set_task_open/' + id) } } } })If the show all checkbox is checked, this works as expected. The data changes and then the updateStatus function is called.
If however the show all checkbox is unchecked, the visibleTasks will trigger and the logic for the updateStatus will fail, as the row will be hidden and the ID that is send to the server will be off by one. If the row hides before updateStatusis called the wrong row is passed to the updateStatus function.
I could solve this by adding a filter update at the end of updateStatus function but that does not seems to utilize the Vue.js library. Could someone help me what components of Vue you would use to solve this problem?
Categories: Software
Why moment js not working in mounted vue component?
If I put moment on the method like this :
<template> ... </template> <script> export default{ ... methods:{ ... add(event){ let current = moment() } } } </script>If call the add method, it works. No error
But if I put moment on the mounted like this :
mounted(){ let currentAt = moment() }It does not work
There exist error like this :
[Vue warn]: Error in mounted hook: "ReferenceError: moment is not defined"
How can I solve it?
Categories: Software
VueJs 2 emit custom event firing, but not being "heard"
Probably not possible, but I have an object that extends Vue/ VueComponent (tried both) that $emits a custom event that would normally be caught on its parent.
Please see this pen: https://codepen.io/anon/pen/MvmeQp?editors=0011 and watch the console.
class nonVueComponent extends Vue { constructor(age,...args){ super(args) console.log('new Blank Obj') setTimeout(() => { console.log('customEvent event does fire, but nothing hears it. Probably because it isnt in the DOM?', age) this.$emit('customEvent', `custom event from nonVueComponent...${age}`) },500) } } Vue.component('test', { template: `<div> {{content}} <child :childAge="age" @customEvent="customEvent"></child> <child-secondary @secondaryEvent="customEvent"></child-secondary> </div>`, props: {}, data () { return { content: 'hello from component!', age : 20 } }, methods : { customEvent(data){ console.log('PARENT: custom event triggered!', data) this.content = data }, secondaryEvent(data){ console.log('PARENT: !!secondary custom event triggered', data) this.content = data } } }) Vue.component('child',{ template: `<div>+- child {{childAge}}</div>`, props: ['childAge'], data () { outsideOfVue: new nonVueComponent(this.childAge) } }) Vue.component('child-secondary',{ template: `<div>+- secondary event</div>`, mounted(){ setTimeout( ()=>{ this.$emit('secondaryEvent', 'from secondary event....') },125 ) } }) let vm = new Vue({ el: '#app'})Aside from using an eventBus, is there any other way to get the event up and out from the <child> ? Maybe make the nonVueComponent a mixin?
Thanks.
Categories: Software
how to generate name for v-model in vuetify
I have a list of item that i put in a data table and for each line i would like to generate a unique v-model name in my select field.
I'have tried to create an empty array first but it does not work.
this.role = []This is my select item :
<v-select v-bind:items="roleItems" label="Select Role User" v-model="this.role[props.item.id]"></v-select>
Categories: Software
Gulp task causing import of Promise from Babel to fail
I have a simple Gulp file I'm trying to use. For some reason when I run the following task (gulp test):
var gulp = require('gulp'); var mocha = require('gulp-mocha'); var util = require('gulp-util'); var getFiles = require('./src/functions/getFiles.js') var writeFiles = require('./src/functions/writeFiles.js') gulp.task('test', function () { return gulp.src(['test/**/*.js'], { read: false }) .pipe(mocha({ reporter: 'spec' })) .on('error', util.log); }); gulp.task('watch-test', function () { gulp.watch(['src/**'], ['test']); });I get this error:
(function (exports, require, module, __filename, __dirname) { import _Promise from 'babel-runtime/core-js/promise'; ^^^^^^ SyntaxError: Unexpected token import at createScript (vm.js:53:10) at Object.runInThisContext (vm.js:95:10) at Module._compile (module.js:543:28) at loader (/Users/Xadmin/production/Y-back/node_modules/babel-register/lib/node.js:144:5) at Object.require.extensions.(anonymous function) [as .js] (/Users/Xadmin/production/Y-back/node_modules/babel-register/lib/node.js:154:7) at Module.load (module.js:488:32) at tryModuleLoad (module.js:447:12) at Function.Module._load (module.js:439:3) at Module.require (module.js:498:17) at require (internal/module.js:20:19) at Object.<anonymous> (/Users/Xadmin/production/Y-back/test/e2e/runner.js:3:14) at Module._compile (module.js:571:32) at loader (/Users/Xadmin/production/Y-back/node_modules/babel-register/lib/node.js:144:5) at Object.require.extensions.(anonymous function) [as .js] (/Users/Xadmin/production/Y-back/node_modules/babel-register/lib/node.js:154:7) at Module.load (module.js:488:32) at tryModuleLoad (module.js:447:12) at Function.Module._load (module.js:439:3) at Module.require (module.js:498:17) at require (internal/module.js:20:19) at /Users/Xadmin/production/Y-back/node_modules/mocha/lib/mocha.js:230:27 at Array.forEach (native) at Mocha.loadFiles (/Users/Xadmin/production/Y-back/node_modules/mocha/lib/mocha.js:227:14) at Mocha.run (/Users/Xadmin/production/Y-back/node_modules/mocha/lib/mocha.js:513:10) at Object.<anonymous> (/Users/Xadmin/production/Y-back/node_modules/mocha/bin/_mocha:480:18) at Module._compile (module.js:571:32) at Object.Module._extensions..js (module.js:580:10) at Module.load (module.js:488:32) at tryModuleLoad (module.js:447:12) at Function.Module._load (module.js:439:3) at Module.runMain (module.js:605:10) at run (bootstrap_node.js:427:7) at startup (bootstrap_node.js:151:9) at bootstrap_node.js:542:3 [09:42:16] { Error: Command failed: mocha /Users/Xadmin/production/Y-back/test/e2e/nightwatch.conf.js /Users/Xadmin/production/Y-back/test/e2e/runner.js /Users/Xadmin/production/Y-back/test/unit/index.js /Users/Xadmin/production/Y-back/test/unit/karma.conf.js /Users/Xadmin/production/Y-back/test/e2e/specs/test.js /Users/Xadmin/production/Y-back/test/e2e/custom-assertions/elementCount.js /Users/Xadmin/production/Y-back/test/unit/specs/FileAdder.spec.js /Users/Xadmin/production/Y-back/test/unit/specs/Hello.spec.js /Users/Xadmin/production/Y-back/test/unit/coverage/lcov-report/prettify.js /Users/Xadmin/production/Y-back/test/unit/coverage/lcov-report/sorter.js --colors --reporter=spec /Users/Xadmin/production/Y-back/build/dev-server.js:1I am using the standard (full) Vue Webpack template, so there should be no problem in importing Promises from Babel, as far as I know. Here is my package.json if it helps:
{ "private": true, "scripts": { "dev": "node build/dev-server.js", "start": "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" }, "dependencies": { "browserfs": "^1.4.2", "element-ui": "^1.4.1", "firebase": "^4.2.0", "fs": "0.0.1-security", "gulp": "^3.9.1", "gulp-mocha": "^4.3.1", "gulp-util": "^3.0.8", "mocha": "^3.5.0", "vue": "^2.3.3", "vue-awesome": "^2.3.1", "vuefire": "^1.4.3" }, "devDependencies": { "autoprefixer": "^7.1.2", "babel-core": "^6.22.1", "babel-loader": "^7.1.1", "babel-plugin-transform-runtime": "^6.22.0", "babel-preset-env": "^1.3.2", "babel-preset-stage-2": "^6.22.0", "babel-register": "^6.22.0", "chalk": "^2.0.1", "connect-history-api-fallback": "^1.3.0", "copy-webpack-plugin": "^4.0.1", "css-loader": "^0.28.0", "cssnano": "^3.10.0", "eventsource-polyfill": "^0.9.6", "express": "^4.14.1", "extract-text-webpack-plugin": "^2.0.0", "file-loader": "^0.11.1", "friendly-errors-webpack-plugin": "^1.1.3", "html-webpack-plugin": "^2.28.0", "http-proxy-middleware": "^0.17.3", "webpack-bundle-analyzer": "^2.2.1", "cross-env": "^5.0.1", "karma": "^1.4.1", "karma-coverage": "^1.1.1", "karma-mocha": "^1.3.0", "karma-phantomjs-launcher": "^1.0.2", "karma-phantomjs-shim": "^1.4.0", "karma-sinon-chai": "^1.3.1", "karma-sourcemap-loader": "^0.3.7", "karma-spec-reporter": "0.0.31", "karma-webpack": "^2.0.2", "lolex": "^1.5.2", "mocha": "^3.2.0", "chai": "^3.5.0", "sinon": "^2.1.0", "sinon-chai": "^2.8.0", "inject-loader": "^3.0.0", "babel-plugin-istanbul": "^4.1.1", "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", "shelljs": "^0.7.6", "opn": "^5.1.0", "optimize-css-assets-webpack-plugin": "^2.0.0", "ora": "^1.2.0", "rimraf": "^2.6.0", "url-loader": "^0.5.8", "vue-loader": "^12.1.0", "vue-style-loader": "^3.0.1", "vue-template-compiler": "^2.3.3", "webpack": "^2.6.1", "webpack-dev-middleware": "^1.10.0", "webpack-hot-middleware": "^2.18.0", "webpack-merge": "^4.1.0" }, "engines": { "node": ">= 4.0.0", "npm": ">= 3.0.0" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] }Any ideas what could be causing this?
Categories: Software
Vuejs + laravel: Wrong position of rendering
I have the following problem that doesn't make sense to me.
I have one file index.blade.php with the following code:
<!-- Vue component is rendered on this spot --> <table> <thead> <tr> <th>{{ __('Status') }}</th> <th>{{ __('From') }}</th> <th>{{ __('To') }}</th> <th colspan="3"></th> </tr> </thead> <list-of-available-dates></list-of-available-dates> </table>And the Vue component is like this:
<template><tbody> <tr v-for="date in dates" v-bind:class="{'is-grey': date.status.code == 2}" > <td>{{ date.status.label }}</td> <td>{{ date.start.date }}</td> <td>{{ date.end.date }}</td> <td>10 {{ 'options taken' }}</td> <td><a href="dates/10/options"></a></td> </tr> </tbody></template>It is rendered by:
Vue.component( 'list-of-available-dates', require('./components/frontend/Datelist.vue') );The Vue component is loaded with the right information and with the right template markup. But instead it is loaded on the spot where <list-of-available-dates> is rendered, it is rendered at top of the table. I have put a comment in the code to show where it is rendered.
Did I forget something? Why is it rendered at the top instead on the position of the component.
Categories: Software
Build Vue Single File Component to plain js file
I have created a vue plugin using multiple .vue component files. I would like to be able to host this project onto a cdn with plain javascript access, but am not sure how to write such a build script.
I am currently thinking of something like
require('vue-loader!./node_modules/vue-loader') var lib = require('src/<my_file>.vue')
in a build.js file I run with node. However, I am not sure how to use vue-loader outside of the context of webpack. I understand that this is not vue-loader's main focus, but I would think that somewhere in the library is a function to actually convert the .vue file into a json object I could print.
What internal function can I call, or otherwise what other option do I have for this?
Categories: Software
How to get techanjs working with vue.js and event binding errors
I'm getting the following error when I move my mouse over a techanjs chart inside a vue.js component:
Uncaught TypeError: Cannot read property 'sourceEvent' of null at __webpack_exports__.a (eval at <anonymous> (renderer.js:2455), <anonymous>:6:26) at __webpack_exports__.a (eval at <anonymous> (renderer.js:9334), <anonymous>:7:99) at SVGRectElement.eval (eval at <anonymous> (renderer.js:8060), <anonymous>:2357:38) at SVGRectElement.eval (eval at <anonymous> (renderer.js:2037), <anonymous>:29:16) __webpack_exports__.a @ sourceEvent.js?354a:5 __webpack_exports__.a @ mouse.js?ab49:5 (anonymous) @ techan.js?5956:2357 (anonymous) @ on.js?519a:27 drag.js?c3c9:10 Uncaught TypeError: Cannot read property 'button' of null at SVGPathElement.defaultFilter (eval at <anonymous> (renderer.js:8340), <anonymous>:16:70) at SVGPathElement.mousedowned (eval at <anonymous> (renderer.js:8340), <anonymous>:47:32) at SVGPathElement.eval (eval at <anonymous> (renderer.js:2037), <anonymous>:29:16)Does anyone know how to resolve this?
Here is the component:
<template> <div id="wrapper"> <main> <header> <NavBar /> </header> <section class="charts"> </section> </main> </div> </template> <script> import * as d3 from 'd3' // import {event as currentEvent} from 'd3-selection' import techan from 'techan' export default { name: 'charts', components: { }, mounted () { var dim = { width: 960, height: 500, margin: { top: 20, right: 50, bottom: 30, left: 50 }, ohlc: { height: 305 }, indicator: { height: 65, padding: 5 } } dim.plot = { width: dim.width - dim.margin.left - dim.margin.right, height: dim.height - dim.margin.top - dim.margin.bottom } dim.indicator.top = dim.ohlc.height + dim.indicator.padding dim.indicator.bottom = dim.indicator.top + dim.indicator.height + dim.indicator.padding var indicatorTop = d3.scaleLinear() .range([dim.indicator.top, dim.indicator.bottom]) var parseDate = d3.timeParse('%d-%b-%y') var zoom = d3.zoom() .on('zoom', zoomed) var x = techan.scale.financetime() .range([0, dim.plot.width]) var y = d3.scaleLinear() .range([dim.ohlc.height, 0]) var yPercent = y.copy() // Same as y at this stage, will get a different domain later var yInit, yPercentInit, zoomableInit var yVolume = d3.scaleLinear() .range([y(0), y(0.2)]) var candlestick = techan.plot.candlestick() .xScale(x) .yScale(y) var tradearrow = techan.plot.tradearrow() .xScale(x) .yScale(y) .y(function (d) { // Display the buy and sell arrows a bit above and below the price, so the price is still visible if (d.type === 'buy') return y(d.low) + 5 if (d.type === 'sell') return y(d.high) - 5 else return y(d.price) }) var sma0 = techan.plot.sma() .xScale(x) .yScale(y) var sma1 = techan.plot.sma() .xScale(x) .yScale(y) var ema2 = techan.plot.ema() .xScale(x) .yScale(y) var volume = techan.plot.volume() .accessor(candlestick.accessor()) // Set the accessor to a ohlc accessor so we get highlighted bars .xScale(x) .yScale(yVolume) var trendline = techan.plot.trendline() .xScale(x) .yScale(y) var supstance = techan.plot.supstance() .xScale(x) .yScale(y) var xAxis = d3.axisBottom(x) var timeAnnotation = techan.plot.axisannotation() .axis(xAxis) .orient('bottom') .format(d3.timeFormat('%Y-%m-%d')) .width(65) .translate([0, dim.plot.height]) var yAxis = d3.axisRight(y) var ohlcAnnotation = techan.plot.axisannotation() .axis(yAxis) .orient('right') .format(d3.format(',.2f')) .translate([x(1), 0]) var closeAnnotation = techan.plot.axisannotation() .axis(yAxis) .orient('right') .accessor(candlestick.accessor()) .format(d3.format(',.2f')) .translate([x(1), 0]) var percentAxis = d3.axisLeft(yPercent) .tickFormat(d3.format('+.1%')) var percentAnnotation = techan.plot.axisannotation() .axis(percentAxis) .orient('left') var volumeAxis = d3.axisRight(yVolume) .ticks(3) .tickFormat(d3.format(',.3s')) var volumeAnnotation = techan.plot.axisannotation() .axis(volumeAxis) .orient('right') .width(35) var macdScale = d3.scaleLinear() .range([indicatorTop(0) + dim.indicator.height, indicatorTop(0)]) var rsiScale = macdScale.copy() .range([indicatorTop(1) + dim.indicator.height, indicatorTop(1)]) var macd = techan.plot.macd() .xScale(x) .yScale(macdScale) var macdAxis = d3.axisRight(macdScale) .ticks(3) var macdAnnotation = techan.plot.axisannotation() .axis(macdAxis) .orient('right') .format(d3.format(',.2f')) .translate([x(1), 0]) var macdAxisLeft = d3.axisLeft(macdScale) .ticks(3) var macdAnnotationLeft = techan.plot.axisannotation() .axis(macdAxisLeft) .orient('left') .format(d3.format(',.2f')) var rsi = techan.plot.rsi() .xScale(x) .yScale(rsiScale) var rsiAxis = d3.axisRight(rsiScale) .ticks(3) var rsiAnnotation = techan.plot.axisannotation() .axis(rsiAxis) .orient('right') .format(d3.format(',.2f')) .translate([x(1), 0]) var rsiAxisLeft = d3.axisLeft(rsiScale) .ticks(3) var rsiAnnotationLeft = techan.plot.axisannotation() .axis(rsiAxisLeft) .orient('left') .format(d3.format(',.2f')) var ohlcCrosshair = techan.plot.crosshair() .xScale(timeAnnotation.axis().scale()) .yScale(ohlcAnnotation.axis().scale()) .xAnnotation(timeAnnotation) .yAnnotation([ohlcAnnotation, percentAnnotation, volumeAnnotation]) .verticalWireRange([0, dim.plot.height]) var macdCrosshair = techan.plot.crosshair() .xScale(timeAnnotation.axis().scale()) .yScale(macdAnnotation.axis().scale()) .xAnnotation(timeAnnotation) .yAnnotation([macdAnnotation, macdAnnotationLeft]) .verticalWireRange([0, dim.plot.height]) var rsiCrosshair = techan.plot.crosshair() .xScale(timeAnnotation.axis().scale()) .yScale(rsiAnnotation.axis().scale()) .xAnnotation(timeAnnotation) .yAnnotation([rsiAnnotation, rsiAnnotationLeft]) .verticalWireRange([0, dim.plot.height]) var svg = d3.select('body').append('svg') .attr('width', dim.width) .attr('height', dim.height) var defs = svg.append('defs') defs.append('clipPath') .attr('id', 'ohlcClip') .append('rect') .attr('x', 0) .attr('y', 0) .attr('width', dim.plot.width) .attr('height', dim.ohlc.height) defs.selectAll('indicatorClip').data([0, 1]) .enter() .append('clipPath') .attr('id', function (d, i) { return 'indicatorClip-' + i }) .append('rect') .attr('x', 0) .attr('y', function (d, i) { return indicatorTop(i) }) .attr('width', dim.plot.width) .attr('height', dim.indicator.height) svg = svg.append('g') .attr('transform', 'translate(' + dim.margin.left + ',' + dim.margin.top + ')') svg.append('text') .attr('class', 'symbol') .attr('x', 20) .text('Facebook, Inc. (FB)') svg.append('g') .attr('class', 'x axis') .attr('transform', 'translate(0,' + dim.plot.height + ')') var ohlcSelection = svg.append('g') .attr('class', 'ohlc') .attr('transform', 'translate(0,0)') ohlcSelection.append('g') .attr('class', 'axis') .attr('transform', 'translate(' + x(1) + ',0)') .append('text') .attr('transform', 'rotate(-90)') .attr('y', -12) .attr('dy', '.71em') .style('text-anchor', 'end') .text('Price ($)') ohlcSelection.append('g') .attr('class', 'close annotation up') ohlcSelection.append('g') .attr('class', 'volume') .attr('clip-path', 'url(#ohlcClip)') ohlcSelection.append('g') .attr('class', 'candlestick') .attr('clip-path', 'url(#ohlcClip)') ohlcSelection.append('g') .attr('class', 'indicator sma ma-0') .attr('clip-path', 'url(#ohlcClip)') ohlcSelection.append('g') .attr('class', 'indicator sma ma-1') .attr('clip-path', 'url(#ohlcClip)') ohlcSelection.append('g') .attr('class', 'indicator ema ma-2') .attr('clip-path', 'url(#ohlcClip)') ohlcSelection.append('g') .attr('class', 'percent axis') ohlcSelection.append('g') .attr('class', 'volume axis') var indicatorSelection = svg.selectAll('svg > g.indicator').data(['macd', 'rsi']).enter() .append('g') .attr('class', function (d) { return d + ' indicator' }) indicatorSelection.append('g') .attr('class', 'axis right') .attr('transform', 'translate(' + x(1) + ',0)') indicatorSelection.append('g') .attr('class', 'axis left') .attr('transform', 'translate(' + x(0) + ',0)') indicatorSelection.append('g') .attr('class', 'indicator-plot') .attr('clip-path', function (d, i) { return 'url(#indicatorClip-' + i + ')' }) // Add trendlines and other interactions last to be above zoom pane svg.append('g') .attr('class', 'crosshair ohlc') svg.append('g') .attr('class', 'tradearrow') .attr('clip-path', 'url(#ohlcClip)') svg.append('g') .attr('class', 'crosshair macd') svg.append('g') .attr('class', 'crosshair rsi') svg.append('g') .attr('class', 'trendlines analysis') .attr('clip-path', 'url(#ohlcClip)') svg.append('g') .attr('class', 'supstances analysis') .attr('clip-path', 'url(#ohlcClip)') d3.select('button').on('click', reset) d3.csv('/static/data.csv', function (error, data) { if (error) return var accessor = candlestick.accessor() var indicatorPreRoll = 33 // Don't show where indicators don't have data data = data.map(function (d) { return { date: parseDate(d.Date), open: +d.Open, high: +d.High, low: +d.Low, close: +d.Close, volume: +d.Volume } }).sort(function (a, b) { return d3.ascending(accessor.d(a), accessor.d(b)) }) x.domain(techan.scale.plot.time(data).domain()) y.domain(techan.scale.plot.ohlc(data.slice(indicatorPreRoll)).domain()) yPercent.domain(techan.scale.plot.percent(y, accessor(data[indicatorPreRoll])).domain()) yVolume.domain(techan.scale.plot.volume(data).domain()) var trendlineData = [ { start: { date: new Date(2014, 2, 11), value: 72.50 }, end: { date: new Date(2014, 5, 9), value: 63.34 } }, { start: { date: new Date(2013, 10, 21), value: 43 }, end: { date: new Date(2014, 2, 17), value: 70.50 } } ] var supstanceData = [ { start: new Date(2014, 2, 11), end: new Date(2014, 5, 9), value: 63.64 }, { start: new Date(2013, 10, 21), end: new Date(2014, 2, 17), value: 55.50 } ] var trades = [ { date: data[67].date, type: 'buy', price: data[67].low, low: data[67].low, high: data[67].high }, { date: data[100].date, type: 'sell', price: data[100].high, low: data[100].low, high: data[100].high }, { date: data[130].date, type: 'buy', price: data[130].low, low: data[130].low, high: data[130].high }, { date: data[170].date, type: 'sell', price: data[170].low, low: data[170].low, high: data[170].high } ] var macdData = techan.indicator.macd()(data) macdScale.domain(techan.scale.plot.macd(macdData).domain()) var rsiData = techan.indicator.rsi()(data) rsiScale.domain(techan.scale.plot.rsi(rsiData).domain()) svg.select('g.candlestick').datum(data).call(candlestick) svg.select('g.close.annotation').datum([data[data.length - 1]]).call(closeAnnotation) svg.select('g.volume').datum(data).call(volume) svg.select('g.sma.ma-0').datum(techan.indicator.sma().period(10)(data)).call(sma0) svg.select('g.sma.ma-1').datum(techan.indicator.sma().period(20)(data)).call(sma1) svg.select('g.ema.ma-2').datum(techan.indicator.ema().period(50)(data)).call(ema2) svg.select('g.macd .indicator-plot').datum(macdData).call(macd) svg.select('g.rsi .indicator-plot').datum(rsiData).call(rsi) svg.select('g.crosshair.ohlc').call(ohlcCrosshair).call(zoom) svg.select('g.crosshair.macd').call(macdCrosshair).call(zoom) svg.select('g.crosshair.rsi').call(rsiCrosshair).call(zoom) svg.select('g.trendlines').datum(trendlineData).call(trendline).call(trendline.drag) svg.select('g.supstances').datum(supstanceData).call(supstance).call(supstance.drag) svg.select('g.tradearrow').datum(trades).call(tradearrow) // Stash for zooming zoomableInit = x.zoomable().domain([indicatorPreRoll, data.length]).copy() // Zoom in a little to hide indicator preroll yInit = y.copy() yPercentInit = yPercent.copy() draw() }) function reset () { zoom.scale(1) zoom.translate([0, 0]) draw() } function zoomed () { x.zoomable().domain(d3.event.transform.rescaleX(zoomableInit).domain()) y.domain(d3.event.transform.rescaleY(yInit).domain()) yPercent.domain(d3.event.transform.rescaleY(yPercentInit).domain()) draw() } function draw () { svg.select('g.x.axis').call(xAxis) svg.select('g.ohlc .axis').call(yAxis) svg.select('g.volume.axis').call(volumeAxis) svg.select('g.percent.axis').call(percentAxis) svg.select('g.macd .axis.right').call(macdAxis) svg.select('g.rsi .axis.right').call(rsiAxis) svg.select('g.macd .axis.left').call(macdAxisLeft) svg.select('g.rsi .axis.left').call(rsiAxisLeft) // We know the data does not change, a simple refresh that does not perform data joins will suffice. svg.select('g.candlestick').call(candlestick.refresh) svg.select('g.close.annotation').call(closeAnnotation.refresh) svg.select('g.volume').call(volume.refresh) svg.select('g .sma.ma-0').call(sma0.refresh) svg.select('g .sma.ma-1').call(sma1.refresh) svg.select('g .ema.ma-2').call(ema2.refresh) svg.select('g.macd .indicator-plot').call(macd.refresh) svg.select('g.rsi .indicator-plot').call(rsi.refresh) svg.select('g.crosshair.ohlc').call(ohlcCrosshair.refresh) svg.select('g.crosshair.macd').call(macdCrosshair.refresh) svg.select('g.crosshair.rsi').call(rsiCrosshair.refresh) svg.select('g.trendlines').call(trendline.refresh) svg.select('g.supstances').call(supstance.refresh) svg.select('g.tradearrow').call(tradearrow.refresh) } } } </script> <style> text { fill: #000; } text.symbol { fill: #BBBBBB; } path { fill: none; stroke-width: 1; } path.candle { stroke: #000000; } path.candle.body { stroke-width: 0; } path.candle.up { fill: #00AA00; stroke: #00AA00; } path.candle.down { fill: #FF0000; stroke: #FF0000; } .close.annotation.up path { fill: #00AA00; } path.volume { fill: #DDDDDD; } .indicator-plot path.line { fill: none; stroke-width: 1; } .ma-0 path.line { stroke: #1f77b4; } .ma-1 path.line { stroke: #aec7e8; } .ma-2 path.line { stroke: #ff7f0e; } button { position: absolute; right: 110px; top: 25px; } path.macd { stroke: #0000AA; } path.signal { stroke: #FF9999; } path.zero { stroke: #BBBBBB; stroke-dasharray: 0; stroke-opacity: 0.5; } path.difference { fill: #BBBBBB; opacity: 0.5; } path.rsi { stroke: #000000; } path.overbought, path.oversold { stroke: #FF9999; stroke-dasharray: 5, 5; } path.middle, path.zero { stroke: #BBBBBB; stroke-dasharray: 5, 5; } .analysis path, .analysis circle { stroke: blue; stroke-width: 0.8; } .trendline circle { stroke-width: 0; display: none; } .mouseover .trendline path { stroke-width: 1.2; } .mouseover .trendline circle { stroke-width: 1; display: inline; } .dragging .trendline path, .dragging .trendline circle { stroke: darkblue; } .interaction path, .interaction circle { pointer-events: all; } .interaction .body { cursor: move; } .trendlines .interaction .start, .trendlines .interaction .end { cursor: nwse-resize; } .supstance path { stroke-dasharray: 2, 2; } .supstances .interaction path { pointer-events: all; cursor: ns-resize; } .mouseover .supstance path { stroke-width: 1.5; } .dragging .supstance path { stroke: darkblue; } .crosshair { cursor: crosshair; } .crosshair path.wire { stroke: #DDDDDD; stroke-dasharray: 1, 1; } .crosshair .axisannotation path { fill: #DDDDDD; } .tradearrow path.tradearrow { stroke: none; } .tradearrow path.buy { fill: #0000FF; } .tradearrow path.sell { fill: #9900FF; } .tradearrow path.highlight { fill: none; stroke-width: 2; } .tradearrow path.highlight.buy { stroke: #0000FF; } .tradearrow path.highlight.sell { stroke: #9900FF; } </style>
Categories: Software
Vuetify text field border missing
I'm trying to implement Veutify's text field
This is what it looks like for me right now:
And this is what it looks like when the text field is in focus:
These are my imports in main.js
import Vue from 'vue'; import Vuetify from 'vuetify'; Vue.use(Vuetify);Am I missing an import or something?
Categories: Software