Software
isset not working with AJAX
No matter what I've tried, isset doesn't work when I make a post call with Vue Resource. It only works when I turn off preventDefault and go directly to the PHP page.
JS:
this.$http.post('http://localhost/musicdatabase/addalbum.php', new FormData($('#submitalbum'))) .then(data => console.log(data.body));PHP:
if(isset($_REQUEST['submit'])){ echo json_encode($_REQUEST); }HTML:
<form class="col s12" id="submitalbum" method="post" action="addalbum.php"> <div class="row"> <div class="input-field col s6"> <input name="artist" placeholder="Artist" type="text"> </div> <div class="input-field col s6"> <input name="title" placeholder="Title" type="text"> </div> </div> <div class="row"> <div class="input-field col s12"> <input name="genre" placeholder="Genre"> </div> </div> <div class="row"> <div class="input-field col s12"> <input id="released" type="number" name="released" placeholder="Year Released"> </div> <button @click.prevent="addNewAlbum" type="submit" name="submit" class="waves-effect waves-light btn">Submit</button> </div> </form>How to pass dynamic argument in vuejs custom directive
E.g. dynamic_literal = 'ok' such that in custom directive:
Vue.directive('directive', { bind(el, binding) { binding.arg // should return 'ok'How can I use dynamic_literal as a variable or a constant whose value should be assigned under data or prop.
I tried with v-directive:{{dynamic_literal}} and :v-directive="dynamic_literal" but no use.
Thanks in advance!
Vue Trigger watch on mounted
I have a vue component below that I want to watch to trigger on when it's getting mounted. How do I do that?
Vue.component('check-mark', { name: 'check-mark', template: ` <input :value="value"> `, props: { value: { type: String, required: true, }, }, mounted: async function () { //trigger this.value watch() here }, watch: { value: function (value) { if (value == 'Y') { this.class = 'checked'; } else { this.class = 'unchecked'; } }, }, });How to divide Vue.js code?
I'm discovering that I find Vue.js extremely confusing and even frustrating to work with: I have a Node.JS project with WebPack that has HTML, JS and CSS files (see the code below). When I try to execute the JS as written, it works. However, it has the flaw that the Vue.material.setCurrentTheme('orange'); JS line sets the theme globally as I understand it, which is undesirable.
To fix this, I figured I could remove the JS line above and add a md-theme="orange" attribute to the <md-toolbar> element in the HTML.
This results in the theme not being applied at all, as well as an innocent looking warning in the browser JS console: The theme 'orange' doesn't exists. You need to register it first in order to use. I've figured out that this basically means that the JS is loaded too late and thus when the <md-toolbar> element is loaded the theme is not yet defined.
Ok fair enough, so I change the $(document).ready(function () { ... }); JS block to remove the waiting for the document to be ready, so that only the var App = ... and the theme registration remain, and live on the top-level of the JavaScript file. Now I get a hard error in the browser JS console: client.gen.js:16329 [Vue warn]: Cannot find element: #AvApp
I have 2 questions about this:
How do I fix this? The docs have been no help so far.
Why is Vue.JS defined to need circular dependencies like that, at least when using WebPack? It makes totally no sense whatsoever. In fact this seems to have negative value as it is actively preventing me from getting work done rather than helping me.
HTML:
<!doctype html> <html> <head> <!-- Use Roboto and Google Icons from Google CDN --> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- Load the generated client code --> <script src="./client.gen.js"></script> <title>Foo</title> <link rel="shortcut icon" href="img/favicon.png" type="image/x-icon"> <link rel="icon" href="img/favicon.ico" type="image/x-icon"> </head> <body > <div id="AvApp"> <!-- nav bar --> <md-toolbar> <md-button class="md-icon-button md-raised md-accent"> <md-icon>more_vert</md-icon> </md-button> <h1 class="md-title center">Foo</h1> <md-button class="md-icon-button md-raised md-primary"> <md-icon>more_vert</md-icon> </md-button> </md-toolbar> <!-- main content --> <div> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, rerum? Error sunt, aperiam dolores, atque expedita molestiae tenetur. Quis eveniet accusamus velit explicabo adipisci reiciendis modi eaque quas, officia excepturi. </p> </div> </div> </body> </html>JS:
/*jshint sub:true, esversion: 6 */ import d3 from 'd3'; import $ from 'jquery'; import _ from 'lodash'; import moment from 'moment'; import q from 'q'; import Vue from 'vue'; import VueMaterial from 'vue-material'; import './amplify-viz.css'; import 'vue-material/dist/vue-material.css'; Vue.use(VueMaterial); function log(msg) { console.log(`\n[CLIENT] ${msg}`); } $(document).ready(function () { var App = new Vue({ el: '#AvApp' }); Vue.material.registerTheme({ default: { primary: { color: 'light-green', hue: 700 }, accent: 'red', background: '#263238' }, teal: { primary: 'blue', accent: 'pink', background: 'yellow' }, orange: { primary: { color: 'orange', hue: 700 }, accent: { color: 'deep orange', hue: 900 } } }); Vue.material.setCurrentTheme('orange'); });CSS:
.center { text-align: center; flex: 1; }Show data instead of object in form value
I've got a vue.js component that looks like this:
<template> <div> <input type="hidden" v-for="select in selected" :name="prpName + '[]'" :value="select"> <multiselect v-model="selected" </multiselect> </div> </template>I use this in blade:
<multiselect></multiselect>The problem now is that when I submit the form in my request I see this:
"relations_internal" => array:1 [▼ 0 => "[object Object]" ]But I want not an object but the real data. I know this is a newbie question but I can't figured it out.
Vue router - cannot load component dynamically - Unexpected Token
I am trying to dynamically load the Login component for my login route. When building webpack I get:
SyntaxError: Unexpected TokenThe Login.vue component works fine if I import and assign it the same way I do the Home route.
I'm baffled because I believe this code should work based on this blog.
The line that fails below is:
component: () => import('../components/Login.vue'), router.js import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../components/Home.vue' Vue.use(VueRouter) export default new VueRouter({ mode: 'history', routes: [ { path: '/', name: 'home', component: Home, meta: { permission: "anonymous", }, }, { path: '/login/', name: 'login', component: () => import('../components/Login.vue'), meta: { permission: "anonymous", }, }, ], })vue.js: v-model not working for select with v-for
I have started using vue, so this might be really easy...
Here's my scenario:
var app = new Vue({ el: "#app", data: { utilizador:{ nome:"Luis Abreu", funcoes:[ { secretaria: {idSecretaria:2,nome:"YYY"} } ]}), secretarias: [{idSecretaria:1,nome:"XXX"},{idSecretaria:2,nome:"YYY"},{idSecretaria:3,nome:"Tests 2"}] }});
And I have something like this for generating the list of funcoes in the HTML:
<tr v-for="(f, pos) in utilizador.funcoes"> <td> <select class="form-control" v-model="f.idSecretaria"> <option v-for="s in secretarias" :value="s.idSecretaria"> {{s.nome}} </option> </select> </td> </tr>As you can see, the dropbox is being filled from a data property (and that part is working well). Now, the problem is that the select does not show anything selected.
How can I solve this?
Thanks.
Vue resource inside Vuex action - "this is null" error
I am trying to make a GET call from inside a store action. However my Vue.http.get() call throws a TypeError "this is null".
I am at a total loss, and I haven't found anyone else with this specific issue elsewhere. Any help would be appreciated. Thanks
Walkthrough- User navs to /login/
- Submits login
- Authenticated and token received
- Dispatches action to save token and retrieve profile
- Error occurs when trying to use Vue.http inside action
vuejs - load more data from backend after button click
I am new in vue.js. I have couple of elements on my sites that came from laravel backend. I want vue to display as default only two and load more elements after button click on the same site. Do you have some hint for me how to do that?
This is Blade.php file
@foreach(array_merge($specialoffers1,$specialoffers2,$specialoffers3) as $offer) <a href="{{URL::action(" BPM\Controllers\Web\EstateController@getEstateDetails ", array('type' => HTML::estateTypeUrlSlug($offer), 'oferta' => HTML::estateUrlSlug($offer)))}}"> <div style="background-image:url({{ $offer->getFirstPicture() }})"> <figcaption> <span> @if(strlen($offer->getLocationCity())>21) {{ substr($offer->getLocationCity(),0,strpos($offer->getLocationCity(),' ')) }} @else {{ $offer->getLocationCity() }} @endif </span> @if($offer->getLocationStreet()) <p> <span> @if(strlen($offer->getLocationStreet())>30) {{ substr($offer->getLocationStreet(),0,strpos($offer->getLocationStreet(),' ',15)) }} @else {{ $offer->getLocationStreet() }} @endif </span> </p> @endif </figcaption> </div> </a> <a href="{{URL::action(" BPM\Controllers\Web\EstateController@getEstateDetails ", array('type' => HTML::estateTypeUrlSlug($offer), 'oferta' => HTML::estateUrlSlug($offer)))}}"> <span>{{$offer->getOfferType()}}</span> <span>{{ HTML::formatArea($offer->getArea()) }}</span> @if($offer->getApartmentRooms()) @if($dictionary == 1) <span>{{ $offer->getApartmentRooms() }} @if($offer->getApartmentRooms()== 1) pokój @elseif ($offer->getApartmentRooms() > 1 && $offer->getApartmentRooms() < 5) pokoje @else pokoi @endif</span> @else <span>{{ $offer->getApartmentRooms() }} @if($offer->getApartmentRooms()== 1){{DictionaryHelper::getValue($dicPack,$dictionary,'room')}} @else {{DictionaryHelper::getValue($dicPack,$dictionary,'rooms')}} @endif</span> @endif @else <span> </span> @endif <span>{{ HTML::formatPrice($offer->getPrice(),$offer->getPriceCurrency()) }}</span> </a> @endforeachFullpage scroll for Vue?
Is there an analogue library fullpage.js for Vue? Need a component that can scroll through components as well as for fullpage.js.
VueJS: apply mixin to async component
I am using Webpack 2 and importing my components via special require syntax. Here is code:
// app.js var myMixin = { created: function () { console.log('mixin hook called'); } } Vue.component("foo", resolve => { require(['./components/foo.vue'], resolve); });I want to apply myMixin to foo component, but how to do that? Global mixin apply to all components, but that's not what I need.
Firefox for iOS Offers New and Improved Browsing Experience with Tabs, Night Mode and QR Code Reader
Here at Firefox, we’re always looking for ways for users to get the most out of their web experience. Today, we’re rolling out some improvements that will set the stage for what’s to come in the Fall with Project Quantum. Together these new features help to enhance your mobile browsing experience and make a difference in how you use Firefox for iOS.
New Tab Experience
We polished our new tab experience and will be gradually rolling it out so you’ll see recently visited sites as well as highlights from previous web visits.
Night Mode
For the times when you’re in a dark room and the last thing you want to do is turn on your cellphone to check the time – we added Night Mode which dims the brightness of the screen and eases the strain on your eyes. Now, it’ll be easier to read and you won’t get caught checking your email.
https://blog.mozilla.org/wp-content/uploads/2017/07/NightMode12-2.mp4
QR Code Reader
Trying to limit the number of apps on your phone? We’ve eliminated the need to download a separate app for QR codes with a built-in QR code reader that allows you to quickly access QR codes.
Feature Recommendations
Everyone loves shortcuts and our Feature Recommendations will offer hints and timesavers to improve your overall Firefox experience. To start, this will be available in US and Germany.
To experience the newest features and use the latest version of Firefox for iOS, download the update and let us know what you think.
We hope you enjoy it!
The post Firefox for iOS Offers New and Improved Browsing Experience with Tabs, Night Mode and QR Code Reader appeared first on The Mozilla Blog.
Firefox Focus for Android Hits One Million Downloads! Today We’re Launching Three New User-Requested Features
Since the launch of Firefox Focus for Android less than a month ago, one million users have downloaded our fast, simple privacy browser app. Thank you for all your tremendous support for our Firefox Focus for Android app. This milestone marks a huge demand for users who want to be in the driver’s seat when it comes to their personal information and web browsing habits.
When we initially launched Firefox Focus for iOS last year, we did so based on our belief that everyone has a right to protect their privacy. We created the Firefox Focus for Android app to support all our mobile users and give them the control to manage their online browsing habits across platforms.
Within a week of the the Firefox Focus for Android launch, we’ve had more than 8,000 comments, and the app is rated 4.5 stars. We’re floored by the response!
Feedback from Firefox Focus Users“Awesome, the iconic privacy focused Firefox browser now is even more privacy and security focused.”
“Excellent! It is indeed extremely lightweight and fast.”
“This is the best browser to set as your “default”, hands down. Super fast and lightweight.”
“Great for exactly what it’s built for, fast, secure, private and lightweight browsing. “
New FeaturesWe’re always looking for ways to improve and your comments help shape our products. We huddled together to decide what features we can quickly add and we’re happy to announce the following new features less than a month since the initial launch:
- Full Screen Videos: Your comments let us know that this was a top priority. We understand that if you’re going to watch videos on your phone, it’s only worth it if you can expand to the full size of your cellphone screen. We added support for most video sites with YouTube being the notable exception. YouTube support is dependent on a bug fix from Google and we will roll it out as soon as this is fixed.
- Supports Downloads: We use our mobile phones for entertainment – whether it’s listening to music, playing games, reading an ebook, or doing work. And for some, it requires downloading a file. We updated the Firefox Focus app to support files of all kind.
- Updated Notification Actions: No longer solely for reminders to erase your history, Notifications now features a shortcut to open Firefox Focus. Finally, a quick and easy way to access private browsing.
We’re on a mission to make sure our products meet your needs. Responding to your feedback with quick, noticeable improvements is our way of saying thanks and letting you know, “Hey, we’re listening.”
You can download the latest version of Firefox Focus on Google Play and in the App Store. Stay tuned for additional feature updates over the coming months!
The post Firefox Focus for Android Hits One Million Downloads! Today We’re Launching Three New User-Requested Features appeared first on The Mozilla Blog.
How to set vue data to the value of a form?
I have a flask page that is for editing blog posts. It has the following vue:
<form method="POST" action="{{ url_for('edit',itemid=item.id) }}" id="text-input"> {{ form.csrf_token }} <div style="margin-left:30px;margin-top:20px;"> Title: {{ form.title }} </div> <br/> <div id="editor"> Content: {{ form.content( **{':value':'input','@input': 'update'}) }} <div v-html="compiledMarkdown"></div> </div> <br/> Category: {{ form.category|safe }} <br/> <input type="submit" value="Save"> </form> <script> new Vue({ el: '#editor', data: { input: "starting data" }, computed: { compiledMarkdown: function () { return marked(this.input, { sanitize: true }) } }, methods: { update: _.debounce(function (e) { this.input = e.target.value }, 300) } }); </script>What I would like to do is have a starting value for input based on something sent in by flask. Basically I would change input: "starting data" to input: {{ form.content.data }}. However, when I do this, it stops updating the input when I change the text in the box. I think I am kind of hardcoding the data to be whatever what in form.content.data as opposed to a string.
How can I pass this in so that it starts with the form.content.data value yet is still changeable?
How to remake html + vuejs code so that it works on a page with several posts?
There is fully working code on the post editing page
<a href="#" v-on:click="confirm = 1" v-show="!confirm" class="btn btn-xs btn-danger">Delete</a> <span v-if="confirm"> Are you sure? <a href="{{ route('admin:news:delete', $news->id) }}" class="btn btn-xs btn-danger">Yes</a> <a href="#" v-on:click="confirm = 0" class="btn btn-xs btn-success">No</a> </span>
var app = new Vue({ el: '#app', data: { confirm: 0 } });
I need the same functionality only on the page where the information for each post is displayed in the table. That is, if you see 10 lines, then you need a button for each line.
I tried to do this:
<a href="#" v-on:click="confirm[{{ $news->id }}] = 1" v-show="!confirm[{{ $news->id }}]" class="btn btn-xs btn-danger">Delete</a> <span v-if="confirm[{{ $news->id }}]"> Are you sure? <a href="{{ route('admin:news:delete', $news->id) }}" class="btn btn-xs btn-danger">Yes</a> <a href="#" v-on:click="confirm[{{ $news->id }}] = 0" class="btn btn-xs btn-success">No</a> </span> And this:
<a href="#" v-on:click="confirm[{!! $news->id !!}] = 1" v-show="!confirm[{!! $news->id !!}]" class="btn btn-xs btn-danger">Delete</a> <span v-if="confirm[{!! $news->id !!}]"> Are you sure? <a href="{{ route('admin:news:delete', $news->id) }}" class="btn btn-xs btn-danger">Yes</a> <a href="#" v-on:click="confirm[{!! $news->id !!}] = 0" class="btn btn-xs btn-success">No</a> </span>
var app = new Vue({ el: '#app', data: { confirm: [] }, created: function () { var items = this.confirm; var news = {!! $news->toJson() !!} news.data.forEach(function(element) { items[element.id] = 0; }); } });
But it does not work.
I think this is a common task and it has already been done many times, but I am new in vuejs and I don't know how to implement it.
Help me, please!
Vue search Ajax response array while typing
I'm trying to filter a list when typing to text box which I get from Ajax call. The problem seems to be that the filter is applied before Ajax is ready.
HTML:
<table> <tr v-for="food in filteredItems"> <td>{{ food.name }}</td> <td>{{ food.energy }}</td> </tr> </table>helpers/index.js:
export default { getFoods() { return Vue.http.get('http://localhost:3000/foods/allfoods').then((response) => { return response.data; }); } }Vue component:
import helpers from '../helpers' export default { name: 'Search', mounted() { helpers.getFoods().then((response) => { this.foodData = response; }); }, data() { return { searchTerm: '', foodData: [], } }, computed: { filteredItems() { return this.foodData.filter(function(food){return food.name.toLowerCase().indexOf(this.searchTerm.toLowerCase())>=0;}); } }When I load the page or start typing I get
'TypeError: undefined is not an object (evaluating 'this.searchTerm')'.
Everything works perfectly if I hard-code the foodData array.
Have I misunderstood something and/or what am I doing wrong?
How can I call a method after the loops(more than 1 loop) complete on vue js?
My vue component like this :
<template> <div class="row"> <div class="col-md-3" v-for="item1 in items1"> ... </div> <div class="col-md-3" v-for="item2 in items2"> ... </div> <div class="col-md-3" v-for="item3 in items3"> ... </div> </div> </template> <script> export default { ... computed: { items1() { const n = ... // this is object return n }, items2() { const n = ... // this is object return n }, items3() { const n = ... // this is object return n } }, ... } </script>If the three loop complete, I want to call a method
So the method is executed when the three loop completes
How can I do it?
PHP sends back empty body
I'm trying to send form data from Vue Resource to my PHP page. I can see it displayed on the PHP page but when I send it back as JSON I get an empty response. Would appreciate some help.
PHP:
if(isset($_POST['submit']){ echo json_encode($_POST); }JS:
this.http.post('addalbum.php', new FormData($('#submitalbum'))) .then(data => console.log(data));Serial communication with arduino from electron-vue
my OS - Linux Ubuntu 16.04 and I have the desktop application made with Electron-Vue
For example, I want to add button with function of sending data to arduino uno by serial port. But I cannot import serialport module to my Vue component. Also, I tried to use serialport-electron module, but result is the same. Is there any way to solve this problem? I think that my code is not important here, but if somebody will ask, I will attach it to this post. Thank you
Vue.js set data outside component
I've got a component and I would like to set a data item outside the component.
How would I do this with a directive?
I was thinking about something like this:
Vue.directive('init', { bind: function(el, binding, vnode) { vnode.context[binding.arg] = binding.value; } });But that binds to v-model I need to bind to a data item.
So I can say:
<date-picker prp-name="date_of_birth" v-init:date="'old('date_of_birth')'"></date-picker>