Software

I'm doing async work in my router's navigation guard:

router.beforeEach((to, from, next) => { somethingAsync().done(next) })

Does the router expose anything to tell me that it's currently "loading"? Or do I need to keep track of it myself? Right now the content will pop up in<router-view></router-view> once the async work is completed. My current solution is to keep track of active work in my Vuex store and show a loading element next to the router view.

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!'

Can digital literacy and Equal Rating solutions help connect the unconnected?

Today, 4 billion people live without the internet. There’s a global debate about how to connect the unconnected, but it’s often dominated by assumptions and not a lot of data or talking to actual users on the ground.

To better inform this issue, Mozilla recently supported a series of focus groups to investigate how and why people use subsidized services in India, Myanmar, Peru, Kenya, Nigeria, Rwanda and South Africa. Today, we’re releasing the results of this research carried out by Research ICT Africa, LIRNEasia and IEP.

Credit: Peter Cihon

Why do we care?
Many companies and organizations are working to connect the unconnected. For us at Mozilla, it is our mission to ensure the internet is a global public resource that’s open and accessible to all.

We’ve focused our work in this space on a concept we call Equal Rating. Building on Mozilla’s strong commitment to net neutrality, Equal Rating models are free of discrimination, gatekeepers, and pay-to-play schemes. Equal Rating stands in contrast to zero rating business models, which reduce the cost to zero only for some sites and services. We’ve pursued this through policy engagement with governments, an innovation challenge to catalyze new thinking in providing affordable access, and this research.

What did we ask?

• What barriers are keeping people offline?
• Is zero rating serving as an on-ramp to the internet?
• Why and how do people use subsidized services?
• Do people move beyond subsidized services, or do they just stay in the subsidized walled garden?
• How does use of subsidized services affect future internet usage?

What did we find?

Zero rating is not serving as an on-ramp to the internet
In all countries surveyed — excluding India where zero rating has been banned by the regulator — focus groups revealed that users are not coming online through zero rated services. While more research is needed, if zero rating is not actually serving as an on-ramp to bring people online, the benefits seem low, while the resulting risk of these offerings creating an anti-competitive environment is extremely high.

People use zero rating as one of many cost saving strategies
This research revealed that people who use zero rated services usually also have full access to the internet, and make use of zero rated and subsidized data services as one of many money-saving strategies, including:

• Use of multiple SIM cards cards to take advantage of promotions, better reception quality, or better prices for a given service.
• Use of public Wi-Fi. For example, many buses in Rwanda now provide wifi access, and participants reported being willing to wait for a bus that was Wi-Fi-enabled.
• Tethering to mobile hotspots. In South Africa and India, users not only share data but also promotions and subsidized offers from one phone to another.
• Earned reward applications (where users download, use, or share a promoted application in return for mobile data/credit). The research indicates that most users tend to play the system to get the most credit possible and then abandon the earned reward application.
• While users, especially in the African studies, report skepticism about whether zero rated promotions are truly free, partially subsidized bundles are popular. Notably, many of these offerings are Equal Rating compliant.

Some, particularly rural and low income users, are trapped in walled gardens
While zero rated services tend to be only part of internet usage for most users studied, some users are getting trapped in the walled gardens of these subsidized offerings.

• In particular, low income respondents in Peru and Rwanda use zero rated content for much of their browsing activity, as do rural respondents in Myanmar.
• Awareness matters: in Myanmar, respondents who know they are in a zero rated walled garden (e.g., due to lack of photos and video) are more likely to access the full internet beyond the walled garden.
• But, when Facebook is subsidized without impacting user experience, users tend to concentrate their usage on that single site, demonstrating concerns around the anti-competitive effects of zero rating.

Digital illiteracy limits access for connected and unconnected alike
Infrastructure and affordability are commonly cited barriers to internet access around the world; yet, this research also points to a third important barrier: digital literacy.

• Users and non-users alike do not understand all that the internet can offer.
• Users generally restrict their internet use to a few large websites and services.
• A lack of understanding about the internet and internet-connected devices exacerbates misconceptions and spreads fear around privacy, security, and health, which in turn undermines use of the internet. One Kenyan respondent said of non-users: “there are some assumptions that they can get diseases transmitted to them like skin cancer through the use of the internet.”

Many companies and NGOs are already doing great work to advance digital literacy, but we need to scale up these efforts.

Competition, literacy, language, and gender are also barriers to internet access
This research highlighted a series of consistent and persistent barriers to access.

• While 95% of the world has access to an internet signal, far too often, users have access to only one, low quality provider, usually the most expensive option in their country.
• Without basic literacy, some respondents cannot access the internet. As one respondent in rural South Africa said, “if you cannot read or write you cannot use internet, many people in this community are not educated and I believe most of them want to be able to use internet because it makes life easier.”
• Others in Myanmar, Peru, and Rwanda cite the lack of local language content and tools as keeping them from coming online.
• Evidence of a gendered digital divide is seen throughout all of the countries studied, with some women afraid of “breaking the machine” while others say social stigma, domestic abuse, negative impressions, and housework obligations limit their use of the internet.

These are just some of the highlights and interesting findings. We have results from nearly 80 focus groups in these seven countries. For more detailed information, the country summaries and full reports are available here.

Next steps to bring the next 4 billion online
Mozilla supported this research to help better inform what we believe is a global imperative to bring the world’s 4 billion unconnected people online to access the full and open internet.

Based on these findings, we believe the internet needs:

• The development of more Equal Rating compliant models, many of which seemed to be quite popular with research respondents and provide access to the full diversity of the open internet, not just some parts of it.
• Further investment in digital literacy training, especially in schools, on devices, and in retail outlets. For more information about Mozilla’s digital literacy efforts, see our recent Digital Skills Observatory study.
• Work on all barriers to access to address infrastructure investment especially in rural areas, affordability, local content and local language tools, and gender equality.

Bringing the full internet to all people is one of the great challenges of our time. While we know there is more research needed, this research better informs the global debate on how to connect the unconnected, and makes clear the challenges ahead. We are committed to tackling these challenges but we know it will take all of us — tech companies, telecom companies, governments, civil society groups and philanthropists — working together to get everyone online.

We’d like to thank the researchers at Research ICT Africa, LIRNEasia, and IEP, as well as Jochai Ben-Avie (who manages all our Equal Rating work) and Peter Cihon (our awesome summer intern) who helped analyze this research.

The post Mozilla releases research results: Zero rating is not serving as an on-ramp to the internet appeared first on The Mozilla Blog.

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 !