Software

I can’t seem to figure out how to toggle a class on a specific item in a table. I’m using v-for to loop over the data and printing it out to the user. The goal is to toggle a class when the user clicks on a specific element inside the table. When i’m trying to add a v-bind:class="{'active' : isActive} it just adds that class to all of them and not the specific.

<table> <tbody> <tr v-for="(item, index) in tableFilter" @click="selectThis(item)" v-bind:class="{'active': isActive}"> <td>{{item.Name}}</td> <td>{{item.Address}}</td> <td>{{item.Telephone}}</td> <td>{{item.Email}}</td> </tr> </tbody> </table> export default { data() { return { isActive: false, data: data } }, methods: { selectThis(val, index) { this.isActive =! this.isActive } }, computed: { tableFilter() { return data; } }

I have a simple form that is hidden when the page is loaded, using v-show. I want to focus the input after showing it. I have a button to call a a method that shows the form and sets the focus to the input using this code:

this.newQuestion = true; //(Form whit v-show:newQuestion) this.$refs.questionInput.focus();

The problem is that the form is showed correctly, but the input isn't focused the first time I press the button, if I press it for a second time when the form is in the page it works. I want to know if there is a way to do this, thanks.

I made an component in my SPA application to changing user's password. All my code that is working correctly looks like this:

method which is getting data from form with v-model:

export default { data(){ return { password: { old_password: '', new_password: '', repeat_password: '' } } }, methods: { changePassword() { axios.post('api/change_password', this.password).then( response=> { this.password = { old_password: '', new_password: '', repeat_password: '' }; console.log(response.data.message); }); } } }

then in my controller i receive data and I am validating them in this way:

public function update(Request $request) { $get_user = Auth::user(); $user = User::find($get_user->id); $current_password = $get_user->password; if (Hash::check($request->input('old_password'), $get_user->password) && ($request->input('new_password') == $request->input('repeat_password'))) { $user->update([ 'password' => Hash::make($request->input('new_password')) ]); return response()->json([ 'message' => 'Password updated' ]); } }

My question to you guys is that: Is this method secure? If not could you explain how to do this in better way?

I have built an spa using nodejs and vuejs i want to add an authentication system on it, but i haven't done it before hence need some guidance.

the flow will be like : 1) admin will create the profile of the user 2) An email will be automatically sent to the user using sendgrid 3) the email consits of an url with token which expires in 24 hrs the user when click in specific time will be routed to a page where they can create a new password 4) i was planning to use passport for authentication in my app

Is this the right way to do?, also how do i send the token with url and authenticate when i the user clicks

On September 18, net neutrality experts will gather at the Internet Archive to discuss dire threats to the open web. You’re invited

 

Net neutrality — and the future of a healthy internet — is at stake.

In May, the FCC voted to move forward with plans to gut net neutrality. It was a decision met with furor: Since then, many millions of Americans have written, phoned and petitioned the FCC, demanding an internet that belongs to individual users, not broadband ISP gatekeepers. And scores of nonprofits and technology companies have organized to amplify Americans’ voices.

The first net neutrality public comment period ends on August 30, and the FCC is moving closer to a vote.

So on Monday, September 18, Mozilla is gathering leaders at the forefront of protecting net neutrality. We’ll discuss why it matters, what lies ahead, and what can be done to protect it.

RSVP: The Battle to Save Net Neutrality

Leaders like former FCC Chairman Tom Wheeler and Congressman Ro Khanna will discuss net neutrality’s importance to free speech, innovation, competition and social justice.

This free public event, titled “Battle to Save Net Neutrality,” will feature a panel discussion, reception and audience Q&A. It will be held at the Internet Archive (300 Funston Avenue, San Francisco) from 6 p.m. to 9 p.m. Participants include:

• Panelist Tom Wheeler, former FCC Chairman who served under President Obama and architect of the 2015 net neutrality rules

 

• Panelist and Congressman Ro Khanna (D-California), who represents California’s 17th congressional district in the heart of Silicon Valley. Khanna is a vocal supporter of net neutrality

 

• Panelist Amy Aniobi, TV writer and producer for “Insecure” (HBO) and “Silicon Valley” (HBO), and member of the Writers Guild of America, West

 

• Panelist Luisa Leschin, TV writer and producer for “From Dusk til Dawn” (Netflix) and “Just Add Magic” (Amazon), and a member of the Writers Guild of America, West

 

• Panelist Denelle Dixon, Mozilla Chief Legal and Business Officer. Dixon spearheads Mozilla’s business, policy and legal activities in defense of a healthy internet. She is a vocal advocate for net neutrality, encryption and greater user choice and control online

 

• Panelist Malkia Cyril, Executive Director of the Center for Media Justice. Cyril has spent the past 20 years building the capacity of racial and economic justice movements to win media rights, access and power in the digital age

 

• Moderator Gigi Sohn, Mozilla Tech Policy Fellow and former counselor to FCC Chairman Tom Wheeler (2013-2016). One of the nation’s leading advocates for an open, fair, and fast internet, Sohn was named “one of the heroes that saved the Internet” by The Daily Dot for her leadership in the passage of the FCC’s strong net neutrality rules in 2015

Join us as we discuss the future of net neutrality, and what it means for the health of the internet. Register for this free event here.

The post The Battle to Save Net Neutrality: A Panel with Tom Wheeler, Ro Khanna, Mozilla, Leading TV Producers and Others appeared first on The Mozilla Blog.

In my Vue app I have a large image (170K) that is referenced in CSS as a background image. While my app is initially loading, I would like to show a spinner image or div that waits until this image has finished loading. This seems to be the default behavior in Angular2+, how do I achieve the same with Vue?

I am trying to generate a PDF and open a modal on button click. In the modal the generated PDF should be loaded in the DOM.

To generate the PDF I use axios:

axios.post('/preview', formData) .then(function (response) { this.previewPdf = response.data; }.bind(this));

The generated PDF name is returned in the controller and saved in the this.previewPdf variable.

Then I use laravel URL wildcards to load the PDF in the modal.

<div class="modal-body"> <embed :src="'/preview/' + previewPdf" width="100%" height="600" type='application/pdf'> </div>

And the controller for the route /preview/{pdfname} returns the PDF.

return Storage::disk('local')->get('temppdf/' . $pdfname);

However if I open the modal the PDF seems to be loaded (Network preview):

%PDF-1.7 %���� 2 0 obj <</Type/XObject etc.

But the modal just shows an empty <embed>. Although the src of it is correctly src="preview/pdfname.pdf".

What could cause this issue?

In my component I am looping through a list of items:

<item v-for="item in items" :key="item.id" :item="item"> </item>

I have a getter which based on filter criteria sets state.items:

export const items = state => state.items.filter(item => item.mySex === state.filter);

These are the filter radio buttons:

<input class="form-check-input" type="radio" name="sexFilter" v-model="mySex" id="sex-female" value="1">

And I use watch to dispatch actions:

watch: { mySex(value) { this.$store.dispatch('setFilter', Number(value)); }, },

My problem is that when no filter is applied my getter sends back 0 results. I would like to tackle that without using conditions.

I can't find a way to actually listen to a scroll event in my component. I tried v-on:scroll="scrollFunction" but it doesn't seem to work.

Does anyone know how to do it?

Thanks!

so in my code, I have a computed value today that allows me to access the current day, month and year, using the following code:

today: function() { var currentDate = new Date(); return { day: currentDate.getDate(), month: currentDate.getMonth(), year: currentDate.getFullYear() }; }

Now as far as my understanding goes, the difference between computed properties and methods is that computed props are cached and only recalculated if their dependencies (for example, a normal property) changed, while methods are fully calculated every time.

Now in my case, there are no dependencies. So, if on initialization, it's the 24th Dec 2017, late at night, and I access today.day a few minutes later when it's the 25th - will I be given the original value or will the value be recalculated?

Technically, no properties are dependencies of this computed property, so nothing changed. According to the following extract from the official guide, today.day should still equal 24.

However, the difference is that computed properties are cached based on their dependencies. A computed property will only re-evaluate when some of its dependencies have changed.

I'm building an app in Vue.js with rest api (server) is in Java.

I implemented Localization using https://kazupon.github.io/vue-i18n and it seems to work fine.

The problem i'm facing now is that when I'm getting data from the server (ie: list of cities) which have to be localizated also; I don't know which approach is better for this.

I thought of few options, having a db table like "id | name", (name has to be localized) the name value could be in json.

{"en": "English name"}, {"fr": "French name"}, {etc...}

Then in Vue.js I could apply list.map and filter by the current locale. But for making dynamic filtering on that set of data I'm kinda stuck.

Do you think that's a good approach? Would it be better to ask the server already in the current locale in each request?

Any ideas?

Thanks in advance!

I am trying to pass a class as a prop:

export default class ModelForm extends Vue { @Prop() model: Model item: Model = new this.model() }

This does not work and typescript wants me to pass the constructor instead of the class:

export default class ModelForm extends Vue { @Prop() modelConstructor: Function item: Model = new this.modelConstructor() }

Is there a way to pass the class itself and then instantiate it?

Hi!
I'm currently building a large scale VueJs Application and would like to set it up as a Multipage Application, where I have two different Sections (Admin + User), that I would like to load independently, yet share some Components and Services. How would I go about building this sort of Architecture, any Help would be appreciated.

Setting up multiple Webpack Entries as described here: (https://github.com/Plortinus/vue-multiple-pages) works for me but the Problem I'm now encountering is the Authentification since the Vuex Store is deleted on reload/redirect.

Did anyone come across this Problem in the Past? Thanks in Advance

I'm starting a new large-scale application and after hearing a lot about VueJS + Laravel combination i thought of using it. I followed Laracasts' Learn Vue 2: Step By Step series and some tutorials to understand how it works.

But have few questions in mind:

1. Why do we even need to use Vue with Laravel. I understand that we can create component like <user-profile></user-profile> in Vue, and then use it in Laravel Blade. But it looks like over-complication things? Firstly we pass data from controller to blade, and then further pass it to vue. Why do we need to do that?

2. Laravel and Vue both have their own routing system. Which one to use?

I'm new to vue.js and have this list of items:

<div class="jokes" v-for="joke in jokes"> <strong>{{joke.body}}</strong> <small>{{joke.upvotes}}</small> <button v-on:click="upvote"><i class="fa fa-arrow-up grey"></i></button> <div>

I want to toggle the grey to green when the upvote button is clicked.

in the methods I have:

methods: { upvote: function(joke) { joke.upvotes ++; //how to toggle grey to green here? } }

How can I achieve this? I have tried different tricks but all the tutorials change the class ALL of the items, not the one up-voted.

<img class="img-responsive" :src="'http://10.20.10.161:8000/content_images/'+video.image" >

In place of http://10.20.10.161:8000 I need some predefined variable as base url of my server application.

How can I set that?

This question already has an answer here:

• jQuery scroll to element 22 answers

I have this code:

<div class="container citiestop"> <div class="columns"> <a href="/{{$locale}}/contact#bcn" class="column is-4 citytop city-1-top red click-preloader" > <div id="tobcn">Barcelona.</div> </a> <a href="/{{$locale}}/contact#mad" class="column is-4 citytop city-2-top green click-preloader"> <div id="tomadrid">Madrid.</div> </a> <a href="/{{$locale}}/contact#mex" class="column is-4 citytop city-3-top blue click-preloader"> <div>@include('includes.trans',['es'=>'México', 'en'=>'Mexico']).</div> </a> </div> </div>

And in the bottom on the page I have 3 divs with ids: bcn, mad and mex.

I'm trying to do this with jQuery:

$('#tobcn').click = function () { $(document).scrollTo('#bcn'); }

When I click go to the URL of href but doesn't scroll.

What's wrong with the code? No error appears.

Thanks a lot, and if you need more information feel free to ask for it.

I have a problem with webpack not extracting CSS from vendor VUE components.

Html head looks like this

Vendor CSS is inserted as style tag after JS load at bottom.

Other styles in mine vue components, mine less files, styles from non-vue vendor packages are correctly splitted into main.css and vendor.css

Webpack config in Gist: https://gist.github.com/PanzerMarduk/50b66aba41364504570d9fe23b4f1535

What is missing from config ?

Thanx

I try to run a simple Vue.js, but I constantly receive the following error:

[Vue warn]: It seems you are using the standalone build of Vue.js in an environment with Content Security Policy that prohibits unsafe-eval. The template compiler cannot work in this environment. Consider relaxing the policy to allow unsafe-eval or pre-compiling your templates into render functions.

main.js:3180 [Vue warn]: Failed to generate render function: EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self'". in

with(this){return _c('div',{attrs:{"id":"app"}})}

(found in )

Yet, I can't understand what is causing this error. I don't seem to use any dynamic templates and everything should be pre-compiled. Here is the code of my application:

import Vue from 'vue' import VueRouter from 'vue-router' const Home = Vue.component('home-component', { render() { return <div> <router-link to="/users">Users</router-link> <router-link to="/about">About</router-link> </div> } }) const Users = Vue.component('users-component', { render() { return <p>Users</p> } }) const NotFound = Vue.component('not-found-component', { render() { return <p>Not Found</p> } }) const routes = [ { path: '/', component: Home }, { path: '/users', component: Users } ] const router = new VueRouter({ routes }) const app = new Vue({ router }).$mount('#app')

And here is how I process JavaScript files in my gulpfile:

const paths = { main: 'web/javascript/src/main.js', allJs: 'web/javascript/**/*.{js,vue}', resultJs: 'public/assets/javascript/main.js', }; gulp.task('scripts', function() { return browserify(paths.main) .transform(babelify, { presets: ['es2015'], plugins: ["transform-runtime"] }) .transform(vueify) .bundle() .pipe(fs.createWriteStream(paths.resultJs)) }

There are seem to be many similar questions on StackOverflow, but none of them helped me.

I am using laravel and vue.js. When I do npm run dev my sass files are not compiling and they are not exist in /public. What can be the reason? I can not show code because of nda..