Software

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?

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

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??

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"

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:

1. If the "Show all tasks" is unchecked, hide the task.
2. 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?

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?

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.

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>

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:1

I 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?

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.

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?

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>

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?

I currently have an object similar to the following in a Vue.js app that I'm trying to port over to TypeScript. Note this object's structure is dictated by the Vuex library:

const getters = { allUsers(state) { return state.users; }, firstUser(_state, getters) { return getters.allUsers()[0] } }

How can I provide the appropriate type for getters here in firstUser?

const getters = { allUsers(state: State) { return state.users; }, firstUser(_state: State, getters: typeof getters) { return getters.allUsers()[0] } }

Currently I get the following error:

[ts] 'getters' is referenced directly or indirectly in its own type annotation.

My app has an array in the vuex store. I am iterating over it with v-for to build a table. When I add or delete an item, I use push or splice on the array in the vuex store. An item appears or disappears from the table, but sometimes one of the items has values of one of the other items instead of the correct values. When I inspect the vuex store with the chrome dev tools, it always has the right values. When I navigate away and back, the table then has the right values. Is there something I’m missing? I found this when I was googling: https://vuejs.org/v2/guide/list.html#Array-Change-Detection, but it’s not really clear what I’m supposed to do with that info.

Today, we are announcing the Mozilla Information Trust Initiative (MITI)—a comprehensive effort to keep the Internet credible and healthy. Mozilla is developing products, research, and communities to battle information pollution and so-called ‘fake news’ online. And we’re seeking partners and allies to help us do so.

Here’s why.

Imagine this: Two news articles are shared simultaneously online.

The first is a deeply reported and thoroughly fact checked story from a credible news-gathering organization. Perhaps Le Monde, the Wall Street Journal, or Süddeutsche Zeitung.

The second is a false or misleading story. But the article is designed to mimic content from a credible newsroom, from its headline to its dissemination.

How do the two articles fare?

The first article—designed to inform—receives limited attention. The second article—designed for virality—accumulates shares. It exploits cognitive bias, belief echos, and algorithmic filter bubbles. It percolates across the Internet, spreading misinformation.

This isn’t a hypothetical scenario—it’s happening now in the U.S., in the U.K., in France, in Germany, and beyond. The Pope did not endorse a U.S. presidential candidate, nor does India’s 2000-rupee note contain a tracking device. But fabricated content, misleading headlines, and false context convinced millions of Internet users otherwise.

The impact of misinformation on our society is one of the most divisive, fraught, and important topics of our day. Misinformation depletes transparency and sows discord, erodes participation and trust, and saps the web’s public benefit. In short: it makes the Internet less healthy. As a result, the Internet’s ability to power democratic society suffers greatly.

This is why we’re launching MITI. We’re investing in people, programs, and projects that disrupt misinformation online.

Why Mozilla? The spread of misinformation violates nearly every tenet of the Mozilla Manifesto, our guiding doctrine. Mozilla has a long history of putting community and principles first, and devoting resources to urgent issues—our Firefox browser is just one example. Mozilla is committed to building tolerance rather than hate, and building technology that can protect individuals and the web.

So we’re drawing on the unique depth and breadth of the Mozilla Network—from journalists and technologists to policymakers and scientists—to build functional products, research, and community-based solutions.

Misinformation is a complex problem with roots in technology, cognitive science, economics, and literacy. And so the Mozilla Information Trust Initiative will focus on four areas:

Product

Mozilla’s Open Innovation team will work with like-minded technologists and artists to develop technology that combats misinformation.

Mozilla will partner with global media organizations to do this, and also double down on our existing product work in the space, like Pocket, Focus, and Coral. Coral is a Mozilla project that builds open-source tools to make digital journalism more inclusive and more engaging.

Literacy

We can’t solve misinformation with technology alone—we also need to educate and empower Internet users, as well as those leading innovative literacy initiatives.

Mozilla will develop a web literacy curriculum that addresses misinformation, and will continue investing in existing projects like the Mission: Information teaching kit.

Research

Misinformation in the digital age is a relatively new phenomenon. To solve such a thorny problem, we first need to fully understand it.

Later this year, Mozilla will be releasing original research on how misinformation impacts users’ experiences online. We will be drawing on a dataset of user-level browsing data gathered during the 2016 U.S. elections.

Creative interventions

Mozilla will field and fund pitches from technologists who are combatting misinformation using various mediums, including virtual reality and augmented reality. It’s an opportunity to apply emerging technology to one of today’s most pressing issues.

Imagine: an augmented reality web app that uses data visualization to investigate misinformation’s impact on Internet health. Or, a virtual reality experience that takes users through the history of misinformation online.

Mozilla will also support key events in this space, like Media Party Argentina, the Computation+Journalism Symposium, the Online News Association, the 22×20 summit, and a MisinfoCon in London as part of MozFest. (To learn more about MozFest — Mozilla’s annual, flagship event devoted to Internet health — visit mozillafestival.org.)

We’re hoping to hear from and work with partners who share our vision. Please reach out to Phillip Smith, Mozilla’s Senior Fellow on Media, Misinformation & Trust, at miti@mozilla.com to get involved.

More than ever, we need a network of people and organizations devoted to understanding, and combatting, misinformation online. The health of the Internet — and our societies — depends on it.

The post The Mozilla Information Trust Initiative: Building a movement to fight misinformation online appeared first on The Mozilla Blog.

I use axios to make post request

import axios from 'axios' params = {'HTTP_CONTENT_LANGUAGE': self.language} headers = {'header1': value} axios.post(url, params, headers)

is it coorect?

or axios.post(url, params: params, headers: headers) is correct?

The issue I currently run into is that I have a form component that displays both the login form and the register form. It is as follows:

<template> ... <login-form v-show="isVisible.login" v-on:submit.prevent="handleLoginFormSubmit()"></login-form> <register-form v-show="! isVisible.login" v-on:submit.prevent="handleRegisterFormSubmit()"></register-form> ... </template> <script> import LoginForm from './LoginForm.vue'; import RegisterForm from './RegisterForm.vue'; export default { data() { return { isVisible: { login: true } } }, components: { 'login-form': LoginForm, 'register-form': RegisterForm, }, methods: { handleLoginFormSubmit() { }, handleRegisterFormSubmit() { } } } </script> <style> </style>

The error I receive looks like this:

[Vue warn]: Property or method "isVisible" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

found in

---> <LoginForm> at /Users/chrisbreuer/code/ordering/resources/assets/app/js/components/LoginForm.vue [Vue warn]: Error in render function: "TypeError: Cannot read property 'login' of undefined" found in ---> <LoginForm> at /Users/chrisbreuer/code/ordering/resources/assets/app/js/components/LoginForm.vue

How do I correctly register a component within a component?

I created a root node and two components, on root node i have a text field to search, which is sended dinamicaly to each component to search in an array and that they are rendered, additionally a each component is send a reference function for indicate if array is empty. But, when i enter text in input field of console show this message:

[Vue warn]: You may have an infinite update loop in a component render function.

found in

--->

My code:

var links =[...]; var links2 =[...]; var template = ` <section class="section has-text-centered" v-if="searchBy.length > 0"> <section class="container"> <p class="subtitle has-text-dark">{{subtitle}}</p> <section class="columns is-multiline "> <section class="column column-fixed" v-for="link in searchBy"> <a v-bind:href="link.url" onclick="window.open(this.href); return false;"> <strong> {{link.title}} </strong> <figure class="image is-96x96"> <img class="" v-bind:src="link.img"> </figure> </a> </section> </section> <hr> </section> </section> ` Vue.component('links',{ props:['links','subtitle', 'search'], template:template, computed:{ searchBy:function(){ if(this.search !==''){ var _links = this.links.filter((link)=>{ return link.title.toLowerCase().search(this.search.toLowerCase()) == 0 }) console.log('_links: ', _links); (_links.length > 0)? this.$emit('empty',false):this.$emit('empty',true); return _links; } return this.links; } } }) new Vue({ el:"#links", data:{ brand:"Enlaces", title:"Acceso Rápido", subtitle_private:"Guardián del ALBA - PDVSA", subtitle_public:"Públicos", links:links, links2:links2, search:'', thereAreLinks:0 }, methods:{ linksEmpty(status){ console.log('hay resultados: ', status); (status)?this.thereAreLinks++:this.thereAreLinks--; } } })

html container:

<div class="container"> <links :links="links" :subtitle="subtitle_private" :search="search" @empty="linksEmpty"></links> <links :links="links2" :subtitle="subtitle_public" :search="search" @empty="linksEmpty"></links> <h2 class="title has-text-centered" v-if="thereAreLinks > 1"> No results: <span class="has-text-danger">{{search}}!</span> </h2> </div>

Some idea?

I am using VueJS and the $http package to do API calls to my website. However, it seems that on Google Chrome 60.0.3112.90, the data property of the Response object no longer parses the received JSON and instead passes back a string.

Is this a bug in Google Chrome? The site was working fine yesterday and with no changes, no ajax call works today. I can only assume its the new version of Chrome as the latest FireFox works just fine.

Anyone else experienced this?