Vuejs

I've got node/npm/vue.js-cli installed with default website.

I have these two extensions installed:

When I save, it checks ESlint rules and shows me errors:

The problem is, when I press CTRL-SHIFT-F to format the code, it applies other rules, e.g. format code takes the space out from between the function name and the parentheses, but then ESLint complains that it is not there.

1. How do I know what tool/extension is formatting my code?
2. How do I know what tool/extension is checking rules when I save?
3. How can I set these so that they are the same so that reformatting my code changes the code to rules that it checks when it saves?

I installed node.js on a Windows machine.

Then I installed npm i -g vue-cli.

npm run dev brought up the vue.js-cli site at http://localhost:8080.

After turning off and on my computer, when I type npm run dev, I get this error:

But when I installed vuejs-cli, I explicitly stated I didn't want eslint when it offered to install it.

And there are no eslint errors in my settings:

And in my browser I see this:

Otherwise, I haven't changed the files, and it worked right after I had installed it once.

How can I get these eslint errors to not occur and the site to display corrected?

I installed node.js on a Windows machine.

Then I installed npm i -g vue-cli.

npm run dev brought up the vue.js-cli site at http://localhost:8080.

After turning off and on my computer, when I type npm run dev, I get this error:

What do I need to do to get node able to server the vue.js-cli site again?

This is code from bulma.io and I try using it in template of the component file(.vue)

<div class="field"> <label class="label">Name</label> <div class="control"> <input class="input" type="text" placeholder="Text input"> </div> </div>

But content label tag (word "Name") doesn't appear in browser. If I delete class='label' then it does. Why it happens?

I'm not sure how this hasn't been dealt with before, but how do I go about using VueJs and authorizing actions in Vue template?

If I'm using Laravel's blade, this is easy (using @can directive), but there's no documentation or any way to perform this in Vue after searching for hours on Google.

Now, I know I can simply load the users permissions into an array / JSON object inside the view, but there seems to be no way of displaying / hiding actions in Vue templates using Laravel's gate methods to determine if the user is allowed to perform the action on a specific record.

For example, there's a list of comments, but the user must own the comment to be able to see the 'edit' button.

The thing is, if I implement the logic in Vue, I'd be duplicating authorization logic throughout my entire backend and frontend for this.

Using Laravel's policy's, I'm able to perform complex authorization of specific actions. But I'm stumped as to how I would implement the policy in Vue.

There's also more complex scenarios, such as if a user that has an admin role is browsing comments, they should be able to edit it even if they don't own the comment.

Does anyone have any suggestions for this type of scenario?

I'm using currently Laravel 5.4 Broadcasting. I'm getting the response from Pusher in a object with console.log, but when I output it with Vue 2 to my array it doesn't show up.

Vue.component('chat', { props: ['user', 'currentTeam'], data() { return { messages: [], form: new SparkForm({ message: '' }) } }, created(){ this.getMessages(); this.listenMessages(); }, methods: { getMessages() { axios.get('/api/teams/' + this.currentTeam.id + '/messages') .then(response => { this.messages = response.data; }); }, create() { Spark.post('/api/teams/' + this.currentTeam.id + '/messages', this.form) .then(message => { this.form.message = ''; this.messages.push(message); }); }, listenMessages() { Echo.channel('teams.'+ this.currentTeam.id + '.chats') .listen('MessageCreated',(chat)=>{ this.messages.push(chat.chat.message); }); } } });

I have a VueJS app. Whenever I run npm run build it creates a new set of dist/* files, however, when I load them on the server (after deleting the old build), and open the page in browser, it loads the old build (from cache i assume). When I refresh the page, it loads the new code no problem.

This is my index.html:

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> <meta http-equiv="cache-control" content="max-age=0" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="-1" /> <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /> <meta http-equiv="pragma" content="no-cache" /> <link rel="stylesheet" href="/static/css/bootstrap.min.css"/> </head> <body> <div id="app"></div> </body> </html>

Is there a way to force it to load new code every time or (ideally) to check if the old files are gone from the server, then refresh the browser?

In my vue.js project, i get an array data by axios, and want to assign to bookList variable, but failed, bookList still equal to [], could you tell me why?

export default { ... data () { return { bookList: [] } }, mounted: function() { this.$nextTick(function(){ this.viewBooks(); }); }, methods: { viewBooks: function() { axios.get('/books.json') .then(res=>{ this.bookList = res.data.bookList; }) .catch(error=>{ console.log(error); }); } }

I get my data via AJAX from the Vue instance, and I need to pass that data to the components. I am now learning how Vue.js works, but I find the documentation a little fragmentary...

Here is aproximately my code:

<!DOCTYPE html> <html lang="en"> <meta charset="UTF-8"> <title>mysite</title> </head> <body> <div id="app"> <parent-component></parent-component> </div> <template id="parent-component-template"> <div id="the-template"> <div class="the-list"> <span is="sector-item" v-for="item in sectors" :sector="item"></span> </div> <button>Button</button> </div> </template> <template id="sector-item-template"> <span> {{ sector.name }} </span> </template> <!-- Vue.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script> <script> Vue.component('parent-component', { template: '#parent-component-template' }); Vue.component('sector-item', { props: ['sector'], template: '#sector-item-template' }); let app = new Vue({ el: '#app', data: { sectors: [{ 'id': 1, 'name': 'Industry' }] } }); </script> </body> </html>

I get the following error:

[Vue warn]: Property or method "sectors" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

Where do I make a mistake?

1.I am a beginner of vue.js, but when I was trying some examples, I found something uncommon. The first one is when I set id in the body, and write my js code as followed:

<html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="./css/semantic.css"> <script type="text/javascript" src="js/vue.js"> </script> <title></title> </head> <body style="background-color:black;" id="app"> <div class="ui container" style="margin:20px;"> <div class="ui segment"> <h1>{{ title }}</h1> <p> {{ message }} </p> </div> </div> <script> var app = new Vue({ el: "#app", data: { message: "Hello, world!", title: "How about you?" } }) </script> </body> </html>

And this is my result which does not show me data :

2.And the second problem is when I created an object in the data, and I refer it as followed, it also does not work in the div label. This is the code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="./css/semantic.css"> <script type="text/javascript" src="js/vue.js"> </script> <title></title> </head> <body style="background-color:black;"> <div class="ui container" style="margin:20px;"> <div class="ui segment" id="app"> <h1>{{ article.title }}</h1> <p> {{ article.message }} </p> </div> </div> <script> var app = new Vue({ el: "#app", data: { article{ message: "Hello, world!", title: "How about you?" } } }) </script> </body> </html>

So I wonder if there some conflicts when I was using semanticUI and vue.js?

I have used the following code to load image in my App which is based on Vue.js and Onsen UI . But they are not showing.

<div class="footer_logo"> <ul> <li class=""><img :src="logo" alt="logo" /></li> </ul> </div>

I have imported the image using the following code in script

import foot1 from 'static/assets/img/footerlogos/1.svg'; export default { data() { logo: foot1; },

i am using vuejs to drag/drop elements, and basicly i am using the evt.to and evt.from to know if i am dragging the element to the list2 for example, this evt.to/from returns me the html tree from my draggable element that has the list, so the parent has the id="list2" if i drag it to there, i need to know how i can track if my evt.to has the list2 element with plain javascript or maybe vueJS

tried this:

if(evt.to.getElementById("list2")){ console.log("IT HAS"); }

i don't want to check on all document, just on that evt.to, how can i do that without Jquery ?

I have the following code to check if an input field has the required attribute set on it.

computed: { isRequired: function (input) { input = document.getElementsByTagName('input'); for (var i = 0; i < input.length; i++) { return this.input.hasAttribute('required') ? 'test-class' : ''; } } }

And the html template with code for the input component.

<div :class="isRequired" class="o-pf-required pull-left">*</div> <div class="col-md-6 col-lg-6" style="padding-right: 0px"> <!-- padding-right: 0px here cancels out padding on the bootstrap col-lg-12 wrapper keeping the 15px padding of the outer div consistant. --> <input :type="type" class="o-pf-input" :class="isCheckBox" :placeholder="placeholder" :name="placeholder" :required="isRequired ? true : false" :value = 'value' @input="value = $event.target.value"> <label :for="placeholder"> {{ placeholder }} </label> </div>

What I want to achieve is to apply the test-class to the element where the o-pf-required class is to hide the asterisk but the browser gives me the following error:

A related issue on this: VueJS conditionally add an attribute for an element

I try to make a button that restores previous data from textarea how do I do that in laravel and vuejs.I submit the data with vuejs axios then return it modify, I try to make a button that restores previous data in textarea.

<div id="root"> <textarea v-model="areamodel" name="textarea" class="form-control" rows="10" id="textarea" ></textarea> </div> <button v-on:click="vanila" class="btn btn-md btn-info "><span class="glyphicon glyphicon-transfer"></span> Restore </button> public function vue(Request $request) { $vanila = $request->get('areamodel'); return response()->json([ 'vanila' =>$vanila ]); } $ses = session('areamodel'); new Vue({ data:{ areamodel:'', }, methods:{ vanila:function(){ this.vanila = data.areamodel; } } })

I’m trying to use Vue.js on Visualforce (salesforce). Here is what I did so far.

1. Generate Vue.js app with vue-cli, build it

   vue init webpack vue-sample cd vue-sample yarn yarn build

2. Zip up dist folder

   zip -r VueSample ./dist/*

3. Create Static Resource in Salesforce (Name: VueSample, File: VueSample.zip)

4. Create Visualforce page

   <html> <head> <meta charset="utf-8"></meta> <title>Vue Sample</title> <apex:stylesheet value="{!URLFOR( $Resource.VueSample, 'dist/static/css/app.090f1fe8ffa03cdc03a19db87af18abe.css' )}"/> </head> <body> <div id="app"></div> <apex:includeScript value="{!URLFOR( $Resource.VueSample, 'dist/static/js/manifest.a5a27e99ade9f48f7f62.js' )}"/> <apex:includeScript value="{!URLFOR( $Resource.VueSample, 'dist/static/js/vendor.ae75c6b5bea60f5d8cec.js' )}"/> <apex:includeScript value="{!URLFOR( $Resource.VueSample, 'dist/static/js/app.3c76c2b4382e06be5fe2.js' )}"/> </body> </html>

if I open this Visualforce page, nothing will be displayed. I checked Chrome’s console and I can see the javascript files and the css file in the static resource are correctly downloaded in the browser, and also no errors are displayed in the developer console. what am I missing here? why can’t I see anything?

please also let me know the best way to handle the file name’s hash here. I don’t want to change file hash in visualforce page whenever I upload new resource bundle. should I just stop adding the hash?

Below is a sample of how I normally handle the data access layer. I was wondering how this would integrate with vuex. Should I use the same pattern and just refer to the repos from my actions? Or should the actions replace repository methods? Or any other best pratice?

abstract class BaseModel { id apiPath destroy() { console.log('DELETE', this.apiPath, this.id) } } class User extends BaseModel { static apiPath = '/user' name constructor(item) { super() this.id = item.id this.name = item.name } } class BlueprintApiRepository { model constructor(model) { this.model = model console.log(this.model) } create(name) { console.log('POST', this.model.apiPath, name) // API call let item = { id: Math.random(), name } // Item returned from REST API return new this.model(item) } getAll() { console.log('GET', this.model.apiPath) // API call let results = [{ id: 1, name: 'Michael' }, { id: 2, name: 'Berta' }] // returned from REST API return results.map(result => new this.model(result)) } } class UserRepository extends BlueprintApiRepository { constructor() { super(User) } someSpecificMethod() { console.log('GET', 'do some non blueprint api call') } static someSpecificStaticMethod() { console.log('GET', 'do some non blueprint api call') } } let userRepo = new UserRepository() let user = userRepo.create('Peter')

In my application some routes are just accessible for authenticated users.
When a unauthenticated user clicks on a link, for which he has to be signed in, he will be redirected to the login component.

If the user logs in successfully, I would like to redirect him to the URL he requested before he had to log in. However, there also should be a default route, in case the user did not request another URL before he logged in.

How can I achieve this using vue-router?

My code without redirect after login

router.beforeEach( (to, from, next) => { if(to.matched.some(record => record.meta.forVisitors)) { next() } else if(to.matched.some(record => record.meta.forAuth)) { if(!Vue.auth.isAuthenticated()) { next({ path: '/login' // Redirect to original path if specified }) } else { next() } } else { next() } } )

My login function in my login component

login() { var data = { client_id: 2, client_secret: '**************', grant_type: 'password', username: this.email, password: this.password } // send data this.$http.post('oauth/token', data) .then(response => { // authenticate the user this.$auth.setToken(response.body.access_token, response.body.expires_in + Date.now()) // redirect to route after successful login this.$router.push('/') })

I would be very thankful for any kind of help!

I am trying to make a password set and reset system on vuejs in which i am using vee-validate to validate wether password entered in both the input tag are same or not and they prevent submission if they aren't same. This is my code :

<template> <div> <form @submit.prevent="validateBeforeSubmit()"> <div class="input-group"> <div class="input-group-addon"> Enter Password </div> <div class="input-fields"> <input v-validate="'required'" name="password" type="password" class="form-control" placeholder="Password"> <input v-validate="'required|confirmed:password'" name="password_confirmation" type="password" class="form-control" placeholder="Password, Again" data-vv-as="password"> </div> </div> <div class="alert alert-danger" v-show="errors.any()"> <div v-if="errors.has('password')"> {{ errors.first('password') }} </div> <div v-if="errors.has('password_confirmation')"> {{ errors.first('password_confirmation') }} </div> </div> <button type="submit" class="btn btn-primary"> Validate! </button> </form> </div> </template> <script> export default{ name:'password', methods: { validateBeforeSubmit() { this.$validator .validateAll() .then(function(response) { // Validation success if response === true }) .catch(function(e) { // Catch errors }) } } } </script>

I want to check the input length in vue js. I have the function to check whether the user input is empty or space only with

if(!this.content || this.content.trim() === ''){ return }

Now i want to check the user input length. If less than 50 characters system will showing a alert. Any suggestion?

I would like to hava all tr as a router link in my table, but when I add this before tr, then every css from table disappear and my View looks bad. Is a possibility to do this better?

<table v-if="seenOrders" id="ordersTable" class="table"> <tr> <th>Numer zamówienia</th> <th>Imię</th> <th>Telefon</th> <th>Email</th> <th>Status</th> <th>Data zamówienia</th> </tr> <router-link to="/orderDetail" class="order-row" > <tr v-for="order in orders" v-on:click="details(order.id)"> <td>{{order.number}}</td> <td>{{order.client_name}}</td> <td>{{order.phone}}</td> <td>{{order.email}}</td> <td>{{order.actual_status}}</td> <td>{{order.order_date}}</td> </tr> </router-link> </table>