Software
Class label doesn't work in vue component. This is bulma framework
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?
Using Laravel's Gate / Authorization in VueJs
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?
Message from pusher outputs to console.log(), but pushing to array doesn't work
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); }); } } });VueJS/browser caching production builds
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?
aixos reponse data can not assign to Vue instance's data
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); }); } }How can I pass data to nested components from Vue instance
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?
Refer vue.js data but nothing
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?
Image not showing in vue.js and onsen ui app
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; },Check if element has a specific id
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 ?
Check if input has required attribute + VueJs
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
How do i restore data onclick in laravel and vuejs?
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; } } })Vue.js doesn’t work in Visualforce
I’m trying to use Vue.js on Visualforce (salesforce). Here is what I did so far.
Generate Vue.js app with vue-cli, build it
vue init webpack vue-sample cd vue-sample yarn yarn buildZip up dist folder
zip -r VueSample ./dist/*Create Static Resource in Salesforce (Name: VueSample, File: VueSample.zip)
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?
vuex actions vs repository pattern
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')Redirect to requested page after login using vue-router
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
My login function in my login component
I would be very thankful for any kind of help!
Vee-validate for password and confirm password
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>Check if user input text less than 50 characters in vue js
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?
Laravel Vue Routing
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>How to make modal box in vue js in <a> tag?
I am having a list of navbar menu items as like,
<div class="navbar navbar-default menu-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="index.html" class="navbar-brand"><img src="images/logo.png" alt="logo"><span>Sd Residency</span></a> </div> <nav class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Home</a></li> <li><a href="">Rooms</a></li> <li><a href="">Gallery</a></li> <li><a href="">Contact Us</a></li> <li><a href="" id="show-modal" @click="showModal = true">Sign In</a> </li> </ul> </nav> </div> </div>In the above list, if i click on sign-in menu, a modal box needs to be displayed in which there should also be a sign up option in which if we click on sign up, a another modal box needs to be displayed..
For this, i have started with initial step of using @click,
<li><a href="" id="show-modal" @click="showModal = true">Sign In</a></li>And,
<modal v-if="showModal" @close="showModal = false"> <h3 slot="header">Sign In</h3> </modal>And also,
<script type="text/x-template" id="modal-template"> <transition name="modal"> <div class="modal-mask"> <div class="modal-wrapper"> <div class="modal-container"> <div class="modal-header"> <slot name="header"> default header </slot> </div> <div class="modal-body"> <slot name="body"> default body </slot> </div> <div class="modal-footer"> <slot name="footer"> default footer <button class="modal-default-button" @click="$emit('close')"> OK </button> </slot> </div> </div> </div> </div> </transition> </script>Script,
export default { data(){ return{ showModal: false, } } }and,
Vue.component('modal', { template: '#modal-template' }) new Vue({ el: '#app', data: { showModal: false } })It is displaying only the <h3> that shows sign in displays if i click on sign in <a> tag and i am not getting modal box, I don't understand how to do it to get the modal box and i am sure i am wrong with this way. But dont know how to achieve. Kindly help me to achieve getting the modal box while clicking the sign in option.
How set Vue inputs via phantomjs?
The code like that:
document.getElementById('email').value = 'login'; document.getElementById('password').value = 'pwd'; document.getElementById('button').click();does not work because Vue uses v-model value instead of value attribute. Is there a way to change input and model values via javascript in phantomjs?
Notes
Setting attribute v-model for those input do not solve the problem.
Using CSP-compliant-build is not possible, because I can not rebuild project from sources.
Any extension for chrome also can not be used because page is rendered via phantomjs
VueJS cannot get path after reload or direct link
I have trouble with VueJS(or with my brains). Ok. I have vuejs-webpack project and this router:
import Vue from 'vue' import Router from 'vue-router' import Main from '@/components/Main' import CreateTravel from '@/components/CreateTravel' import TravelDetail from '@/components/TravelDetail' import Friends from '@/components/Friends' import UserTravels from '@/components/UserTravels' import User from '@/components/User' import Settings from '@/components/Settings' import UserActivate from '@/components/UserActivate' Vue.use(Router); export default new Router({ mode: 'history', routes: [ { path: '/user/activate/:secret', name: 'UserActivate', component: UserActivate }, { path: '/', name: 'Main', component: Main }, { path: "/create", name: "Create", component: CreateTravel }, { path: "/travel/:id", name: "Travel", component: TravelDetail }, { path: "/friends", name: "Friends", component: Friends }, { path: '/user/:id', name: 'User', component: User, children: [ { path: 'travels', name: 'UserTravels', component: UserTravels } ] }, { path: '/settings', name: 'Settings', component: Settings } ] })And main.js:
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import VeeValidate from 'vee-validate'; import VueResource from 'vue-resource'; Vue.use(VeeValidate); Vue.use(VueResource); Vue.config.productionTip = false; /* eslint-disable no-new */ new Vue({ el: '#app', router, template: '<App/>', components: {App} });And when I redirect to some link I have 404. Example, after redirect on link http://localhost:8080/user/activate/73e7bcfa-a9d2-4d32-8ddc-697a82bf6363 from email I look "Cannot GET /user/activate/73e7bcfa-a9d2-4d32-8ddc-697a82bf6363". In console browser next:
361d711d-05ef-4c5e-944a-7e511ba104ab:1 GET http://localhost:8080/user/activate/361d711d-05ef-4c5e-944a-7e511ba104ab 404 (Not Found). Thanks for your help