Software

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> &nbsp; </span> @endif <span>{{ HTML::formatPrice($offer->getPrice(),$offer->getPriceCurrency()) }}</span> </a> @endforeach

Is there an analogue library fullpage.js for Vue? Need a component that can scroll through components as well as for fullpage.js.

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.

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.

What’s new in 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.

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 Features

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

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?

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!

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?

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?

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));

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

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>

I am trying to insert something like this into my website: https://vuejs.org/v2/examples/

In their example, the html looks like:

<div id="editor"> <textarea :value="input" @input="update"></textarea> <div v-html="compiledMarkdown"></div> </div>

my flask form looks like:

<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/> Content: {{ form.content(cols="80", rows="50", id='larger')|safe }} <br/> Category: {{ form.category|safe }} <br/> <input type="submit" value="Save"> </form>

so somehow I need to change the line Content: {{ form.content(cols="80", rows="50", id='larger')|safe }} to indicate that it is using :value="input" and @input="update" . How can I do this? Do I do it in the Form definition on the server? Or perhaps with jquery once the page has been loaded?

I'm having what appears to be a rendering problem in Chrome.
I have a scrollable ul block that contains ~230 li items, each 80px tall, that is clipped by a white rectangle around the 70th item, until the end. The clipping area does not appear in the inspector, it is purely visual.
The hidden content is also still perfectly accessible and clickable, like normal.

The problem only appears in Chrome (MacOS), not even Chromium, and depends on the height of the viewport. Toggling the inspector, for example, will change the rendered height without any logic.

I tried to toggle pretty much every CSS that is applied to the related divs, without any success. I can't really post any code here since I don't know which part is responsible, but I'd be happy to if you have any clue.

Also, I'm using vue.js; the items are rendered by a v-for loop, I don't know if this is relevant here.

The issue I am having is similar to this question: Vue.js/vuex ajax update components with ajax state

First, I want to load some static topojson file to the store. This happens on mount of the main vue instance in main.js:

new Vue({ ... mounted () { this.$store.dispatch('topojsonStore/loadMunicipalityTopo', 'static/topojson_data/gem_2014.topojson') } })

This gets loaded in the store without problems. In the component where I want to visualize this data, I can access this data from the store just fine:

computed: { getMunicipalityTopo () { return this.$store.getters['topojsonStore/getMunicipalityTopo'] } }

I put the drawing functionality under a method in the component:

methods: { plotMunicipalities () { var width = 650, height = 770 var path = d3.geoPath() .projection(null) // TODO: fix projections var svg = d3.select('#map').append('svg') .attr('width', width) .attr('height', height) // Load topojson from store let topoJsonData = this.getMunicipalityTopo svg.append('path') .attr('class', 'municipalities') .datum(topoJsonData) .attr('d', path) }

This works fine if I attach this to a click event in the template, like so:

<button @click="plotMunicipalities()">Plot municipalities</button>

I want, however, to draw this stuff automatically when the page is loaded, and not after a click event. This is where I run into the asynchronicity issues... Putting this in the component, for example, does not work, as the data in the store is still not loaded:

mounted () { this.plotMunicipalities() }

How should I go from here? How can I trigger the function when the data in the store is loaded? I should mention that later, different layers will be loaded. Some layers will be unchangeable by the user, but for this particular layer it will be possible for the user to change it. Should I use a different workflow for these different layers?

I have a problem with documents, i want to download for the user after he started a export in my client.

The generation of the documents works fine and so the first part of my code. so everything until the last for loop is just for context. the first document in the for loop is downloading but the .click function somehow breaks my for loop. So after this line of code nothing is happening. I also tried to click with jQuery using the id of the new element. I am a little bit lost on this.

object.checked is a Object which contains every entity and a boolean which says if a document should be created.

object.usedFormats is a Object which contains also every entity and a integer which says if it should be created as excel or pdf file.

var docs = [] for(var prop in object.checked) { if(object.checked[prop] == true) { var a = document.createElement('A') if(object.usedFormats[prop + 'Format'] == 0) { a.href = 'api/export?type=' + prop a.target = "_blank" } else if(object.usedFormats[prop + 'Format'] == 1) { //TODO pdf Aufruf sobald Feature verfügbar a.href = 'api/exportpdf?type=' + prop a.target = "_blank" } else { Toastr.error('Falsches Format für Export gewählt!') } docs.push(a) } } for (var i = 0; i < docs.length; i++) { docs[i].id = 'dllink' + i document.body.appendChild(docs[i]) docs[i].click() document.body.removeChild(docs[i]) }

I need import some variable to vue component file. I am doing it this way:

require('imports-loader?myVar=>{test:12345}!./my-com.vue');

As result I get [Vue warn]: Error in render function: "ReferenceError: myVar is not defined"

I know about props, but I want pass namely a variable.

Here "my-com.vue":

<template> <div>...</div> </template> <script> console.log(myVar); // <--- here I get vue warn export default { props:['rows'], ... } </script>

Where I am wrong?
How it possible to import a variable to vue component file?

Thanks in advance.

I want to make the put, delete request with authorization header in vue.js. This is the request.

Put request:

PUT https://api.petbacker.com/v4/account/a20343be-6c9f-11e7-8c94-42010af001bb HTTP/1.1 User-Agent: Fiddler Host: api.petbacker.com Content-Length: 82

{ "accountInfo" :{ "email": "iwillverifyemail@petbacker.com" } }

Delete request:

DELETE https://api.petbacker.com/v4/account/a20343be-6c9f-11e7-8c94-42010af001bb/logout HTTP/1.1 User-Agent: Fiddler Host: api.petbacker.com Content-Length: 82 Authorization: RA a20343be-6c9f-11e7-8c94-42010af001bb:86aaccf288b7e4dc7692e4030dc96ace3ac009d3

{ "accountInfo" :{ "email": "iwillverifyemail@petbacker.com" } }

This is my code.

this.$http.put(url, accountInfo, {headers: {'Authorization': authHeader}}) .then((response) => { // if succeed }) .catch(e => { console.log(e) }) this.$http.delete(url, accountInfo, {headers: {'Authorization': authHeader}}) .then((response) => { // if succeed }) .catch(e => { console.log(e) })

I'm not sure it is correct. Let me know if you can solve this problem.

vue app is inside : C:\xampp\htdocs\booking

Laravel api is inside : C:\xampp\htdocs\booking-api

FYI : vue app is working on http://localhost:8080

If the folder structure is like above, then app works fine i can call the api like this,

axios.get('http://localhost/booking-api/public/Rooms').then((response)=>this.items = response.data);

But I want booking-api folder inside booking folder. If I place it and if I call the api like below,

axios.get('/booking-api/public/Rooms').then((response)=>this.items = response.data);

It wont work and the console window is like this,

Request URL:http://localhost:8080/booking-api/public/Rooms Request Method:GET Status Code:404 Not Found

So, how can I place api project inside vue app and how to call the api from vue.

Using Vue generated Vuecli with the webpack build. There's a lot of magic going on. What I can't figure out is how to generate the vendor prefixes needed for IE.

This was copied from github issue: https://github.com/vuejs-templates/webpack/issues/421#issuecomment-284322065

vue-loader.conf.js

var utils = require('./utils') var config = require('../config') var isProduction = process.env.NODE_ENV === 'production' module.exports = { loaders: utils.cssLoaders({ sourceMap: isProduction ? config.build.productionSourceMap : config.dev.cssSourceMap, extract: isProduction }), postcss: [ require('postcss-import')(), require('autoprefixer')({ browsers: ['ie >= 9'] }) ] }

Simple container component example

container/index.vue

<template> <div class="container"> <slot></slot> </div> </template> <script> import './index.scss' export default {} </script>

container/index.scss

// this is aliased in webpack.base.conf @import "~styles/base-config"; .container { @include grid(); // this generates display:flex and border-box resets max-width: 100%; margin: 0 auto; }

Expected inline output generated in the head, (but currently don't get -ms-flexbox or -webkit- prefixes )

<style> .container { -webkit-box-sizing: border-box; // not generated box-sizing: border-box; display: -webkit-box; // not generated display: -ms-flexbox; // not generated display: flex; max-width: 100%; margin: 0 auto; } </style>

Related:

• webpack2 vue-cli autoprefixer not work in js file when require scss file？