Vuejs

I have this v-for loop an my vue.js app:

<div v-for="(word, index) in dictionary"> // break if index > 20 <p>{{word}}</p> </div>

I want to break out of the loop after rendering 20 words. How can I achieve this? I looked at the docs but did not see anything about this.

example:

<div id="app"> {{ message }} </div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })

How can I print source code '{{message}}' not 'Hello Vue!'

Assume I have a JS function like this:

function myFunc() { return true; }

Now, I want to show an element if the output of is true:

<p v-if="myFun()">I am Test</p>

I know I can write this myFunc method inside Vue methods but I don't want this.

Any idea would be great appreciated.

Is there a way to pass data from the created function to the mounted function in VueJS. I am building a VueJS application and my created function looks like this,

created: function(){ $.getJSON({ url: 'static/timeline.json', success:function(json) { return json; } }) }

I want to pass the json value into vis.DataSet() of my mounted function which looks like this,

var items = {}; mounted(){ container = document.getElementById('mynetwork'); items = new vis.DataSet(json); }

So, is there a way using which I can pass data from created to the mounted() function?

When using $router.push like so:

this.$router.push({name: 'Home'})

... it seems my route meta fields aren't being recognised. Here's my route meta fields and how I'm calling them:

Route meta fields

router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requiresAuth)) { // this route requires auth, check if logged in // if not, redirect to login page. if (!auth.user.authenticated) { next({ path: '/login' }) } else { next() } } else { next() // make sure to always call next()! } }) router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.preventAdmin)) { // this route shouldn't be available for admin, check role // if so, redirect to admin area. if (auth.user.role === '1') { next({ path: '/admin/users' }) } else { next() } } else { next() // make sure to always call next()! } })

Routes

routes: [ { path: '/', name: 'Home', component: Home, meta: { requiresAuth: true, preventAdmin: true } }, ]

If I refresh when I am on the particular route they work as intended.

Do I have to do something to ensure my route meta fields work when using $router.push?

Here's the deal, I'm using blade and vue.js together on my Laravel app, and I need to build a url for my anchor tag... With blade only, what I would do was:

{{ Route('chef.menus.show', [$shop, $menu]) }}

Since my route is

Route::get('/lojas/{shop}/cardapios/{menu}', 'MenuController@show') ->name('chef.menus.show');

But, since I'm not using blade @foreach to render my links, and I'm using v-for. What is the best way to build a url from a Route name (if it is possible) inside here:

<tr v-for="menu in menus"> <td>@{{ menu.id }}</td> <td><a href="**URL GOES HERE**">@{{ menu.name }}</a></td> <td>@{{ menu.items.length }}</td> <td> <a href="#"><i class="material-icons md-16">delete</i></a> <a href="#"><i class="material-icons md-16">edit</i></a> </td> </tr>

Keep in mind that I need to pass {{$shop}} (from PHP) and @{{ menu.slug }} from vue.js to correctly build my url :(

I appreciate any help! Thank you very much

I am exploring custom controls in VueJS. I have a simple on/off box in it's own component. The behavior I want is that on click a data property will will change. What I have is my component being passed a boolean value from its parent, and onclick this boolean should be updated via the switchIt() method

Child Component

<template> <div> <div id="on" @click="switchIt(true)" :class="{active: dataSwitch}">On</div> <div id="off" @click="switchIt(false)" :class="{active: !dataSwitch}">Off</div> </div> </template> <script type="text/javascript"> export default{ methods: { switchIt(){ this.$emit('input', isOn) } }, props: ['dataSwitch'] } </script>

As you can see in the following parent I am passing my prop to my custom element and am then listening for the even emitted by my method in its child component.

Parent Component

<template> <div id="app"> <div class="container-fluid"> <form> <div class="row"> <div class="col-sm-12 col-md-6 col-md-offset-3"> <app-toggle-box v-model="dataSwitch" :dataSwitch="dataSwitch" @></app-toggle-box> </div> </div> </form> <h3>{{dataSwitch}}</h3> </div> </div> </template> <script> import toggleBox from './components/toggleBox.vue'; export default{ data () { return { dataSwitch: true } }, components: { appToggleBox: toggleBox } } </script>

The problem is that my on box is highlighted and I cant selec my off box. I see no update occurring via string interpolation in my DOM and my styles dont change as I have set up.

Also getting this error on click

ReferenceError: isOn is not defined

I want to loop through an array containing objects and grab a list of author names from these objects.

To do this I want to write a method which I will forEach() through. But I can't seem to access my computed property containing the array, when I console.log(articles) or console.log(this.newsFeed) it returns undefined or is just blank.

Clearly I'm doing something wrong but I don't understand what...

Here is my code:

new Vue({ el: '#feed', data: { newsFeed: "", }, created: function() { console.log('running'); this.getData(); this.filterAuthors(); }, computed: { articles: function() { var articles = this.newsFeed.articles; return articles; }, }, methods: { getData: function() { var newsFeed = this.$http.get('https://newsapi.org/v1/articles?source=the-next-web&sortby=latest&apikey='+ apikey).then(response => { this.newsFeed = response.body; }, response => { console.error(error); }); }, filterAuthors: function() { var articles = this.newsFeed.articles; var authorsArray = []; console.log(articles); // commented out while troubleshooting above // articles.forEach(function(article) { // // var authors = article.author; // // authorsArray.push(authors); // console.log(authors); // }); // return authorsArray; } } });

I've created a new vue app using vue init webpack sample-app .

I'm trying to import this module (https://docs.botui.org/install.html) into my app.vue and make it show on.

What's the correct way to import this module into a Vue.JS app?

I have a Jsp file with following code:

<fieldset class="cd"> <label class="select icon icon-toggle180" v-bind:for="'DropdownList'"> <select id="Dropdown" v-bind:name="'Dropdown'" v-bind:id="'Dropdown'" v-on:change="DropdownListChanged($event, 'DropdownChanged')"> <option>Select</option> <option>Option 1</option> <option>Option 2</option> </select> </label> </fieldset>

The Javascript file uses vue.js.It has a following function definition for DropdownListChanged()

DropdownListChanged: function (e, type) { if ((e.target.value != "" || e.target.value !="Select") && e.target.value == "Option 1") { this.policy = "A"; } if ((e.target.value != "" || e.target.value !="Select") && e.target.value == "Option 2") { this.policy= "B"; } }

Now I want to write qunit test to test this javascript function. But I am not sure how should I mock the $event object and test the function.

I am trying to dowload a file that is on a memory stream. I am working with openxml, and at the moment i build the document doing some appends where i add tables paragraphs and other stuffs, not really important for the question, it is just important to say that in the end i can get a document on the server, it is getting saved in a folder called files.

The thing is, i want to try to download the file on the client side this time, i don't know very well if i am doing something wrong on the client side or on the server.

So basicly on the server i do it like this:

public FileResult Create([FromBody]AppDocument document) { if (!ModelState.IsValid) { //return BadRequest(ModelState); } var stream = new MemoryStream(); if(document.documentSelection == "Test Case Specification") { stream = testSpecificationDoc(document); } var bytesArray = stream.ToArray(); FileResult fileResult = new FileContentResult(bytesArray, "application/octet-stream"); fileResult.FileDownloadName = $"test4.docx"; HttpResponseMessage result = new HttpResponseMessage(HttpStatusCode.OK); result.Content = new StreamContent(stream); result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream"); return fileResult; } private MemoryStream testSpecificationDoc(AppDocument document) { String disclaimerTxt = "blabla." 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; }

on the client side i try to do something with the response, i want to prompt a dialog that gives the user the permission to download the file

let blob = new Blob([response.blob()], {type: response.headers['content-type']}), filename = (response.headers['Content-Disposition'] || '').split('filename=')[1]; result = document.createElement('a'); result.href = window.URL.createObjectURL(blob); result.download = filename; return result;

i tried to check the result, i get a empty header, any help? am i doing it correctly?

Can't find a solution for this error !!

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

(found in )

Here is my source code : https://pastebin.com/Gmy61Q1S

<script> var app = new Vue({ el: '#app', data: { permissionType: 'simple', ressource: '', crudSelected: ['create','read','update','delete'] }, methods: { crudName: function(item){ return item.substr(0,1).toUpperCase() + item.substr(1) + " " + app.ressource.substr(0,1).toUpperCase() + app.ressource.substr(1); }, crudSlug: function(item){ return item.toLowerCase() + "-" + app.ressource.toLowerCase(); }, crudDescription: function(item){ return "Permet a l'utilisateur de "+ item.toUpperCase() + "un(e) " + app.ressource.substr(0,1).toUpperCase() + app.ressource.substr(1); } } }); </script>

I have a table with multiple rows containing some information. The user is able to select as many of the rows that they would like (using checkboxes in each row), and anytime they select (or deselect) a row, I want the totalSelected to be updated.

My ViewModel currently looks like this:

var viewModel = new Vue({ el: "#OrderPickContainer", data: { ProductTitle: "", Batches: [], totalSelected: 0 }, methods: { // I have some unrelated methods here } });

My table looks like this:

<table class="table table-striped"> <thead> <tr> <th>Select</th> <th>Batch Number</th> <th>Available</th> <th>Quantity</th> </tr> </thead> <tbody> <template v-for="batch in Batches"> <tr> <td><input type="checkbox" /></td> <td>{{ batch.BatchNumber }}</td> <td>{{ batch.AvailableQuantity }}</td> // This is the input that I would like to bind to update `totalSelected`. The issue though is there are multiple rows with this exact input and I want them all to be able to add or subtract to the total. <td><input type="number" min="0" class="form-control" /></td> </tr> </template> <tr> <td></td> <td></td> <td><strong>Total:</strong></td> <td><strong>{{ totalSelected }}</strong></td> </tr> </tbody> </table>

So, since there are multiple rows, the issue I'm having is figuring out how to bind all of those number textboxes to one Vue variable.

I am using Vue and Vue-router.

routes

{ path: '/admin', component: AdminPage, children: [ {path: 'admin-user', component: AdminUser, name: 'admin-user'} ] },

In the AdminPage component I have router links and its router view to navigate between pages. One of the route is of path admin-user, which uses the AdminUser component.

AdminPage.vue:

<template> <div id="adminPage"> <ul id="adminNavList"> <li>... some nav links ...</li> <li><router-link :to="{ name: 'admin-user', params: {front: true}}">User</router-link></li> </ul> <div class="adminViewPort" v-if="isAdmin"> <router-view></router-view> </div> </div> </template>

In the AdminUser component there are two components which are displayed based on the conditions. When the route path is first loaded and the AdminUser is created, the AdminUserList component is displayed by default. And when clicks the button which fires show_user_bookings() button, the other component AdminUserBookings is displayed. Similarly when the user clicks the button which fires show_user_list() method, the AdminUserList component is displayed.

AdminUser.vue

<template> <div id="AdminUserWrapper"> <admin-user-list v-if="component_name==='user_list'" :showUserBookings="show_user_bookings"></admin-user-list> <admin-user-bookings v-if="component_name==='user_bookings'" :show_user_list="show_user_list"></admin-user-bookings> </div> </template> <script> import AdminUserList from './AdminUserList.vue' import AdminUserBookings from './AdminUserBookings.vue'; export default { name: 'AdminUserWrapper', components: { AdminUserList, AdminUserBookings }, data() { return { component_name: '', }, methods: { show_user_list() { this.component_name = 'user_list'; }, show_user_bookings() { this.component_name = 'user_bookings'; } }, created() { this.show_user_list(); } } </script>

So the problem is, if AdminUserBookings component is displayed and clicks the link for the path admin-user, the default component AdminUserList is not displayed. Is there any way to display the default component AdminUserList whenever the admin-user path is requested from the AdminPage even if its already in the admin-user path when the AdminUserBookings component is displayed?

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