Vuejs

I using spark in laravel with vue.js. I add in home.blade.php and I got this error:

Uncaught ReferenceError: Spark is not defined

what I had done:

php artisan spark:install

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>

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>

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>

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

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.

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.

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.

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?

In my /src/store/ folder I have actions.js, index.js, mutations.js and state.js which contain the following info

actions.js

export default {}

index.js

import Vue from 'vue' import Vuex from 'vuex' import state from './state' import actions from './actions' import mutations from './mutations' Vue.use(Vuex) export default new Vuex.Store({ state, actions, mutations })

mutations.js

export default { TOGGLE_LOADING (state) { state.callingAPI = !state.callingAPI }, TOGGLE_SEARCHING (state) { state.searching = (state.searching === '') ? 'loading' : '' }, SET_USER (state, user) { state.user = user }, SET_TOKEN (state, token) { state.token = token } }

and state.js

export default { callingAPI: false, searching: '', serverURI: 'http://10.110.1.136:8080', user: null, token: null, userInfo: { messages: [{1: 'test', 2: 'test'}], notifications: [], tasks: [] } }

Now, when a user logs in, I keep the state in as

this.$store.commit('SET_USER', response.data)

Now, when a user logs out, I run my components/logout.vue file in which it has the following code:

export default { data() {}, created() { localStorage.setItem('vuex', null); this.$store.commit('SET_USER', null); window.localStorage.clear(); window.sessionStorage.clear(); } }

But for some reason, the data is somehow persisted.

I'm using Vue resource to connect to my backend api. I have a form component which I use for both creating a new resource item and modifying existing resource items. The form works fine, but when I want to save the form, it needs to use the proper http method for the api call. If I am creating a new item, it should use the POST method, and if I'm updating an existing item it should use the PUT method. Right now, my form save method looks something like this:

if(this.itemId > 0) { // Update existing item myresource.update({id: this.itemId}, this.item).then(response => { //... }, response => { //... }); } else { // Post new item myresource.save({}, this.item).then(response => { //... }, response => { //... }); }

Basically, I have to use an if statement to check whether to use the update or save resource functions, then the success/fail promises both use the same code. Is there some way to combine the two methods above with something like this:

var method = this.itemId ? 'PUT' : 'POST'; myresource.request(method, {id: this.itemId}, this.item).then(response => { //... }, response => { //... });

The above code obviously doesn't work, but is there a similar way to accomplish this without using an if statement and repeating my success/fail promises for each request type?

I have registered a global component in app.js of Laravel called <unread>. In one of my blade files, I created a new Vue instance to handle a functionality that sits on the same #app element.

The problem is that though global component is rendered in this page but vuex state is different from other blade files. My question is if its possible to get around this problem without making a separate component? And if its even valid to follow this approach.

I was not able to find an explanation or solution on this. Please enlighten me. Heres my code.

In app.js,

Vue.component('unread', require('./components/core/Unread.vue')); import { store } from './store' window.onload = function () { const app = new Vue({ el: '#app', store }); }

In blade file,

@section('scripts') <script type="text/javascript"> window.onload = function() { new Vue({ el: '#app', data: { //data here }, //rest of code }); }; </script>

My Unread.vue file,

<template lang="html"> <a href="#"> <span class="badge" style="background-color:red">4</span> </a> </template> <script> export default { mounted() { console.log('mounted') this.get_unread() }, methods: { get_unread() { this.$http.get('/ajax/get-unread') .then((nots) => { nots.body.forEach( (not) => { this.$store.commit('add_not', not) }) }) } } } </script>

Note: I get the mounted console, but this.get_unread() is not sent to update the vuex state

Uncaught (in promise) TypeError: Cannot read property 'commit' of undefined

following code is from my main.js file. Here I am parsing data from a url using Vue object and it returns some array of data. Now, In the main.js file I have a another GraphChart object and here I need some data from tableData.

How it would be possible? or any other tricks ? Now I am getting nothing.

var tableData = new Vue({ data: { items: '' }, methods: { graphData: function () { var self = this; var testdata= ''; $.get( 'http://localhost:3000/db', function( data ) { self.items = data; }); }, }, created: function() { this.graphData(); }, computed:{ }); new GraphChart('.graph', { stroke: { width: 24, gap: 14 }, animation: { duration: -1, delay: -1 }, // series: needs data from ITEMS object series:items._data.radialChart[1] } )

This is the first time I'm using VueJs, so this might be a very basic thing, but in one of my callbacks I try to set a new value to a value, saved in the "data" component.

But whenever I try to run this method, Vue says my "this" is undefined, so I can't set this new value.

export default { name: 'app', data() { return { collection : {}, } }, mounted: function(){ var event = contract.statuschangedEvent(function(error, result) { if (!error){ this.collection[result.args.id].status = result.args.status } }); ...

The "contract" object is a web3 object, and the syntax should be fine according to this documentation

The error I'm getting is "Uncaught TypeError: Cannot read property '[object Object]' of undefined"

I am working on a vue.js based project, where I will have a SPA for the admin dashboard and an another SPA on the public side. I want to handle the projects separately, but build them in the same time. (or it would be nice to have something like: run build --public OR --admin (to specify which one to build))

I created a config array, and with this setup it creates the output but for some reason it doesn't minifies. With a single configuration it did.

I tried to put the plugins to the configs separately like plugins: [ .. ] but no success.

webpack.config.js:

var path = require('path') var webpack = require('webpack')

module.exports = [ { entry: { public : './resources/js/public-spa/main.js', }, output: { path: path.resolve(__dirname, './public/public-spa/dist/'), filename: '[name].build.js', chunkFilename: "public.[name].chunk.js" }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { 'scss': 'vue-style-loader!css-loader!sass-loader', 'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax' } } }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } } ] }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } }, devServer: { historyApiFallback: true, noInfo: true }, performance: { hints: false }, devtool: '#eval-source-map' }, { entry: { public : './resources/js/admin-spa/main.js', }, output: { path: path.resolve(__dirname, './public/admin-spa/dist/'), filename: '[name].build.js', chunkFilename: "admin.[name].chunk.js" }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { 'scss': 'vue-style-loader!css-loader!sass-loader', 'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax' } } }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } } ] }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } }, devServer: { historyApiFallback: true, noInfo: true }, performance: { hints: false }, devtool: '#eval-source-map' } ]; if (process.env.NODE_ENV === 'production') { module.exports.devtool = '#source-map' // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ sourceMap: false, compress: { warnings: false, }, output: { comments: false, }, }), new webpack.LoaderOptionsPlugin({ minimize: true }), new webpack.optimize.AggressiveMergingPlugin() ]) }

Let's say I have a component which repeats with a v-for loop like so:

<hotel v-for="(hotel, index) in hotels"></hotel>

And my hotels array would look like so:

[ { name: false }, { name: false }, { name: true }, { name: true } ]

How could I perform an action when my v-for loop encounters the property name set to true only on the very first time it encounters this truthy property?

I know I could probably cache a property somewhere and only run something once and not run again if it has been set but this does not feel efficient.

I have this kind of objects in an array:

{ name: 'name1', url: 'http://url-1.tld' }, { name: 'name2', url: 'http://url-2.tld' }

On div click, I want to to a window.location.href to the url, but I can't seem to get the url from the data to my method.

<div v-for="person in persons" v-on:click="select($event)"></div> select: function(event) { window.location.href( ??? ) }

Anybody have suggestions?

I have a fairly simple Vuejs app and am just learning Vuejs. When I add or delete from a data property, I'd like some other function to happen. The code is like this:

data: { pricings: null, }, mounted(){ var somePrice = {"name":"service price", "price":"2.45"} this.pricings.push(somePrice); }, methods:{ callMe: function(){ alert("call me"); } }

I'd like when I add or delete from pricings for some other method (callMe in this case) to be called. I am sure this is possible but am not having luck finding how to do it.

please how can i migrate a dashboard that uses Vuejs in vue-cli like Vuestic inside my laravel project who uses also vuejs but with mix Thanks.

I am trying to update a Google Map automatically after a user enters values in 3 input fields: state, city, address.

I think I have most of the code to make this work but I am using a custom Vue directive that inserts the initial map. This is necessary because there is a v-if on the form that conditionally displays these inputs.

My code is as follows:

<fieldset v-if="activeStep === 1"> <strong><%= f.label :city %></strong><br> <%= f.text_field :city, class: 'form-control', 'v-model': 'city', 'v-bind:readonly': '!byAddress', 'v-on:change': 'updateLocation' %> <strong><%= f.label :state %></strong><br> <%= f.text_field :state, class: 'form-control', 'v-model': 'state', 'v-bind:readonly': '!byAddress', 'v-on:change': 'updateLocation' %> <strong><%= f.label :address %></strong><br> <%= f.text_field :address, class: 'form-control', 'v-model': 'address', 'v-bind:readonly': '!byAddress', 'v-on:change': 'updateLocation' %> <strong>Map</strong><br> <div id="map-container" v-map="setDefaultLocation()"> <div id='location-map'></div> </div> </fieldset>

the style:

#location-map { height: 250px; } #map-container { padding: 15px 0; }

the Vue:

Vue.directive('map', { // When the bound element is inserted into the DOM: inserted: function (el, binding) { var map = new google.maps.Map(document.getElementById('location-map'), { zoom: 15, draggable: false, panControl: false, scrollwheel: false, streetViewControl: false, fullscreenControl: false, center: binding.value, disableDoubleClickZoom: true }); var marker = new google.maps.Marker({ map: map, position: binding.value }); } }) const progress = new Vue({ el: '#listing-multistep', data: { activeStep: 0, city: '', state: '', address: '', lat: undefined, lng: undefined }, methods: { setDefaultLocation: function() { return {lat: 37.7749, lng: 122.4194} }, updateLocation: function() { var geocoder = new google.maps.Geocoder({types: ["geocode"]}); geocoder.geocode({'address': this.address + ', ' + this.city + ', ' + this.state }, function(response, status) { if (status == 'OK'){ marker.setVisible(true); map.setCenter(response[0].geometry.location); marker.setPosition(response[0].geometry.location); this.lat = response[0].geometry.location.lat(); this.lng = response[0].geometry.location.lng(); } else { marker.setVisible(false) this.lat = null; this.lng = null; } }); } } })

The problem is that the map and the marker variables are defined within the context of the Vue.directive but are not accessible from the Vue methods.

I think the code should work if I can somehow modify the map and marker objects stored in Vue.directive.

Can anyone think of a way in which I might make this work?

Thanks in advance!