Software

I am working on a project in .NET with MVC and Vue.js, at the moment of wanting to use the components I have to declare it as follows:

import Vue from 'vue'; import example from './components/example.vue' import equiposcrear from './components/equipos/crear.vue' import equipos from './components/equipos/index.vue' import cargardiesel from './components/equipos/cargarDiesel.vue' const app = new Vue({ el: '#app', components: { example, equiposcrear, equipos, cargardiesel } })

If i registered as Vue.component('equipos', require('./components/equipos/index.vue'));

At the moment i want to use send the error that the component is not registered

@{ ViewBag.Title = "Equipos"; Layout = "~/Views/Shared/_Layout.cshtml"; } <div id="app"> <equipos></equipos> </div>

What am i doing wrong?

I have the following setup for an action:

myAction: ({commit}) => { commit('mutation1'); commit('mutation2'); commit('mutation3'); },

The thing is, I need mutation1 to for sure run first (which it does most of the time) and I need mutation2 to only run if mutation1 succeeds, and so on for mutation3. Since calling a mutation won't return anything, I'm figuring there has to be a better way to do what I'm trying to do. Is there a best practice for calling multiple mutations that depend on the previous mutation to succeed?

I'm using vue in regular js files (not .vue) and inline templates. I got few components that are loaded depend on the subpage. What I wanted to do is to load some global vue variables and vue coponents and then dynamically, using jQuery load additional vue coponents script if some container (eg. #blog) has lenght > 0.

The issue is that Vue is throwing an error that it found the Vue tags but couldn't register the component.

Is there any way of loading dynamically the JS files? I got really big website with a lot of js files that I want to load only on specific subpages. It works perfectly for all jQuery libs but sadly not for Vue components.

Example component below:

Vue.component('blog-entries', { name: "blog-entries", template: require('js/vue/home/blog/blog.html').template, data: function () { return { blog_entries: [ ] } } });

and error:

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in )

load script:

function loadScript(scriptName, callback) { if (!_arr[scriptName]) { _arr[scriptName] = true; var body = document.getElementsByTagName('body')[0]; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = scriptName; // then bind the event to the callback function // there are several events for cross browser compatibility // script.onreadystatechange = callback; script.onload = callback; // fire the loading body.appendChild(script); } else if (callback) { callback(); } };

I am using axios in my Vue project, and one of the calls to my api involves a POST. Both my posts and gets require that the Authorization header be set with my token. All get requests work fine, but putting the exact same headers in axios.post results in a 403.

Here is my axios code:

axios.post('https://my.example.org/myapi/meta?uname=' + uname + '&umetaid=' + post.umeta_id + '&umetavalue=' + post.meta_value, { withCredentials: true, headers: { 'Authorization': 'Bearer ' + mytoken } }) .then(function (response) { console.log(response) }) .catch(function (error) { console.log(error) })

This always results in a 403 error, and checking my request headers show that the Authorization header is never sent. If I change axios.post to axios.get above (and add a GET method to my api code, in addition to the existing POST,OPTIONS), it will execute just fine. I suppose I could leave it this way, but I think it is bad practice to use a GET call when one really is performing a POST. Is there something I am missing about forming a POST request with axios?

Is it possible to subscribe to an individual mutation?

Instead of:

this.$store.subscribe((mutation, state) => { if(mutation === 'someMutation'){ doSomething() } })

I would like something like this:

this.$store.subscribe('someMutation', state => { doSomething() })

Running Laravel Scout + Algolia with Vue. Got it all working and the searching is nice and fast. However I want to hide the results on an empty query instead of displaying the whole index.

Algolia provides this solution:

var search = instantsearch({ [...], searchFunction: function(helper) { var searchResults = $('.search-results'); if (helper.state.query === '') { searchResults.hide(); return; } helper.search(); searchResults.show(); } }

Here is my search:

//search.blade.php <ais-index app-id="{{ config('scout.algolia.id') }}" api-key="{{ env('ALGOLIA_SEARCH') }}" index-name="dev_users"> <ais-search-box placeholder="Zoek een gebruiker" :autofocus="true"></ais-search-box> <ais-results></ais-results> <script> new Vue({ el: "#search", }) </script>

And here is my app.js

import InstantSearch from 'vue-instantsearch'; Vue.use(InstantSearch);

I can't figure out how to implement the code from the Algolia manual. Can you guys point me in the right direction?

Thanks in advance.

I'm trying to build a little simple content management system.

I'm using Vue.js V2 + Google Firebase + Vue Fire + Vue Router.

What I'm failing to understand how should I pass params to the inner view from home view. I want to click on one of the items on homepage, then open inner view for it. What I tried so far is passing the ['.key'] param through vue-router, then reading it in views/inner.vue like this :

let textRef = database.ref('apps/'+ this.$route.params.appid +'/text') firebase: { paragraphs: textRef } <tbody> <tr v-for="paragraph in paragraphs"> <td>{{paragraph.content}}</td> <td>{{paragraph.time}}</td> <td><span class="glyphicon glyphicon-trash iconClick" aria-hidden="true" v-on:click="removeText(paragraph)"></span></td> </tr> </tbody>

but then it creates undefined new item in the Home view.

What am I doing wrong? I'm fairly new to vue.js/firebase.

Here's my code below.

main.js

import Vue from 'vue' import VueFire from 'vuefire' import router from './router' import App from './App' Vue.config.productionTip = false Vue.use(VueFire) /* eslint-disable no-new */ new Vue({ el: '#app', router, template: '<App/>', components: { App } })

App.vue

<template> <div id="app"> <div class="container"> <h1>{{titleMain}}</h1> <router-view></router-view> </div> </div> </template> <script> export default { name: 'app', data () { return { titleMain: 'LiveText v1.0 for lrytas.lt' } } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #2c3e50; margin-top: 60px; } h1 { margin-bottom: 60px; } .iconClick, .appsList { cursor: pointer; } </style>

views/inner.vue

<template> <div> <h2>{{msg}}</h2> <h3>{{$route.params.app['.key']}}</h3> <h5>{{$route.params.app.created}}</h5> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">{{$route.params.app.name}}</h3> </div> <div class="panel-body"> <table class="table table-hover"> <thead> <tr> <th>Paragrafas</th> <th>Laikas</th> <th></th> </tr> </thead> <tbody> <tr v-for="paragraph in paragraphs"> <td>{{paragraph.content}}</td> <td>{{paragraph.time}}</td> <td><span class="glyphicon glyphicon-trash iconClick" aria-hidden="true" v-on:click="removeText(paragraph)"></span></td> </tr> </tbody> </table> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Pridėti paragrafą</h3> </div> <div class="panel-body"> <form id="form" class="form-inline" v-on:submit.prevent="addText"> <div class="form-group"> <label for="appTitle">Pavadinimas:</label> <textarea type="text" id="appTitle" class="form-control" v-model="newParagraph.content"></textarea> <input type="submit" class="btn btn-primary" value="Kurti"> </div> </form> </div> </div> </div> </template> <script> import Firebase from 'firebase' import toastr from 'toastr' let database = Firebase.database() let textRef = database.ref('apps/-KsEMtgKSeVtA9_rSgWD/text') export default { name: 'hello', data () { return { msg: 'Inner page!', newParagraph: { content: '', time: this.getTime() } } }, methods: { addText: function () { textRef.push(this.newParagraph) this.newParagraph.content = '' toastr.success('Paragrafas sėkmingai pridėtas!') }, removeText: function (paragraph) { console.log(paragraph) textRef.child(paragraph['.key']).remove() toastr.success('Paragrafas sėkmingai pašalintas!') }, getTime: function () { var date = new Date() var dateFormated = date.toLocaleDateString('lt') var timeFormated = date.toLocaleTimeString('lt', {hour12: false, hour: '2-digit', minute: '2-digit'}) var current = dateFormated + ' ' + timeFormated return current } }, firebase: { paragraphs: textRef } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } label { display: block; } textarea { display: block; } .btn { display: block; margin-top: 15px; } </style>

views/home.vue

<template> <div> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">{{titleList}}</h3> </div> <div class="panel-body"> <table class="table table-hover"> <thead> <tr> <th>Pavadinimas</th> <th>ID</th> <th>Sukūrta</th> <th></th> </tr> </thead> <tbody> <tr class="appsList" v-for="app in apps" v-on:click="goInner(app)"> <td>{{app.name}}</td> <td>{{app['.key']}}</td> <td>{{app.created}}</td> <td><span class="glyphicon glyphicon-trash iconClick" aria-hidden="true" v-on:click="removeApp(app)"></span></td> </tr> </tbody> </table> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">{{titleAdd}}</h3> </div> <div class="panel-body"> <form id="form" class="form-inline" v-on:submit.prevent="addApp"> <div class="form-group"> <label for="appTitle">Pavadinimas:</label> <input type="text" id="appTitle" class="form-control" v-model="newApp.name"> <input type="submit" class="btn btn-primary" value="Kurti"> </div> </form> </div> </div> </div> </template> <script> import Firebase from 'firebase' import firebaseconfig from '../firebase/config' import toastr from 'toastr' // Firebase Stuff let firebase = Firebase.initializeApp(firebaseconfig) let database = firebase.database() let appRef = database.ref('apps') export default { name: 'home', data () { return { titleMain: 'LiveText v1.0 for lrytas.lt', titleList: 'Aplikacijos', titleAdd: 'Sukurti naują aplikaciją', newApp: { name: '', created: this.getTime() } } }, methods: { getTime: function () { var date = new Date() var dateFormated = date.toLocaleDateString('lt') var timeFormated = date.toLocaleTimeString('lt', {hour12: false, hour: '2-digit', minute: '2-digit'}) var current = dateFormated + ' ' + timeFormated return current }, addApp: function () { appRef.push(this.newApp) this.newApp.name = '' toastr.success('Aplikacija sėkmingai sukurta!') }, removeApp: function (app) { appRef.child(app['.key']).remove() toastr.success('Aplikacija sėkmingai pašalinta!') }, say: function (id) { alert('Your app id is' + id) }, goInner: function (app) { this.$router.push({ name: 'inner', params: { appid: app['.key'], app: app } }) } }, firebase: { apps: appRef } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> label { display: block; } .btn { display: block; margin-top: 15px; width: 100%; } </style>

router/index.js

import Vue from 'vue' import Router from 'vue-router' import Home from '../views/Home' import Inner from '../views/Inner' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'home', component: Home }, { path: '/app/:appid', name: 'inner', component: Inner } ] })

I am working on an image upload using vue.js but can't figure out this odd issue.

In my view:

{{ form.image }}

My data in the vue file:

data: function() { return { form: new SparkForm({ id: null, name: null, image: null }), imagePreview: null } },

And the method called when the file input is changed:

imageChanged: function(e) { var $this = this; let files = e.target.files || e.dataTransfer.file; if (!files.length) { return; } else { $this.form.image = files[0]; console.log($this.form.image); } },

This will console log the files information correctly, but in the view I just get an empty object.

Can't see anything obvious...

It seems that nuxt build does not build at all.

My package.json:

{ "name": "my-app", "description": "nuxt + express", "repository": "https://github.com/xxx.git", "scripts": { "dev": "node server.js", "build": "nuxt build", "start": "cross-env NODE_ENV=production node build/main.js" }, "dependencies": { "axios": "^0.16.2", "cross-env": "^5.0.5", "express": "^4.15.4", "nuxt": "^1.0.0-rc5" }, "license": "MIT" }

I run:

npm run build

I get:

> my-app@ build /var/www/html/nuxt-express-basic > nuxt build nuxt:build Building... +0ms nuxt:build App root: /var/www/html/nuxt-express-basic +0ms nuxt:build Generating /var/www/html/nuxt-express-basic/.nuxt files... +1ms nuxt:build Generating files... +6ms nuxt:build Generating routes... +1ms nuxt:build Building files... +20ms build [====== ] 30%Hash: 5efd1cf979d356684e6b Version: webpack 3.5.5 Time: 2993ms Asset Size Chunks Chunk Names server-bundle.json 265 kB [emitted] Build completed in 14.796s Hash: 26afaacb93db8fb758f5 Version: webpack 3.5.5 Time: 14801ms Asset Size Chunks Chunk Names pages/index.ff1f52e2a9108fcd63b0.js 14.7 kB 0 [emitted] pages/index layouts/default.9c90bfab32add26a98a2.js 322 bytes 1 [emitted] layouts/default common.db2b22db39e453c5d232.js 134 kB 2 [emitted] common app.8d0391f3c1da4ba9a797.js 20.4 kB 3 [emitted] app manifest.26afaacb93db8fb758f5.js 1.59 kB 4 [emitted] manifest LICENSES 138 bytes [emitted] + 8 hidden assets nuxt:build Building done +15s

But I don't see any build dir in my root dir.

Any ideas?

I am a bit stuck at the moment trying to figure out how to active the current clicked element inside a loop. Basically I just want to change some CSS to that item, for example opacity, and know where I actually clicking inside the loop (this one I can handle with onclick I think).

So basically I tried this:

<div class="panel panel-default"> <ul class="list-group"> <li :style="panel.color" v-for="(panel,key,index)in getPanels" :class="{active: panel === activeItem}" class="list-group-item" > A section {{panel.section}} was {{panel.action}} </li> </ul> </div> data() { return { activeItem: null } }, .active { opacity: 0.7; }

The active class is not getting applied to the specific clicked item. What is wrong – can anyone help?

This is my first time using VueJS. I am trying to build a page which displays data on the right and has several controls (checkboxes, drop downs, input text) on the left. The data on the right will be filtered when the controls on the left are selected/entered.

I'm trying to prepare a small demo for this on JSBin with dummy data: http://jsbin.com/qujaraf/edit?html,js,console,output

I have some data and I have two watchers codesearch and typesearch.

Questions

1. I would like the list to be filtered when I type stuff in them.
2. How can I make it so that when data is entered in both watchers then the filter takes both inputs in account. For example, in this demo, if user enters actor in type and three in code then only one list item should show.

I want to one-way bind the value of a set of radio buttons to my model and update the vuex store on change. Unfortunately this does not seem to be documented anywhere. Any help will be appreciated.

Two-way binding works as documented:

<input type="radio" name="info-source" value="1" id="info-source-1" v-model="infoSource"> <label for="info-source-1">TV</label> <input type="radio" name="info-source" value="2" id="info-source-2" v-model="infoSource"> <label for="info-source-2">Social media</label>

However vuex starts complaining in this case Do not mutate vuex store state outside mutation handlers

Hello I want to pass data from input (I added only necessary code) :

<input id="txtName" v-on:keyup.enter="addMessage(/* THIS FIELD VALUE */)" type="text">

to method:

` ...

methods: {

addMessage(name){ //stuff },

...

`

I tryed to use as parameter this or this.value but it is no reacting.

I guess its very easy,but unfortunately I get stuck with this..

How should I solve this?

In this article, it is said:

While it’s generally poor practice, you can use Axios directly in your components to fetch data from a method, lifecycle hook, or whenever.

I am wondering why? I usually use lifecycle hooks a lot to fetch data (especially from created()). Where should we write the request calls?

I use a an WYSIWYG article editor that generates some HTML for articles that I save in the database and later show to the user.

The problem is I need to insert Vue components into this auto generated HTML for showing dynamic products. I can make a custom block in the editor that adds in HTML but I want it to work as a Vue component that updates the product description directly from the database.

What Im thinking now is to add a button that adds a div with a data property of the products ID. I can then replace that div in the code with a Vue component with the same ID by injecting a component.

Another idea I had was to simply add in components like <product id="1031"/> as plain html and then try to compile the whole article HTML with Vue but I read that the v-html directive only compile code as plain HTML.

Is this possible? Or is there any better ideas?

Just like in title: What is the proper way to integrate SEO stuff like Facebook OpenGraph tags in apps that use rails backend API (installed with webpacker) with a framework like Vue?

This is how part of my config/routes.rb looks like:

namespace :api, defaults: { format: :json } do namespace :v1 do resources :posts, only: [:index, :show] end end get '/', to: 'front#index', format: false get '/*path', to: 'front#index', format: false

For now app is designed in the way, where all requests on front-end part are handled by vue-router.

My layouts/application.html looks almost, like on the attached snippet:

<html> <head> <%= javascript_pack_tag 'front' %> <%= stylesheet_pack_tag 'front' %> </head> <body> <div id="app"> <%= yield %> </div> </body> </html>

My question is, what is the proper way to manage stuff like Facebook Open Graph when there is no straight forward access to <head> section?

I can't use fairly default rails stuff like content_for because everything happens inside script.

Or maybe am I wrong? Missing something fancy, important here?

It would be grateful to get any advice, thanks.

I am coding a simple context menu in vue.js. When I do a right click on a peculiar element, it opens the menu (using @contextmenu.prevent).This works.

But when I click outside of the menu I want it to disappear. This doesn't work... I am using v-on:blur for this, also tried @blur . None of them doesn't work. Here is my html :

<!-- my context menu --> <ul class="context-menu" ref="contextMenuTrack" v-if="openedMenu === 'contextMenuTrack'" v-bind:style="{top: top, left: left}" v-on:blur="closeMenu()"> <li v-on:click="removeTrack(project.structure.tracks.indexOf(targetOfMenu));closeMenu()">delete track</li> </ul> <div> [ ...... stuff here ......] <!-- Where the menu is called--> <li class="track" v-for="track in project.structure.tracks"> <div class="track-name-row"> <li @contextmenu.prevent="openContextMenuTrack(track,$event)" v-on:click="expandTrack(project.structure.tracks.indexOf(track))" class="track-color-viewer"></li> [ .... other li tags .....] </div> </li> [ ...... stuff here ......] </div>

Here is the datas used for the menu of my Vue component:

data() { return { //the kind of menu which is opened openedMenu: undefined, //the coordinate of the menu top: "0px", left: "0px", //the element which is targeted by the menu targetOfMenu: undefined }; },

And here are the methods used for the menu in my Vue.js component :

methods: { setMenu(top, left) { this.top = top - 170 + "px"; this.left = left + "px"; }, // opening menu : calling set menu whith x and y openContextMenuTrack(track, event) { this.openedMenu = "contextMenuTrack"; this.targetOfMenu = track; this.$nextTick((() => { this.$refs.contextMenuTrack.focus(); this.setMenu(event.y, event.x); }).bind(this)); }, closeMenu() { this.openedMenu = undefined; this.targetOfMenu = undefined; } }

This is how json response looks like [[61,57,34],[1,1,3]] I want to use the first array for labels and the second for data.

If I set labels and data inside app manually it works though.

eg labels: ["q", "w", "e"] data: [1, 5, 10]

Vue.component('chart', { props: ['labels', 'data', 'type'], template: ` <canvas style="width: 512px; height: 256px"></canvas> `, mounted: function () { new Chart(this.$el, { type: this.type, data: { labels: this.labels, datasets: [{ label: '# of Votes', data: this.data, borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero:true } }] } } }) } }); new Vue({ el: '#app', data: { message: "test", labels: [], data: [] }, methods: { fetchData: function() { this.$http.get('/admin/fetch_data').then(res => { this.labels = res.body[0]; this.data = res.body[1]; }) } }, beforeMount() { this.fetchData() } });

component on page

<div id="app"> {{message}} <chart :labels="labels" :data="data" type="bar"></chart> </div>

The data seems to be loaded but there're no chart bars on page.

Within vue.js empty project created with vue CLI I have a script build/dev-server.js that starts the app.

Its first line is require('./check-versions')() which blocks my system for couple of minutes. I identified that this part blocks it:

function exec (cmd) { return require('child_process').execSync(cmd).toString().trim() }

and in this case cmd argument is npm --version. execSync seems to be a problem here which invokes var result = spawn_sync.spawn(options); from child_process.js with the following options:

length:5 __proto__:Array(0) [, …] 0:"C:\Windows\system32\cmd.exe" 1:"/d" 2:"/s" 3:"/c" 4:""npm --version"" envPairs:Array(63) ["ALLUSERSPROFILE=C:\ProgramData", "APPDATA=C:\Users\mmilic\AppData\Roaming", "ChocolateyInstall=C:\ProgramData\chocolatey", …] file:"C:\Windows\system32\cmd.exe" killSignal:undefined shell:true stdio:Array(3) [Object, Object, Object] windowsVerbatimArguments:true

Invoking npm --version on command line returns ASAP. Also, on one computer switching from corporate to wireless network connection resolves the problem.

Any ideas ?

I am making a simple SPA application in vue.js and I use some jQuery methods. Problem is, I can't use vue's methods inside of jQuery statement. For example: I implemented easyAutocomplete pack for auto completing my input field and need 4 events:

• v-on:click="addReceiver"(on button 'add') - done
• v-on:enter="addReceiver" (on input field) - done
• click on list item - done
• enter on list item - done

For now my code (without unnecessary things) looks like this:

export default { data() { return { contacts: [], receivers: [] } }, mounted() { this.fetchMessages(); }, methods: { fetchMessages() { axios.get('api/messages').then(response => { this.contacts = response.data.contacts; var options = { data: this.contacts, getValue: "name", list: { match: { enabled: true }, onClickEvent: function() { var name = $("#to").getSelectedItemData().name; $("#list_of_receivers").append("<tr><td>"+name+"</td></tr>"); //this.receivers.push(name); CANT DO THAT ALSO!!! }, onKeyEnterEvent: function() { var name = $("#to").getSelectedItemData().name; $("#list_of_receivers").append("<tr><td>"+name+"</td></tr>"); } } }; $("#to").easyAutocomplete(options); }); }, addReceiver(){ var name = $("#to").val(); $("#list_of_receivers").append("<tr><td>"+name+"</td></tr>"); } } }

As you can see I need to duplicate my code in many places, because I cant use function addReceiver() inside for example onClickEvent: jquery list function.

Thank you for any help!