Software

I am working on a Single Page Application using VueJS and vuerouter.

My App.vue looks like:

<template> <div id="app"> <header><topbar></topbar></header> <div class="wrapper"> <main><router-view></router-view></main> <nav><sidebar></sidebar></nav> </div> <footer>footer</footer> </div> </template>

I would like to achieve the following behaviour:

• The sidebar menu displays static main categories the user can navigate to
• The topper menu depends on the main sidebar menu and must displays sub-categories related to the main categories.

My first thought is that I can share a common state with vuex. Clicking on a main category on the sidebar would trigger a new CURRENT_STATE that would be read by the top bar. Then there would be a sort of conditional rendering based on the CURRENT_STATE.

But I am pretty sure there is a nicer/cleaner way to achieve this.

Has anyone already encountered this issue ? Any idea is welcomed :) Thanks !

Using electron-vue for a rather simple project, I am trying to include images the user selected. They are copied to an AppData folder and then added using a simple <img> element:

<img src="path/to/file/in/appdata" alt="..." />

However, I receive an error saying: "Not allowed to load local resource." The corresponding path is correct. Due to the purpose of my app, it is not possible to ship the image with the static assets. In another Electron app, this approach worked fine. Any suggestions? Thanks in advance!

I am trying to download a file from ASP.Net Web API. I create a memory stream that has the content of the file, after that I assign the memory stream to the response like this:

var stream = new MemoryStream(); if(document.documentSelection == "Test Case Specification") { stream = testSpecificationDoc(document); } HttpResponseMessage result = new HttpResponseMessage(HttpStatusCode.OK); result.Content = new StreamContent(stream); result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream"); return result;

As a result, I get this:

Response {url: "http://localhost:16339/api/Document/Create", ok: true, status: 200, statusText: "OK", headers: Headers…} body:"" bodyText:"" headers:Headers ok:true status:200 statusText:"OK" url:"http://localhost:16339/api/Document/Create" data:(...) __proto__:Object

full code:

public HttpResponseMessage Create([FromBody]AppDocument document) { if (!ModelState.IsValid) { //return BadRequest(ModelState); } var stream = new MemoryStream(); if(document.documentSelection == "Test Case Specification") { stream = testSpecificationDoc(document); } HttpResponseMessage result = new HttpResponseMessage(HttpStatusCode.OK); result.Content = new StreamContent(stream); result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream"); return result; } private MemoryStream testSpecificationDoc(AppDocument document) { String disclaimerTxt = "The contents of this document are under copyright of Critical Manufacturing S.A. it is released on condition that it shall not be copied in whole, in part or otherwise reproduced (whether by photographic, or any other method) and the contents therefore shall not be divulged to any person other than that of the addressee (save to other authorized offices of his organization having need to know such contents, for the purpose for which disclosure is made) without prior written consent of submitting company."; String date = "DD Month YYYY"; // document permission title DocRun accessTypeTitle = new DocRun(); Run permissionTitle = accessTypeTitle.createParagraph("DOCUMENT ACCESS", PARAGRAPHCOLOR,SMALLFONTSIZE,DEFAULTFONT); // document permission (ex: public, internal use only), defined on template side DocRun accessTypePermission = new DocRun(); Run permission = accessTypePermission.createParagraph(document.documentAccess, PARAGRAPHTITLECOLOR, SMALLFONTSIZE, DEFAULTFONT); DocRun disclaimerTitle = new DocRun(); Run disclaimerTitleTxt = disclaimerTitle.createParagraph("DISCLAIMER", PARAGRAPHCOLOR, SMALLFONTSIZE, DEFAULTFONT); DocRun disclaimerDescription = new DocRun(); Run disclaimerDescriptionTxt = disclaimerDescription.createParagraph(disclaimerTxt, PARAGRAPHTITLECOLOR, SMALLFONTSIZE, DEFAULTFONT); DocRun documentType = new DocRun(); Run documentTypeTxt = disclaimerDescription.createParagraph(document.documentSelection, TITLECOLOR, DOCTITLE, FONTTYPETITLE); DocRun projectNameTitle = new DocRun(); Run projectNameTxt = disclaimerDescription.createParagraph(document.projectName, SUBTITLECOLOR, FONTSIZESUBTITLE,FONTTYPE); DocRun dateParagraph = new DocRun(); Run dateTxt = disclaimerDescription.createParagraph(date, PARAGRAPHTITLECOLOR, DATEFONTSIZE, DEFAULTFONT); /*Doc simpleDoc = new Doc(); simpleDoc.CreateDoc(dateTxt, projectNameTxt);*/ var stream = new MemoryStream(); using (WordprocessingDocument doc = WordprocessingDocument.Create(stream, WordprocessingDocumentType.Document, true)) { MainDocumentPart mainPart = doc.AddMainDocumentPart(); String clientLogoPath = getCustomerLogo(document.projectName); PageMargin pageMargins = new PageMargin(); pageMargins.Left = MathOpenXml.convertUInt32ValueToDxa(DEFAULTLEFTMARGIN); pageMargins.Right = MathOpenXml.convertUInt32ValueToDxa(DEFAULTRIGHTMARGIN); pageMargins.Bottom = MathOpenXml.convertInt32ValueToDxa(DEFAULTBOTTOMMARGIN); pageMargins.Top = MathOpenXml.convertInt32ValueToDxa(DEFAULTTOPTMARGIN); //Important needed to access properties (sections) to set values for all elements. SectionProperties sectionProps = new SectionProperties(); sectionProps.Append(pageMargins); // Logo company construction DocImage companyLogo = new DocImage(); Run imageLogo = companyLogo.imageCreator(mainPart,COMPANYLOGOPATH,COMPANYIMAGENAME,COMPANYLOGOWIDTH,COMPANYLOGOHEIGHT,COMPANYIMAGEALING,null,null,"Square"); DocImage titleShape = new DocImage(); Run imageShape = titleShape.imageCreator(mainPart, SHAPEIMAGEPATH, TITLESHAPEIMAGENAME, TITLESHAPEWIDTH, TITLESHAPEHEIGHT, SHAPEIMAGEALING,null,0.24,"Behind Text"); DocImage clientImage = new DocImage(); Run clientLogo = clientImage.imageCreatorUrl(mainPart, SHAPEIMAGEPATH, TITLESHAPEIMAGENAME, TITLESHAPEWIDTHCLIENTLOGO, TITLESHAPEHEIGHTCLIENTLOGO, CLIENTIMAGEALIGN,clientLogoPath,1.1,null, "Top and bottom"); new Document(new Body()).Save(mainPart); Body body = mainPart.Document.Body; body.Append(sectionProps); body.Append(new Paragraph(new ParagraphProperties(new Indentation() { Start = MathOpenXml.convertUInt32ValueToDxa(DEFAULTLEFTIDENT).ToString() }), new Run(imageLogo))); body.Append(new Paragraph( new Run( new Run(new Break())))); body.Append(new Paragraph( new Run( new Run(new Break())))); body.Append(new Paragraph( new Run( new Run(new Break())))); body.Append(new Paragraph( new Run( new Run(new Break())))); body.Append(new Paragraph( new Run(imageShape))); body.Append(new Paragraph(new ParagraphProperties(new Indentation() { Start = MathOpenXml.convertUInt32ValueToDxa(DEFAULTLEFTIDENT).ToString() }), new Run(documentTypeTxt))); body.Append(new Paragraph( new Run( new Run(new Break())))); body.Append(new Paragraph(new ParagraphProperties(new Indentation() { Start = MathOpenXml.convertUInt32ValueToDxa(DEFAULTLEFTIDENT).ToString() }), new Run(projectNameTxt))); body.Append(new Paragraph(new ParagraphProperties(new Indentation() { Start = MathOpenXml.convertUInt32ValueToDxa(DEFAULTLEFTIDENT).ToString() }), new Run(dateTxt))); body.Append(new Paragraph( new Run( new Run(new Break())))); body.Append(new Paragraph( new Run( new Run(new Break())))); body.Append(new Paragraph(new ParagraphProperties(new Indentation() { Start = MathOpenXml.convertUInt32ValueToDxa(DEFAULTLEFTIDENT).ToString() }), new Run(clientLogo))); body.Append(new Paragraph( new Run( new Run(new Break())))); body.Append(new Paragraph(new ParagraphProperties(new Indentation() { Start = MathOpenXml.convertUInt32ValueToDxa(DEFAULTLEFTIDENT).ToString() }, new SpacingBetweenLines() { Line = "350", LineRule = LineSpacingRuleValues.Auto, Before = "0", After = "0" }))); body.Append(new Paragraph(new ParagraphProperties(new Indentation() { Start = MathOpenXml.convertUInt32ValueToDxa(DEFAULTLEFTIDENT).ToString() }, new SpacingBetweenLines() { Line = "350", LineRule = LineSpacingRuleValues.Auto, Before = "0", After = "0" }), new Run(permissionTitle))); body.Append(new Paragraph(new ParagraphProperties(new Indentation() { Start = MathOpenXml.convertUInt32ValueToDxa(DEFAULTLEFTIDENT).ToString() }, new SpacingBetweenLines() { Line = "700", LineRule = LineSpacingRuleValues.Auto, Before = "0", After = "0" }), new Run(permission))); body.Append(new Paragraph(new ParagraphProperties(new Indentation() { Start = MathOpenXml.convertUInt32ValueToDxa(DEFAULTLEFTIDENT).ToString() }, new SpacingBetweenLines() { Line = "350", LineRule = LineSpacingRuleValues.Auto, Before = "0", After = "0" }), new Run(disclaimerTitleTxt))); body.Append(new Paragraph(new ParagraphProperties(new Indentation() { Start = MathOpenXml.convertUInt32ValueToDxa(DEFAULTLEFTIDENT).ToString() }), new Run(disclaimerDescriptionTxt))); mainPart.Document.Save(); } stream.Seek(0, SeekOrigin.Begin); Directory.CreateDirectory(HostingEnvironment.MapPath(DOCUMENTSLOCATION)); System.IO.File.WriteAllBytes(HostingEnvironment.MapPath("~/Files/test5.docx"), stream.ToArray()); return stream; }

Now, I need to put a download option, client side. How can I do that?
Am I doing it right with ASP.Net Web Api?

These two routes /teams/:team_id/members and /teams/:team_id/settings have beforeUpdate guards defined for those sub-routes

/ (beforeUpdate) └─ teams/:team_id (beforeUpdate) ├─ members (beforeUpdate) └─ settings (beforeUpdate)

I'm fetching data from the AP and refreshing my JS data model in the beforeUpdate guards.

I have two issues with this:

1. When I load the page with the URL /teams/1/members the beforeUpdate of his parents are called. However if I'm going to that URL later through navigation only the members beforeUpdate will be called, not the parent ones.

2. Going through a router-link from /teams/1/members to /teams/2/members does not trigger a beforeUpdate call at all.

What would be the best way to solve those two issues ? Thanks !

I've got a modal component that looks like this

//modal component <template> <slot></slot> <slot name='buttons'></slot> </template>

I want to use it as a wizard

//wizard component <template> <modal> <step1-state v-if='step === 1'/> <step2-state v-if='step === 2'/> </modal> </template>

Is there a way that step1,step2,etc consume buttons slot?

This does not seem to work

//step1-state component <template> <div> <span>Does it work?</span> <div slot='buttons'> <button>yes</button> <button>no</button> </div> </div> </template>

Hy i am using vue to create chat application and using pusher as service provider

This is my app.js file

require('./bootstrap'); window.Vue = require('vue'); Vue.component('chatcomposer', require('./components/ChatComposer.vue')); Vue.component('chatmessage', require('./components/ChatMessage.vue')); Vue.component('mychatlog', require('./components/ChatLog.vue')); const app = new Vue({ el: '#app', data:{ messages:[], usersInRoom:[] }, methods:{ sendMessage(message){ var contact_id = document.getElementById('chat_name').dataset.contactid; axios.post('/messages',{contactid:contact_id,mesage:message.message}).then(response=>{ }); this.messages.push(message); }, addChatWindow(){ var a = this.$addChild()({},chatComposer); a.$mount(); } }

});

This is my Html view in which i am using the views

<div class="row form-group"> <div class="col-xs-12 col-md-offset-2 col-md-8 col-lg-8 col-lg-offset-2"> <div id="messageBox" class="panel panel-primary"> <div class="panel-heading"> <span class="glyphicon glyphicon-comment" ></span><span id="chat_name" data-contactid =""> </span> <div class="btn-group pull-right"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="color: #fff">&times;</button> </div> </div> <mychatlog :messages="messages" ></mychatlog> <chatcomposer v-on:messagesent="sendMessage" ></chatcomposer> </div> </div> </div>

Here is my ChatLog.vue file

<template> <div class='chat-log'> <center> <input type='button' value='Load previous messages' @click='getMessages()'></center> <chatmessage transition="fade" transition-mode="out-in" v-for="message in allMessages" :message="message"></chatmessage> </div> </template> <script> export default { props :['messages'], data(){ return{ allMessages:this.messages } }, methods:{ getMessages(){ var contact_id =document.getElementById('chat_name').dataset.contactid; axios.get('/messages/'+contact_id).then(response=>{ this.allMessages = response.data; }); } }, updated(){ var _this=this; var contactId = document.getElementById('chat_name').dataset.contactid; alert(contactId); window.Echo.private('inbox.'+ contactId) .listen('.App.Events.inboxed',function(e){ console.log(e.message); _this.messages.push({ message:e.message.message, user: e.user.username },); }); } } </script>

Here is my ChatMessage.vue file

<template>

<ul class="chat "> <li class="right clearfix"><span class="chat-img pull-right chatimagerisizer"> <img src="img/download.jpg" alt="User Avatar" class="img-circle chatimagerisizer" /> </span> <div class="chat-body clearfix "> <div class="header"> <br> <small class=" text-muted"><span class="glyphicon glyphicon-time"></span>15 mins ago</small> <strong class="pull-right primary-font">{{ message.message }}</strong> </div> </div> </li> </ul>

export default { props:['message'] }

What i want to achieve

• Create seprate chat window for each contact dynamically to listene seprately for each chat.

I am sick of it need help.................

I followed this guide: https://laravel.com/docs/5.4/passport and i successed create secret keys. However, when i login as other users, i can see the keys that i created from admin accounts. i.e:

admin: personal key string is also "ABCDE"
user A : personal key string is also "ABCDE"
user B: personal key string is also "ABCDE"

It looks like the "ABCDE" is global? Any clues why i get this error?

I have a JSON array in which I can dynamically add a simple property to its objects (visible:false) with Vue.set, like this :

this.$set(object,'visible',false);

If an object of the array needs to be visible (which the case most of the time), it just doesn't have this property. I did this because my JSON array can be REALLY big and I didn't want to have this "useless" property.

My question is : is it a good practice according to Vue.js ? I saw in the documentation that Vue.set is kind of a hack for setting properties. Does this hack influence reactivity of Vue?

In my Vuejs(2.x version), I came across as following:

Vue.component('service',{ template: '<div>' + '<div>{{serviceData.serviceName}}</div>' + '<input v-model="serviceData.serviceName">' + '</div>', props: ['serviceData'], }) var demo = new Vue({ el: '#demo', data: { allData: { serviceName: 'Service1', serviceType: '0', otherInfo: 'xxxinfo', }, }, computed: { serviceData() { return { serviceName: this.allData.serviceName, serviceType: this.allData.serviceType, }; }, }, }) <div id="demo"> <service :service-data="serviceData"></service> </div>

as above, in my Vue instance I have the original data of alldata, which is an object type. And since it contains some other non-related information. I created an object by computed which only contains related information and name it as serviceData.

And pass the serviceData object to the component service via props.
In the service component, I have an input element which two way bind to serviceData.serviceName with v-model.

But it turns out the two way binding can't work correctly.

So how to add reactivity in this case.

Please refer to this live demo:

https://jsfiddle.net/baoqger/t3mr9de3/1/

there. I am trying to add stripe checkout form through VUE Js template.

<form action="/your-server-side-code" method="POST"> <script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key="pk_test_api_key" data-amount="2000" data-name="1234CPM" data-description="2 widgets" data-image="https://stripe.com/img/documentation/checkout/marketplace.png" data-locale="auto"> </script>

But whenever I try to include this form element through vue template, it gives error stating "- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed. ".

It would be very helpful if I could get a way to solve this. Any suggestion would be great. Thank you in advance.

I'm trying to reuse a method within another of my vue js methods like this :-

sendCode: function () { this.showSection("SENDING"); $.ajax({ url: "someurl" + app.searchResponse.Id, type: "POST", contentType: "application/json", success: function (result) { if (result.Success) { this.showSection("SMS SENT"); } else { this.showSection("SMS FAILED"); } }, error: function (error) { console.log(error); this.showSection("SMS FAILED"); } }); }, showSection: function (section) { return app.ui.currentSection = section; }

But i get caught Type Error stating this.showSection() is not a function.

I have a problem with bootatrap when im using vuejs in laravel 5.4 with phpstorm. Bootstrap styles from sass arent working in example on laravel 5.4 with vuejs on starting.

Firstly had a problem with dev in vue. I installed nodejs and ruby. But still Has no bootstrap in there. Anyone got same issue?

I would like to save the latest index inside a v-for, but I don't know how to include this logic inside the template?

Basically, I have this:

<div v-for="(reply, index) in replies" :key="reply.id">

I want to include this logic inside the template somehow:

this.last_index = index

I just want to know the amount of total replies in that v-for loop.

Thank you!

I'm working in a Vue.js and I have :

<span v-if="!change[product.id]['name']" v-on:click="show(product.id, 'name')" style="cursor:pointer"> {{{ product.name }}} </span> <span v-if="change[product.id]['name']"> okays </span>

I initialise my 'change' with that :

this.$set('products', response.data.products) self.productsLoading=false let array = [] array['name'] = false for (let i = 0; i < response.data.products.length; i++) { self.change[response.data.products[i].id] = array; } console.log(self.change)

So my console.log show me the array I want to have so so far so good.

And my show function :

show(id, field){ let array = this.change array[id][field] = true this.$set('change',array) console.log(this.change) },

Once more, my console.log is still good when i click on the product.name but I still see the product.name instead of "okays"

In my application, I'd like to use bootstrap-datetimepicker library, which lets you have a date and time picker on the website.

I just put the datepicker in my HTML (some divs and input). I also added the script that initializes the whole thing.

I observed a strange behaviour: if my datetimepicker is placed inside Vue div, it doesn't work! (when I click on the input field, the calendar should be displayed). When I put the picker outside of Vue DIV it works perfectly.

Generally, I noticed that Vue blocks mouse events, i had the same issue with MetricsGraphics.js library (for drawing graphs) - if i put it inside Vue DIV, mouse hover events do not work at all. i had to put it outside of Vue.

What's the reason for that? In case of datetimepicker, I can't put it outside of Vue, because I'd like to use Vue capabilities on it.

I didn't include any code, but basically, this doesn't work:

<div> <div id="vue-app"> <!-- DATE_TIME PICKER: --> <div class="form-group"> <div class='input-group date' id='datetimepicker1'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> <div> <div> <script type="text/javascript"> $(function () { $('#datetimepicker1').datetimepicker(); }); </script>

And this works:

<div> <div id="vue-app"> <div> <!-- DATE_TIME PICKER: --> <div class="form-group"> <div class='input-group date' id='datetimepicker1'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> <div> <script type="text/javascript"> $(function () { $('#datetimepicker1').datetimepicker(); }); </script>

i am using vue.js for developing a single page application and want to know how can i use the jquery part of the bootstrap in vuejs,also want to know about the script tag component of vue like methods,mounted etc. I have tried using bootstrap but i am unable to add the jquery part of my code

I return from my backend one Model Object like:

$model = new MyModel(); $meeting->name = "name test n.".rand(0,10000); $meeting->data = Carbon::NOW();

Now in my fronted created with VueJs, for property data I have:

{ "date": "2017-07-31 08:03:44.000000", "timezone_type": 3, "timezone": "UTC" }

But How Can i parse data from carbon with VueJs with format dd/mm/yyyy ?

I'm trying to get a demo to work and it works fine in Chrome but fails in IE11.

The syntax error is related to an eval() but is only an issue with IE11. An example of the issue can be seen here (view with IE11):

Example site not working in IE11.

The source is located here.

I have modified the .babelrc file to look like:

{ "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "stage-2" ], "plugins": ["transform-runtime"], "env": { "test": { "presets": ["env", "stage-2"], "plugins": ["istanbul"] } } }

My webpack.base.conf.js file has been changed to include the babel-polyfill but nothing seems to help fix the issue.

app: ['babel-polyfill', './src/main.js']

Any suggestions are much appreciated.

I would like to have something that the following Vue template, but it does not work with the property selected. What is the correct property name?

<select :selected="myList"> <option value="abc">ABC</option> </select>

I do not understand what i am doing wrong. I'm using Vuetify framework with nuxt.js on top of vue.js.

I wish that the navigation drawer's initial state to be open on the index page but close on the others. I can manage to have the desired result when i first load the page (if it's the index page the drawer is shown otherwise it's hidden), but when i change the page using the link in the drawer (nuxt js is using vue router in the background) the drawer preserves it's state.

I've made a quick middleware containing this:

export default ({store, route}) => { const mitem = store.state.menu.filter(item => item.to.indexOf(route.name) >= 0 )[0] const title = mitem ? mitem.title : 'Home' store.commit('setPageTitle', title) }

here's the store were are the state and mutations (the menu json file contains the entries with the following keys: { title, icon, to })

import menu from '~json/menu.json' export const state = () => ({ menu, drawer: true, pageTitle: undefined }) export const mutations = { toggleDrawer: state => { state.drawer = !state.drawer }, setPageTitle: (state, title) => { state.pageTitle = title state.drawer = title === 'Home' console.log(state.drawer) } }

And here's the layout

<template> <v-app> <v-navigation-drawer persistent v-model="drawer" > <v-list> <v-list-tile router v-for="(item, i) in menu" :key="i" :to="item.to" > <v-list-tile-action> <v-icon>{{ item.icon }}</v-icon> </v-list-tile-action> <v-list-tile-content> <v-list-tile-title>{{ item.title }}</v-list-tile-title> </v-list-tile-content> </v-list-tile> </v-list> </v-navigation-drawer> <v-toolbar fixed> <v-toolbar-side-icon @click.native.stop="toggleDrawer" /> <v-toolbar-title>{{ pageTitle }}</v-toolbar-title> <v-spacer></v-spacer> </v-toolbar> <main> <v-container fluid> <nuxt /> </v-container> </main> </v-app> </template> <script> import { mapState, mapMutations } from 'vuex' export default { methods: { ...mapMutations([ 'toggleDrawer' ]) }, computed: { ...mapState([ 'menu', 'drawer', 'pageTitle' ]) } } </script>

The console.log shows me that the state get updated, but as the state.drawer changes the component is not updated and the drawer remains present.

Any idea on what i'm doing wrong/how to tackle that issue? Thanks in advance

Seb