Software

so here's my problem, I want to apply three filters to app thumbnails using Vue.js (I never used that framework before). It works fine for the first filter but I don't know how to proceed for the other ones. The goal is to be able to pick only one checkbox from each category (Platform, Field of activity and Device).

Screenshot of what it should look like. ("Toutes" meaning "All")

Here's the HTML

<div id="filter-realisations"> <div id="filter"> <div class="filter_container"> <h3>Filtrer</h3> <div class="filter"> <p>Plateforme</p> <input type="radio" v-model="selectedPlatform" value="AllPlatform" id="AllPlatform"><label for="AllPlatform">Toutes</label> <input type="radio" v-model="selectedPlatform" value="iOS" id="iOS" /><label for="iOS">iOS</label> <input type="radio" v-model="selectedPlatform" value="Android" id="Android" /><label for="Android">Android</label> </div> <div class="filter"> <p>Secteur</p> <input type="radio" v-model="selectedSecteur" value="AllSecteur" id="AllSecteur" /><label for="AllSecteur">Toutes</label> <input type="radio" v-model="selectedSecteur" value="grandPublic" id="grandPublic"/><label for="grandPublic">Grand public</label> <input type="radio" v-model="selectedSecteur" value="metier" id="metier" /><label for="metier">Métier</label> <input type="radio" v-model="selectedSecteur" value="marchesPublics" id="marchesPublics" /><label for="marchesPublics">Marchés Publics</label> </div> <div class="filter"> <p>Device</p> <input type="radio" v-model="selectedDevice" value="AllDevice" id="AllDevice" /><label for="AllDevice">Toutes</label> <input type="radio" v-model="selectedDevice" value="Smartphone" id="Smartphone" /><label for="Smartphone">Smartphone</label> <input type="radio" v-model="selectedDevice" value="Tablet" id="Tablet" /><label for="Tablet"> Tablette</label> <input type="radio" v-model="selectedDevice" value="Watch" id="Watch" /><label for="Watch"> Montre connectée</label> </div> </div> </div> <div id="realisations"> <div class="realisations_container"> <div class="realisations_bloc" v-for="app in filteredRealisations" v-bind:key="app"> <img v-bind:src='"img/realisations/"+app.name+".jpg"' alt="app.name"> <div class="overlay"> <div class="app_description"><p>{{app.name}}</p></div> <div class="platform_container"> <div class="device"> <img v-bind:src='"img/"+app.device+".svg"' alt="app.device"/> </div> <div class="os"> <img v-bind:src='"img/"+app.platform+".svg"'alt="app.platform"/> </div></div> </div> </div> </div> </div> </div>

And here's the script

var vm = new Vue({ el: "#filter-realisations", data: { realisations: [ { name: "ASM", platform: "iOS", secteur: "grandPublic", secteur: "grandPublic", device:"Watch" }, { name: "Biodiversea", platform: "Android", secteur: "marchesPublics", device:"Tablet" }, { name: "CDBB", platform: "iOS", secteur: "grandPublic", device:"Smartphone" }, { name: "Centre France", platform: "iOS", secteur: "grandPublic", device:"Watch" }, { name: "Clermont", platform: "Android", secteur: "grandPublic", device:"Tablet" }, { name: "Dassault", platform: "iOS", secteur: "metier", device:"Smartphone"}, { name: "Journal", platform: "iOS", secteur: "metier", device:"Smartphone" }, { name: "Somfy", platform: "Android", secteur: "metier", device:"Smartphone" }, { name: "Sortir.vosges", platform: "Android", secteur: "metier", device:"Smartphone" }, { name: "Sud Radio", platform: "Android", secteur: "metier", device:"Smartphone" }, { name: "Verifrom", platform: "Android", secteur: "metier", device:"Smartphone" }, { name: "Sports", platform: "iOS", secteur: "marchesPublics", device:"Watch" } ], selectedSecteur : "AllSecteur", selectedPlatform: "AllPlatform", selectedDevice : "AllDevice" }, computed: { filteredRealisations: function() { var vm = this; var platform = vm.selectedPlatform; var secteur = vm.selectedSecteur; var device = vm.selectedDevice; if(platform === "AllPlatform") { return vm.realisations; } else { return vm.realisations.filter(function(app) { return app.platform === platform; }); } if(secteur === "AllSecteur") { return vm.realisations; } else { return vm.realisations.filter(function(app) { return app.secteur === secteur; }); } if(device === "AllDevice") { return vm.realisations; } else { return vm.realisations.filter(function(app) { return app.device === device; }); } } } });

Last month in San Francisco, my colleagues at Mozilla took to the streets to collect samples of spoken English from passers-by. It was the kickoff of our Common Voice Project, an effort to build an open database of audio files that developers can use to train new speech-to-text (STT) applications.

What’s the big deal about speech recognition?

Speech is fast becoming a preferred way to interact with personal electronics like phones, computers, tablets and televisions. Anyone who’s ever had to type in a movie title using their TV’s remote control can attest to the convenience of a speech interface. According to one study, it’s three times faster to talk to your phone or computer than to type a search query into a screen interface.

Plus, the number of speech-enabled devices is increasing daily, as Google Home, Amazon Echo and Apple HomePod gain traction in the market. Speech is also finding its way into multi-modal interfaces, in-car assistants, smart watches, lightbulbs, bicycles and thermostats. So speech interfaces are handy — and fast becoming ubiquitous.

The good news is that a lot of technical advancements have happened in recent years, so it’s simpler than ever to create production-quality STT and text-to-speech (TTS) engines. Powerful tools like artificial intelligence and machine learning, combined with today’s more advanced speech algorithms, have changed our traditional approach to development. Programmers no longer need to build phoneme dictionaries or hand-design processing pipelines or custom components. Instead, speech engines can use deep learning techniques to handle varied speech patterns, accents and background noise – and deliver better-than-ever accuracy.

The Innovation Penalty

There are barriers to open innovation, however. Today’s speech recognition technologies are largely tied up in a few companies that have invested heavily in them. Developers who want to implement STT on the web are working against a fractured set of APIs and support. Google Chrome supports an STT API that is different from the one Apple supports in Safari, which is different from Microsoft’s.

So if you want to create a speech interface for a web application that works across all browsers, you would need to write code that would work with each of the various browser APIs. Writing and then rewriting code to work with every browser isn’t feasible for many projects, especially if the code base is large or complex.

There is a second option: You can purchase access to a non-browser-based API from Google, IBM or Nuance. Fees for this can cost roughly one cent per invocation. If you go this route, then you get one stable API to write to. But at one cent per utterance, those fees can add up quickly, especially if your app is wildly popular and millions of people want to use it. This option has a success penalty built into it, so it’s not a solid foundation for any business that wants to grow and scale.

Opening Up Speech on the Web

We think now is a good time to try to open up the still-young field of speech technology, so more people can get involved, innovate, and compete with the larger players. To help with that, the Machine Learning team in Mozilla Research is working on an open source STT engine. That engine will give Mozilla the ability to support STT in our Firefox browser, and we plan to make it freely available to the speech developer community, with no access or usage fees.

Secondly, we want to rally other browser companies to support the Web Speech API, a W3C community group specification that can allow developers to write speech-driven interfaces that utilize any STT service they choose, rather than having to select a proprietary or commercial service. That could open up a competitive market for smart home hubs–devices like the Amazon Echo that could be configured to communicate with one another, and other systems, for truly integrated speech-responsive home environments.

Where Could Speech Take Us?

Voice-activated computing could do a lot of good. Home hubs could be used to provide safety and health monitoring for ill or elderly folks who want to stay in their homes. Adding Siri-like functionality to cars could make our roads safer, giving drivers hands-free access to a wide variety of services, like direction requests and chat, so eyes stay on the road ahead. Speech interfaces for the web could enhance browsing experiences for people with visual and physical limitations, giving them the option to talk to applications instead of having to type, read or move a mouse.

It’s fun to think about where this work might lead. For instance, how might we use silent speech interfaces to keep conversations private? If your phone could read your lips, you could share personal information without the person sitting next to you at a café or on the bus overhearing. Now that’s a perk for speakers and listeners alike.

Want to participate? We’re looking for more folks to participate in both open source projects: STT engine development and the Common Voice application repository.

If programming is not your bag, you can always donate a few sentences to the Common Voice Project. You might read: “It made his heart rise into his throat” or “I have the diet of a kid who won $20.” Either way, it’s quick and fun. And it helps us offer developers an open source option that’s robust and affordable.

The post How Could You Use a Speech Interface? appeared first on The Mozilla Blog.

I have a vueJS application and I'm trying to filter an array based on an input from a form.

The problem is my array autocomplete isn't getting populated with the visitors that match the query of the first name?

My HTML

<input class="input" placeholder="First Name" v-model="visitor.first" @keyup.enter="searchVisitors">

My Vue Instance

<script> new Vue({ el: '#app', data: { previousVisitors: [], autocomplete: [], visitor: {} }, mounted() { axios.get('/visitors/all').then(response => this.previousVisitors = response.data); }, methods: { searchVisitors() { var q = this.visitor.first; this.autocomplete = this.previousVisitors.filter(item => {return item.firstName === q}); console.log(this.autocomplete); } } }); </script>

I can confirm the repsonse from the Axios which is currently populating the previousVisitors array contains the FirstName of each previous visitor.

I have used the method wrongly here?

I am new to vue.js. I am using the following command to include an html file

<?php include("templates/property.html"); ?>

This html file contains regular httml tags as well as vue data, e.g. {{name}}}. Can I include this file programatically in a div element in the click event of an element?

I have a laravel 5.4 application which uses VueJS 2.0 for the front end.

I'm trying to post the visitors array to the controller after populating on the page but when I return the array from the controller the data isn't there.

I can't see for the life of me what I'm doing wrong? What's interesting is if I send two visitors through I get two empty arrays returning from my controller so the number of visitors is working it's just not capturing the data.

My vue instance.

<script> new Vue({ el: '#app', data: { visitors: [], visitor: [], }, methods: { addVisitor() { this.visitors.push(this.visitor); this.visitor = []; }, storeVisit() { axios({ method: 'post', url: '/visit/new', data: { visitors: this.visitors } }); } }, }); </script>

My HTML page

<p>Visitors</p> <div class="columns"> <div class="column"> <input class="input" placeholder="First Name" v-model="visitor.first"> </div> <div class="column"> <input class="input" placeholder="Last Name" v-model="visitor.last"> </div> <div class="column"> <input class="input" placeholder="Company" v-model="visitor.company"> </div> <div class="column"> <input class="input" placeholder="Email" v-model="visitor.email"> </div> <div class="column"> <button class="button is-primary" @click="addVisitor()">Add</button> </div> </div>

I've then got a button that actions the storeVisit() method.

<button class="button is-primary" @click="storeVisit">Save Visit</button>

My controller waiting the post request

public function store(Request $request) { return $request->visitors; }

My response

{"visitors":[[],[]]}

We are building out a proof of concept multi-site / multi-tenancy SaaS app, using Firebase + VueJS, and are struggling on how best to secure application access based on a referring domain (source website).

In it's current structure there are two apps (projects) sharing one Firebase database. App1 is for account owners/management (accessed from a single domain eg. admin.abcwidgets.com) and App2 (app.abcwidgets.com) is serving content to iframes, loaded in from N+ third-party sites via some minimal JS inclusion code.

Securing individual multi-tenant data is not really a problem thanks to Firebase database rules - however we are struggling on how best to restrict the app to specific 'whitelisted' domains - set on a per-tenant basis. We currently pass an appKey to App2, which then checks whether the source domain is associated with the tenant's appKey - however we know this is not ideal as it can be easily spoofed/altered from the client side (or bypassed altogether) - allowing a site to potentially boot up an instance of another tenants app (assuming they know the correct keys etc).

Perhaps this extends beyond the scope of just Firebase (and is more a generic Javascript security question) - but i was wondering whether anyone can point me in the direction of an elegant solution that prevents an app initialising in this scenario. We are happy to add in 'middlemen', such as a Node.js server, if required.

Thanks in advance.

Basically i've made proyxy-component which renders different components based on what the :type is and it works great. The point is that I create a schema of the form controls and a separate data object where the data from the form controls is stored. Everything is working good but i have a problem when formData object contains nested objects.

In my example test.test1

How can i make the v-model value dynamic which is generated based on what the string is.

My Compoennt

<proxy-component v-for="(scheme, index) in personSchema.list" :key="index" :type="scheme.type" :props="scheme.props" v-model="formData[personSchema.prefix][scheme.model]" v-validate="'required'" data-vv-value-path="innerValue" :data-vv-name="scheme.model" :error-txt="errors.first(scheme.model)" ></proxy-component>

Data

data() { return { selectOptions, formData: { person: { given_names: '', surname: '', sex: '', title: '', date_of_birth: '', place_of_birth: '', nationality: '', country_of_residence: '', acting_as: '', test: { test1: 'test', }, }, }, personSchema: { prefix: 'person', list: [ { model: 'given_names', type: 'custom-input-component', props: { title: 'Name', }, }, { model: 'surname', type: 'custom-input-componentt', props: { title: 'Surname', }, }, { model: 'test.test1', type: 'custom-input-component', props: { title: 'test 1', }, }, { model: 'sex', type: 'custom-select-component', props: { title: 'Sex', options: selectOptions.SEX_TYPES, trackBy: 'value', label: 'name', }, }, ], }, }; },

I have a component

<template>somecode</template> <script> export default { name: 'Card', created() { axios.get(apiObjUrl) somecode }) } </script>

this my url: http://127.0.0.1:8080/#/card/12

But I have a problem:

when I use router-link like this:

<router-link to="/card/155"> card 155</router-link>

my url changes: http://127.0.0.1:8080/#/card/155

but the created() method doesn't get fired. so I don't make new xhr request to api and data not changes what do I do?

QA guys recently complained they can't automate frontend testing. Because our html looks all the same from outside. So as a lazy hack i did this

<template> <div :role="$options.name"> ... </div> </template>

Which just takes name from script and applies it in html.

Line :role="$options.name" goes in every component. Is there any DRYer solutions? Please share.

In my project, i have created and viewed the details of a room component.. I am in the need of doing edit functionality in it.. How to make edit in it and here are the following codes that i have tried,

Rooms.vue:

<template> <div> <admin-nav></admin-nav> <div class="indvi-page-wrap" id="page-wrapper"> <div class="page-header"> <div class="container-fluid"> <div class="row"> <div class="col-md-2"> <h1><i class="fa fa-hotel"></i> Rooms</h1> </div> <div class="col-md-2"> <router-link to="rooms/create" tag="span"><h1><button type="button" class="btn btn-danger"><i class="fa fa-plus-circle"></i> New</a></button></h1></router-link> </div> </div> </div> </div> <div class="container-fluid"> <div id="dashboard"> <div class="search form-inline"> <div class="row"> <div class="col-md-6 text-left"> <div class="form-inline"> <input type="text" name="q_search" value="" class="form-control input-sm" placeholder="Search..."> <button class="btn btn-default btn-sm" type="submit" id="search" name="search"><i class="fa fa-search"></i> Search</button> </div> </div> <div class="col-md-6 text-right"> <div class="input-group"> <div class="input-group-addon"><i class="fa fa-th-list"></i> Display</div> <select class="select-url form-control input-sm"> <option selected="selected">20</option><option value="index.php?view=list&amp;limit=50">50</option><option value="index.php?view=list&amp;limit=100">100</option> </select> </div> </div> </div> </div> <div class="table-contents"> <div class="table-responsive"> <table class="table table-striped table-hover rooms-table"> <thead> <tr> <td>#<i class="fa fa-sort"></i></td> <td>ID<i class="fa fa-sort"></i></td> <td>Image<i class="fa fa-sort"></i></td> <td>Title<i class="fa fa-sort"></i></td> <td>Sub Title<i class="fa fa-sort"></i></td> <td>Home<i class="fa fa-sort"></i></td> <td>Status<i class="fa fa-sort"></i></td> <td>Actions</td> </tr> </thead> <tbody> <tr v-for="room in items"> <td></td> <td>{{ room.id }}</td> <td><img :src=room.imgurl style="height:100px;"></td> <td>{{ room.title }}</td> <td>{{ room.subtitle }}</td> <td>{{ room.home }}</td> <td>{{ room.checked }}</td> <td> <router-link class="btn btn-primary" to="rooms/edit">Edit</router-link> <i class="fa fa-remove text-danger"></i></td> </tr> </tbody> </table> </div> </div> <div class="search form-inline"> <div class="row"> <div class="col-md-6 text-left"> &nbsp;<input type="checkbox" class="selectall"> Select all&nbsp; <select name="multiple_actions" class="form-control input-sm"> <option value="">- Actions -</option> <option value="check_multi">Publish</option> <option value="uncheck_multi">Unpublish</option> <option value="display_home_multi">Show on homepage</option> <option value="remove_home_multi">Remove from homepage</option> <option value="delete_multi">Delete</option> </select> </div> <div class="col-md-6 text-right"> <div class="input-group"> <div class="input-group-addon"><i class="fa fa-th-list"></i> Display</div> <select class="select-url form-control input-sm"> <option selected="selected">20</option><option value="index.php?view=list&amp;limit=50">50</option><option value="index.php?view=list&amp;limit=100">100</option> </select> </div> </div> </div> </div> <div class="well"></div> </div> </div> </div> </div> </template> <script> import config from '../../../config'; export default { data(){ return{ items: [], itemsData:{ max_children : '', max_adults : '', image : '', max_people : '', min_people : '', title : '', subtitle : '', alias : '', descr : '', facilities : '', stock : '', price : '', home : '', checked : '', rank : '', start_lock : '', end_lock : '' } } }, mounted() { axios.get(config.apiDomain+'/Rooms').then((response)=>this.items = response.data); } } </script>

RoomsEdit.vue:

<template> <div> <admin-nav></admin-nav> <div class="indvi-page-wrap rooms-new" id="page-wrapper"> <div class="page-header"> <div class="container-fluid"> <div class="row"> <div class="col-xs-5 col-md-5"> <h1><i class="fa fa-hotel"></i>Rooms</h1> </div> <div class="col-xs-7 col-md-7 text-right save-buttons"> <a href="#"> <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="New"> <i class="fa fa-plus-circle"></i><span class="hidden-sm hidden-xs"> New</span> </button> </a> <a href="#"> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Back to list"> <i class="fa fa-reply"></i><span class="hidden-sm hidden-xs"> Back to list</span> </button> </a> <span><button type="submit" name="add" class="btn btn-default hidden-sm" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Save"><i class="fa fa-floppy-o"></i><span class="hidden-sm hidden-xs"> Save</span></button></span> <span><button type="submit" name="add_back" class="btn btn-success" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Save and exit"><i class="fa fa-floppy-o"></i><span class="hidden-sm hidden-xs"> Save and exit</span></button></span> </div> </div> </div> </div> <div class="container-fluid"> <div id="dashboard"> <div class="alert-container"> <div class="alert alert-success alert-dismissable" style="display: block;">Expected images size: 1920 x 1440px<button class="close" aria-hidden="true" data-dismiss="alert" type="button">×</button></div> <div class="alert alert-warning alert-dismissable" style="display: block;">Expected images size: 1920 x 1440px<button class="close" aria-hidden="true" data-dismiss="alert" type="button">×</button></div> <div class="alert alert-danger alert-dismissable" style="display: block;">Expected images size: 1920 x 1440px<button class="close" aria-hidden="true" data-dismiss="alert" type="button">×</button></div> </div> <div class="form-head"> <a>English(default) </a> </div> <div class="room-form-content"> <form @submit.prevent="updateItems" class="form-horizontal" enctype="multipart/form-data"> <div class="form-group"> <label for="title" class="col-sm-2 control-label">Title<span class="red">*</span></label> <div class="col-sm-6"> <input type="text" name="title" class="form-control" id="title" v-model="itemsData.title"> <span class="text-danger">{{ errors.title?errors.title[0]:"" }}</span> </div> </div> <div class="form-group"> <label for="subtitle" class="col-sm-2 control-label">Subtitle<span class="red">*</span></label> <div class="col-sm-6"> <input type="text" name="subtitle" class="form-control" id="subtitle" v-model="itemsData.subtitle"> <span class="text-danger">{{ errors.subtitle?errors.subtitle[0]:"" }}</span> </div> </div> <div class="form-group"> <label for="alias" class="col-sm-2 control-label">Alias<span class="red">*</span></label> <div class="col-sm-6"> <input type="text" name="alias" class="form-control" id="alias" v-model="itemsData.alias"> <span class="text-danger">{{ errors.alias?errors.alias[0]:"" }}</span> </div> </div> <div class="form-group"> <label for="max_children" class="col-sm-2 control-label">Max children<span class="red">*</span></label> <div class="col-sm-6"> <input type="number" name="max_children" class="form-control" id="max_children" v-model="itemsData.max_children"> <span class="text-danger">{{ errors.max_children?errors.max_children[0]:"" }}</span> </div> </div> <div class="form-group"> <label for="max_adults" class="col-sm-2 control-label">Max adults<span class="red">*</span></label> <div class="col-sm-6"> <input type="number" name="max_adults" class="form-control" id="max_adults" v-model="itemsData.max_adults"> <span class="text-danger">{{ errors.max_adults?errors.max_adults[0]:"" }}</span> </div> </div> <div class="form-group"> <label for="max_people" class="col-sm-2 control-label">Max people<span class="red">*</span></label> <div class="col-sm-6"> <input type="number" name="max_people" class="form-control" id="max_people" v-model="itemsData.max_people"> <span class="text-danger">{{ errors.max_people?errors.max_people[0]:"" }}</span> </div> </div> <div class="form-group"> <label for="min_people" class="col-sm-2 control-label">Min people<span class="red">*</span></label> <div class="col-sm-6"> <input type="number" name="min_people" class="form-control" id="min_people" v-model="itemsData.min_people"> <span class="text-danger">{{ errors.min_people?errors.min_people[0]:"" }}</span> </div> </div> <div class="form-group"> <label for="descr" class="col-sm-2 control-label">Description</label> <div class="col-sm-6"> <textarea type="text" name="descr" class="form-control" id="descr" v-model="itemsData.descr"></textarea> <span class="text-danger">{{ errors.descr?errors.descr[0]:"" }}</span> </div> </div> <div class="form-group"> <label for="facilities" class="col-sm-2 control-label">Facilities</label> <div class="col-sm-6"> <!-- <input type="text" name="facilities" class="form-control" id="facilities" v-model="itemsData.facilities"> --> <div class=" form-inline"> <select name="facilities" multiple="multiple" id="facilities" size="8" class="form-control"> <option value="1">Air conditioning</option> <option value="2">Baby cot</option> <option value="3">Balcony</option> <option value="4">Barbecue</option> <option value="5">Bathroom</option> <option value="39">Cloakroom</option> <option value="6">Coffeemaker</option> <option value="7">Cooktop</option> <option value="8">Desk</option> <option value="9">Dishwasher</option> <option value="34">DVD player</option> <option value="35">Elevator</option> <option value="10">Fan</option> <option value="11">Free parking</option> <option value="12">Fridge</option> <option value="13">Hairdryer</option> <option value="33">Hi-fi system</option> <option value="14">Internet</option> <option value="15">Iron</option> <option value="36">Lounge</option> <option value="16">Microwave</option> <option value="17">Mini-bar</option> <option value="18">Non-smoking</option> <option value="19">Paid parking</option> <option value="20">Pets allowed</option> <option value="21">Pets not allowed</option> <option value="22">Radio</option> <option value="37">Restaurant</option> <option value="38">Room service</option> <option value="23">Safe</option> <option value="24">Satellite chanels</option> <option value="25">Shower-room</option> <option value="26">Small lounge</option> <option value="27">Telephone</option> <option value="28">Television</option> <option value="29">Terrasse</option> <option value="30">Washing machine</option> <option value="31">Wheelchair accessible</option> <option value="32">WiFi</option> </select> <a href="#" class="btn btn-default remove_option" rel="facilities2"><i class="fa fa-arrow-left"></i></a> <a href="#" class="btn btn-default add_option" rel="facilities2"><i class="fa fa-arrow-right"></i></a> <select name="facilities" multiple="multiple" id="facilities2" size="8" class="form-control"> </select> </div> <span class="text-danger">{{ errors.facilities?errors.facilities[0]:"" }}</span> </div> </div> <div class="form-group"> <label for="stock" class="col-sm-2 control-label">No of Rooms</label> <div class="col-sm-6"> <input type="number" name="stock" class="form-control" id="stock" v-model="itemsData.stock"> <span class="text-danger">{{ errors.stock?errors.stock[0]:"" }}</span> </div> </div> <div class="form-group"> <label for="price" class="col-sm-2 control-label">Price / Night<span class="red">*</span></label> <div class="col-sm-6"> <input type="number" name="price" class="form-control" id="price" v-model="itemsData.price"> <span class="text-danger">{{ errors.price?errors.price[0]:"" }}</span> </div> </div> <div class="form-group"> <label for="start_lock" class="col-sm-2 control-label">Start of maintenance</label> <div class="col-sm-6"> <input type="date" name="start_lock" class="form-control" id="start_lock" v-model="itemsData.start_lock"> <span class="text-danger">{{ errors.start_lock?errors.start_lock[0]:"" }}</span> </div> </div> <div class="form-group"> <label for="end_lock" class="col-sm-2 control-label">End of Maintenance</label> <div class="col-sm-6"> <input type="date" name="end_lock" class="form-control" id="end_lock" v-model="itemsData.end_lock"> <span class="text-danger">{{ errors.end_lock?errors.end_lock[0]:"" }}</span> </div> </div> <div class="form-group"> <label for="checked" class="col-sm-2 control-label">Release</label> <div class="col-sm-6" id="checked"> <label class="radio-inline"> <input type="radio" id="Yes" value="1" v-model="itemsData.checked"> <span for="Yes">Published</span> </label> <label class="radio-inline"> <input type="radio" id="No" value="0" v-model="itemsData.checked"> <span for="No">Awaiting</span> </label> <span class="text-danger">{{ errors.checked?errors.checked[0]:"" }}</span> </div> </div> <div class="form-group"> <label for="home" class="col-sm-2 control-label">Home Page</label> <div id="home" class="col-sm-6"> <label class="radio-inline"> <input type="radio" id="Yes" value="1" v-model="itemsData.home"> <span for="Yes">Yes</span> </label> <label class="radio-inline"> <input type="radio" id="No" value="0" v-model="itemsData.home"> <span for="No">No</span> </label> <span class="text-danger">{{ errors.home?errors.home[0]:"" }}</span> </div> </div> <div class="row"> <div class="col-md-2 text-right"> <img :src="image" class="img-responsive"> <label>MEDIAS 0/20 - 20 Remaining</label> </div> <div class="col-md-6"> <div class="choose-file"> <i class="fa fa-folder-open"></i> Choose a file <input type="file" v-on:change="onFileChange" class="form-control"> </div> </div> </div> <!-- <div class="form-group"> <div class="col-sm-offset-2 col-sm-6"> <button type="submit" class="btn btn-default">Add</button> </div> </div> --> </form> </div> </div> </div> </div> </div> </template> <script> import config from '../../../config'; export default { data(){ return{ image: '', items: [], itemsData:{ max_children : '', max_adults : '', image : '', max_people : '', min_people : '', title : '', subtitle : '', alias : '', descr : '', facilities : '', stock : '', price : '', home : '', checked : '', rank : '', start_lock : '', end_lock : '' }, errors: { } } }, methods:{ fetchRoom(){ axios.get(config.apiDomain+'/Rooms').then((response)=>this.items = response.data); }, onFileChange(e) { let files = e.target.files || e.dataTransfer.files; if (!files.length) return; this.createImage(files[0]); }, createImage(file) { let reader = new FileReader(); let vm = this; reader.onload = (e) => { vm.image = e.target.result; }; reader.readAsDataURL(file); }, updateItems(e){ axios.put(config.apiDomain+'/Rooms/RoomsEdit/'+this.$route.params.id, this.itemsData).then(response=>{ this.this.itemsData = ""; this.$router.push('/admin/rooms'); }).catch(error=>{ this.errors = error.response.data; }); axios.post(config.apiDomain+'/Rooms/imageupload', {image: this.image, imgurl: config.apiDomain+'/images/rooms'}).then(response=>{ this.errors = ""; }).catch(error=>{ this.errors = error.response.data; }); } }, created: function() { this.fetchRoom(this.$route.params.id); } } </script>

Routes.js:

import FrontEndHome from './components/fontend/Home.vue'; import FrontEndCheck from './components/fontend/Check.vue'; import AdminHome from './components/Backend/Home.vue'; import AdminRooms from './components/Backend/Rooms/Rooms.vue'; import AdminCreate from './components/Backend/Rooms/RoomsCreate.vue'; import AdminRoomsEdit from './components/Backend/Rooms/RoomsEdit.vue'; import AdminRates from './components/Backend/Rates/Rates.vue'; import AdminRatesCreate from './components/Backend/Rates/RatesCreate.vue'; import AdminTaxes from './components/Backend/Taxes/Taxes.vue'; import AdminTaxesCreate from './components/Backend/Taxes/TaxesCreate.vue'; import AdminCoupons from './components/Backend/Coupons/Coupons.vue'; import AdminCouponsCreate from './components/Backend/Coupons/CouponsCreate.vue'; import AdminFacilities from './components/Backend/Facilities/Facilities.vue'; import AdminFacilitiesCreate from './components/Backend/Facilities/FacilitiesCreate.vue'; export const routes = [ { path: '/', component: FrontEndHome }, { path: '/check', component: FrontEndCheck }, { path: '/admin', component: AdminHome }, { path: '/admin/rooms', component: AdminRooms }, { path: '/admin/rooms/create', component: AdminCreate }, { path: '/admin/rooms/edit', component: AdminRoomsEdit }, { path: '/admin/rates', component: AdminRates }, { path: '/admin/rates/create', component: AdminRatesCreate }, { path: '/admin/taxes', component: AdminTaxes }, { path: '/admin/taxes/create', component: AdminTaxesCreate }, { path: '/admin/coupons', component: AdminCoupons }, { path: '/admin/coupons/create', component: AdminCouponsCreate }, { path: '/admin/facilities', component: AdminFacilities }, { path: '/admin/facilities/create', component: AdminFacilitiesCreate } ];

I have to edit and update the values from the above codes.. The router link is directing to the edit page but i am not getting the value that was already in rooms.vue.

I am trying to pass a variable (here, externalVar) to a component, directly when initializing. But I can't find how to do it (probably not understanding documentation well :/ ). What is the correct way to do it?

The initialization :

var externalVar = "hello world" const leftmenu = new Vue({ el: "#left-menu", template: "<CLM/>", components: {CLM}, variableToPass: externalVar });

The component I am initializing here is defined like this (getting back variableToPass in data):

<template src="./template-l-m.html"></template> <script> import draggable from 'vuedraggable'; export default { name: 'leftmenu', components: { draggable }, data () { return { jsonObject: this.variableToPass, } }, [ ... ] </script>

But then , when I am trying to use this.jsonObject, it says that it's undefined. What am I doing wrong ?

I am new with vue.js and electrons and currently created my first app, now i just need to include my external css and js after reading some tutorials the i found out that best way to do this is importing it on my man.js, but failed on that part, is there another way of doing this other that importing it on my main.js? Any suggestion would be great thanks!

Already done below installations.

npm install bootstrap --save npm install jquery --save

My main.js code.

import Vue from 'vue' import axios from 'axios' import App from './App' import jQuery from 'jquery' global.jQuery = jQuery let Bootstrap = require('bootstrap') import 'bootstrap/dist/css/bootstrap.css' import store from './store' import VueRouter from 'vue-router' import test from './components/test' import Users from './components/users' Vue.use(VueRouter) const router = new VueRouter({ mode: 'history', base: __dirname, routes:[ {path: '/', component: Users}, {path: '/test', component: test} ] }); if (!process.env.IS_WEB) Vue.use(require('vue-electron')) Vue.http = Vue.prototype.$http = axios Vue.config.productionTip = false new Vue({ router, template: ` <div id="app"> <ul> <li><router-link to="/">Users</router-link></li> <li><router-link to="/test">Test</router-link></li> </ul> <router-view></router-view> </div> `, }).$mount('#app')

MY error is below, i am using electron-vue to make a native app.

@ multi ./.electron-vue/dev-client ./src/renderer/main.js

I am working on this project which is an open source Vue.js and Firebase based CMS tamiat CMS. I want to integrate an admin section in it. After some search on google I found vue-admin which is vue.js based too.

Now, I am wondering How to integrate the two templates in order to both of them will run on the same vue instance ? is there any possible solution ?

I'm doing a filter page and I need to store the filter name and the filter value, for that purpose, I have a structure like that:

data: { attributes: { checkboxes: [], strings: { keys: [], values: [] }, ...

and the HTML would look like that (btw I'm using Laravel Blade too but that's not relevant here):

... @if ($atribut->type == 'checkbox') <label class="btn btn-default" for="{{ $atribut->tag }}"> {{ $nom }} <input v-model="attributes.checkboxes" class="badgebox" id="{{ $atribut->tag }}" type="checkbox" value="{{ $atribut->id }}"><span class="badge">&check;</span></label> <br> <br> @endif @if ($atribut->type == 'string') @php $nom = obj_array_find(DB::table('literals')->get(), $atribut->nom, 'id')->cat @endphp <input type="hidden" v-model="attributes.strings.keys" value="{{ $atribut->id }}"> {!! Form::text($atribut->tag, null, ['class' => 'form-control', 'placeholder' => $nom, 'v-model' => 'attributes.strings.values']) !!} <br> @endif ...

The question is, is it possible to have a something like that:

<input type="hidden" v-model.key="attributes.strings" value="{{ $atribut->id }}"> {!! Form::text($atribut->tag, null, ['class' => 'form-control', 'placeholder' => $nom, 'v-model.value' => 'attributes.strings]) !!}

the questions should be enough clear :). But I can see that something someone use:

<button @click="function()">press</button>

Someone use:

<button v-on:click="function()">press</button>

But really what is the difference between the two (if exists)

I have a vue application where i am using chart.js and i am trying to dynamically populate the chart from data in a table with a row click event. I have the data displaying in the chart but i am trying to figure out how i could get random colors into it any suggestions would be helpful thank you. This is what the function looks like and the chart.

Function:

var ctx = document.getElementById("myDoughnut"); var myDoughnut = new Chart(ctx, { type: 'doughnut', data: { labels: this.getAnalyticRow[0].rowNames, datasets: [{ data: this.getAnalyticRow[0].rowData, backgroundColor: [ 'rgba(255, 99, 132, 0.6)', 'rgba(54, 162, 235, 0.6)', 'rgba(255, 206, 86, 0.6)', 'rgba(75, 192, 192, 0.6)', 'rgba(153, 102, 255, 0.6)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 2, }] }, options: { responsive: true, defaultFontColor: '#ffffff', }

Chart:

Not a duplicate: already check this question and this one; didn't get any clue. Some of similar ones are related to Laravel.

Can't figure out what was changed in my project, making [Vue warn]: Cannot find element: #app appear.

The structure:

index.html: hosts the <div id="app">:

[HEADER] <div id="app" v-cloak></div> [FOOTER]

main.js:

import Vue from 'vue'; import Users from './Users.vue'; import App from './App.vue'; // (1) import Home from './Home.vue'; // (2) import VueRouter from 'vue-router'; // (3) Vue.use(VueRouter); const routes = [ {path: '/users', component: Users}, {path: '/', component: Home} ]; const router = new VueRouter({ routes }); new Vue({ el: '#app', router, render: h => h(App) })

App.vue:

<template> <router-view> </router-view> </template> <script> export default { data () { return { message: "Test message" } } } </script>

Home.vue:

<template> [contents] [router-links] </template> <script> [data] [methods] </script>

Whenever I get to the index page, the Vue warn gets displayed. One of attached questions I checked suggested that the DOM element is not ready when scripts are running. Already tried to switch order of imports in main.js (App, Home and VueRouter, as marked in comments), but with no success.

Any idea where to look for solution?

Trying to generate a dynamic URL for a hyper-link, so that users can navigate to a specific customer page by ID.

<tr v-for="item in items" :key="item.id"> <td><a v-bind:href="generateCustomerUrl(item.id)" title="Navigate to Customer page"> {{ item.id }} </a> </td> ...

The function is declared in the module's methods

/** * Private methods for this vue class * **/ methods: { clearSearch() { this.filters.search = ''; EventBus.fire('apply-filters', this.serializedFilter); }, generateCustomerUrl(id) { return "/admin/customers/" + id; } },

However vue js errors saying

vm.generateCustomerUrl is not a function Stack trace:

How can I generate a URL dynamically for Vue.js 2.0 without using interpolation (which is disabled).

Why does filter do not work?

Error says: [Vue warn]: Failed to resolve filter: uppercase.

Not sure why but filter is not working. Also, is this the best way to code this functionality? Are there any ways to do this, or the suggested ways? I'm not sure about using the $refs, maybe I can do this simpler, but with effective use of reusable components.

I'm trying to emulate an Ajax Response by using random message and status instead.

Link: JSBIN

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div id="app"> <login-alert ref="refalert"></login-alert> <p> <button @click="showme">Random Alert</button> </p> </div> <script src=" https://unpkg.com/vue"></script> <template id="template-alert"> <div v-if="showAlert"> <div :class="'alert alert-'+alertType+' alert-dismissible'" transition="fade"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true" v-on:click="close">&times;</button> <h4>{{title|uppercase}}!</h4> {{message}} </div> </div> </template> <script> Vue.component('login-alert', { template: '#template-alert', data: function() { return { alertType : null, title : null, message : null, showAlert : false } }, methods: { close: function() { this.alertType= null; this.title= null; this.message= null; this.showAlert= false; }, open: function(type, message) { this.alertType= type; this.title = type; this.message= message; this.showAlert= true; } } }); var app = new Vue({ el: '#app', methods: { showme: function() { var randomStatus = ['error', 'warning', 'success']; var randomMessage = ['Lorem Ipsum', 'Adolor Sit Amet', 'Abed Meepo']; var status = randomStatus[Math.floor(Math.random() * randomStatus.length)]; var message = randomMessage[Math.floor(Math.random() * randomMessage.length)]; this.$refs.refalert.open(status,message); } } }); </script> </body> </html>

I've bound a computed property to the src of an image tag in Vue.js. The code appears to correct, but does not work consistently which is baffling to me. Additionally, switching to the /about page and back to the main books page always properly displays the images.

Any information as to what could be causing this issue would be wonderful!

A hosted version of the app is available here: https://books.surge.sh/

The relevant code for the book-item component.

The full Github repo.

The code generating the book component and image src is as follows:

<template> <article class="book-item"> <img :src="imgSrc" class="image"> <div class="meta"> <div class="name">{{ book.title }}</div>* <div class="author">{{ book.author }}</div> </div> <div class="description"> <p v-html="book.description"></p> </div> </article> </template> <script> export default { props: ['book'], computed: { imgSrc() { return `/static/img/${this.book.image}`; } } }; </script>

Partially displayed book covers on initial load: