Software
VueJS: Replace/Update Array
I currently have an array of object that I am rendering to a table. I am trying to follow the examples provided by Vuejs to use a "single source of truth" shared between multiple vues on the same page.
Overall, I am trying to make it where when vue1.refresh() is triggered, all the vues update their data when the "single source of truth" is updated. However, self.surveys = surveys; only updates the data on vue1.
// The single source of truth var cache = { data: [{...}] // Array of objects } var vue1 = new Vue({ el: "#table", data: { surveys: cache.data // Points to the single source of truth }, methods: { refresh: function(){ var self = this; // After getting data back from an ajax call .done(function(surveys) { self.surveys = surveys; }); }, } }); var vue2 = new Vue({ el: "#table", data: { surveys: cache.data // Points to the single source of truth }, methods: { // Methods } });Vue.js rounds string output from toFixed?
I have a review that be an int or possible have a decimal. If it is an int I need to display it as 8.0 instead of 8.
Currently my computed method to achieve this looks like this:
reviewAverage() { return Number(this.hotel.cra_average).toFixed(1); }This works fine and when I check my Vue devtools I get this when I am dealing with an int of 8:
reviewAverage:"8.0"Whenever I output the value in my template:
<div class="review">{{ reviewAverage }}</div>I am back to simply seeing 8.
So my computed property works fine but it seems the template resets my string to an int(wtf)?
Is this even possible or is something else going on here?
How to reset a prop value to it's original value in Vuejs
I have a vue component which posts data from a form and it's working fine, however, I need to reset the 'selected' prop to an empty value after submitting the form, how can I do that? Here's the blade.php file :
<form action="{{ url('/cart') }}" method="POST" class="side-by-side reset"> {{ csrf_field() }} {{-- form for my super not working with options vue component --}} <input type="hidden" name="id" v-model="this.id" value="{{ $product->id }}"> <input type="hidden" name="name" v-model="this.name" value="{{ $product->name }}"> <input type="hidden" name="price" v-model="this.price" value="{{ $product->price }}"> @if( ! $product->group->options->isEmpty() ) <select name="options" class="options" v-model="selected" autofocus required> <option value="">Please select one</option> @foreach($product->group->options as $option) <option class="reset" value="{{ $option->name }}">{{ $option->name }}</option> @endforeach </select> @endif <addToCart :product="{{ $product }}" :selected="selected" @submit.prevent="onSubmit()"></addToCart>here's my vue file :
export default { props: ['product', 'selected'], data() { return { id: this.product.id, quantity: 1, name: this.product.name, price: this.product.price, options: this.selected } }, watch: { selected: function() { return this.options = this.selected; //this is initially empty, I want to reset it after form submits } }, methods: { addtocart() { axios.post('/cart/', this.$data) .then(flash(this.product.name + ' was added to cart')) .then( this.resetForm()); },I need to reset the selected prop to it's original empty value, but I get errors, Vuejs doesn't let me modify the prop value directly and I can't figure out how to reset it. Thanks for your help.
Using props to set different text on every page in vue.js
I am using laravel + vue. I want to do title of page in navbar, so when you are in index, in navbar is text index. When you are in settings, navbar says settings etc.
I think props is good for it, but when I use that, it works not good. Look here:
blade.php of index:
@extends('layout.app') @section('content') <index :msg="msg"></index> @endsectionindex.vue:
props: [ 'msg' ],Now navbar:
<template> <nav class="navbar"> <a></a> <p>{{msg}}</p> </nav> </template> <script> export default { props: [ ], data() { return { } }, } </script>and layout:
<body> <div id="app"> <navbar></navbar> @yield('content') </div> </body>How I can change that {{msg}} paragraph in navbar when we are on different pages? My code doesn't work.
[Vue warn]: Property or method "msg" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.Vue.js 2 + Native PHP - what is the right way to keep user in session?
I have created a small application using Vue.js 2, Axios, native PHP 7.1 (without using php frameworks e.t.c.), MySQL.
I have a login and registration modal windows and some native crud operations with data in my datatable.
I am using Axios to send get/post requests to manage this table and access the database data. This is my login example in Vue:
var loginModal= new Vue ({ el: '#login-modal', data: { ... errors: [], ... userLogin: {action: "", usernameOrEmail: "", password: ""}, ... }, methods: { login: function () { loginModal.userLogin.action = "login"; axios.post("../../route/route.php", JSON.stringify(loginModal.userLogin)) .then(function (response) { loginModal.clearUserLogin(); if (response.data !== "") { console.log(response); if (response.data.error) { loginModal.errors = JSON.parse(response.data.error); } else if (response.data.userId) { header.authenticated = true; loginModal.sessionUserId = response.data.userId; loginModal.modalSuccessMessage = "Success login! Greetings!"; groupManagerModule.sessionUser.userId = response.data.userId; } else { loginModal.modalErrorMessage = "Undefined login error occurs. Try again later."; } } }); },If login is successfull - I am storing some user id in PHP session:
class LoginController { public static function postLogin() { session_start(); $userDao = New UserDaoImpl(); $errorList = array(); $user = FormValidator::validateLogin($errorList, $userDao); if (!empty($errorList)) { $_SESSION['errorList'] = $errorList; echo json_encode(array('error' => json_encode(array_values($errorList)))); } else { $_SESSION['user'] = $user->getId(); echo json_encode(array('userId' => $user->getId())); } }... Everything is working fine. If user is logged in - he can manage some information in this table.
But I am trying to find some right and secure solution to keep user in session even after the browser is closed and I am not sure that my variant is correct (I have begined to create a cookie signs), and after new opening the user must to be in the session and could moderate data.
Question:
What is the best practice for this? (Secure and right way) (cookies, Database token, e.t.c. ?)
(I am newbie in PHP and Vue, sorry for possible dublicate, Thanks!)
materialize modal popup auto initialize not working in vue js
Materialize modal popup is working properly in onclick functions, but not working in mounted() or created()
testingmodel:function(){ $('#firstlogintour').modal('open'); } mounted() { this.testingmodel(); },
Do a select list in Vuejs/laravel and databse/axios
I'm currently working on Laravel & Vuejs. I would like to create a select using values from my database: When I select "france" it's supposed to only users from this country.
My users' information shows correctly but it does not react to changes within the select.
my blade.php
<div id ="app"> <select v-model="selected"> <option value="">Country</option> <option value="usa">USA</option> <option value="france">france</option> <option value="uk">United Kingdom</option> <option value="sweden">Sweden</option> </select> <ul> <li v-for="application in applicationsFiltered">@{{ application }}</li> </ul> <apps></apps> </div>my app.js
Vue.component('apps',{ template : ` <table class="users"> <thead> <tr> <th>id</th> <th>OfficialName</th> <th>Country</th> </tr> </thead> <tbody> <tr v-for="app in apps"> <th>{{ app.id }}</th> <th>{{ app.OfficialName }}</th> <th>{{ app.Country }}</th> </tr> </tbody> </table> `, data: function() { return { users: [] } }, created: function() { this.getApps(); }, methods: { getUsers: function(){ axios.get("/users").then((response) => {this.users = response.data}) } }, }), new Vue({ el: '#app', data() { return { selected: '', } }, });I'm new in Vuejs and I don't know how to do my select list / my methods. Do you have any ideas ? :)
Thank you.
JavaScript: Promise on recursion
I got something like this:
methods: { process: function process(id) { this.$http.post('controller/process', { id: id }).then(function (res) { if (res.data.items > 0) { this.process(id); } else { return true; } }, function (data) { this.$notify(data, 'danger'); this.progress = false; }); }, run: function run($id) { this.busy = true; this.process($id); this.busy = false; } },Alright - this is some JavaScript using Vue.js and vue-resource to do am API call (process). The API returns the number of elements to be processed. If this number is > 0, the function should be executed again. This works fine.
Now I would like to solve the following:
Executing the run function should set this.busy = true. After the function process is done processing all items, this.busy should be set to false.
So I read something about promises - but I still don't get how I could use them in this case.
Disable the default in props in production in vue js
Below is my code.
props: { year: { default: 2016, type: Number } }I have used the default value to see the mock but now How can I disable the default value when in production?
Watching in vue cann't work in some case
I used transition in vue by watching current value in vuex making 'alertTip' component to achieve fade-in and fade-out animation,but sometimes it works,sometimes it doesn't work,when value changed and the function in watch dosen't work,the 'tips' cann't disappeared and show all the time.
How to resolve this problem? If there has other method to achieve fade-in and fade-out animation without jQuery
here is the code of the 'alertTip' component:
<template> <transition name="slide-fade"> <div class="info-log" v-if="alertInfo.show"> <img src="../assets/success-icon.png" alt="success-icon" v-if="alertInfo.success"> <img src="../assets/error-icon.png" alt="success-icon" v-else> <span class="info-text">{{alertInfo.alertText}}</span> </div> </transition> </template> <script> import {mapGetters, mapActions} from 'vuex' export default { data () { return { value: '' } }, props: [], mounted () { }, methods: { ...mapActions('global', [ '_ChangeAlertInfo' ]), showTip () { let self = this this.show = !this.show setTimeout(function () { self.show = !self.show }, 1300) } }, computed: { ...mapGetters('global', [ 'alertInfo' ]) }, watch: { 'alertInfo.show': { deep: true, handler (curVal, oldVal) { let self = this setTimeout(function () { self._ChangeAlertInfo({ 'show': false }) }, 1300) } } } } </script> <style lang="less" scoped> .slide-fade-enter-active { transition: all .5s ease; } .slide-fade-leave-active { transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0); } .slide-fade-enter, .slide-fade-leave-active { opacity: 0; } .info-log { position: fixed; top: 40%; left: 50%; z-index: 1111; margin-left: -92px; min-width: 184px; height: 60px; border-radius: 5px; padding-top: 20px; text-align: center; color: #FFF; background-color: rgba(0,0,0,.5); /* IE8 */ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000); .info-text { vertical-align: top; } } </style>input field prefilled with vuejs and a reactive character count
As a vuejs component, I want to be able to display a character counter next to my input field. The field is initially set up using a prop (this.initialValue).
When the method this.updateCounter is called the input textfield is blocked : typing into the field won't update its value. If I don't set the maxlength prop, the field is working fine : I can update the textfield.
Usage in a template :
<textfield maxlength="50" name="title" initialValue="Test"></textfield>Here is the component code :
<template> <div class="input"> <div class="input__field"> <span class="input__limit f--small">{{ counter }}</span> <input type="text" :name="name" :maxlength="computedMaxlength" v-model="currentValue" /> </div> </div> </template> <script> export default { name: 'Textfield', props: { name: { default: '' }, maxlength: { default: 0 }, initialValue: { default: '' } }, computed: { hasMaxlength: function () { return this.maxlength > 0; }, computedMaxlength: function () { if(this.hasMaxlength) return this.maxlength; else return false; }, currentValue: { get: function() { return this.initialValue; }, set: function(newValue) { this.updateCounter(newValue); this.$emit("change", newValue); } } }, data: function () { return { counter: 0 } }, methods: { updateCounter: function (newValue) { if(this.maxlength > 0) this.counter = this.maxlength - newValue.length; } }, mounted: function() { this.updateCounter(this.initialValue); } } </script>Why is this array not empty?
I trying to show a message in an array is empty in a filter method in Vue. However, it seems my computed function still returns an array of empty object (If I search for something not there)
What I wish is that it only returns the object that actually has a value - the empty ones should be filtered out?
So if I search for "fjhdsfjsdfjsd" ex, it still return about 200 items, just empty objects, which it shouldnt?
The computed function looks like:
filteredAlarms: function () { let filter = {}; let searchString = this.search_string.toLowerCase(); Object.keys(this.eventLog).forEach(key => { filter[key] = this.eventLog[key].filter(item => { let systemName = item.system_name.toLowerCase(); if(item.type.includes("alarm") && systemName.includes(searchString)) { return item; } }); }); return filter },My POST ajax request returns 302 on a Laravel Controller
I send a POST Ajax request to a Laravel Controller but I get a 302 Found response code.
The controller is the ForgotPasswordController provided by Laravel's Auth package, so nothing special about it.
It has the guest middleware in its constructor and I found that if I remove this middleware from the constructor, the Ajax request works correctly (it returns a 200 response code).
The Ajax request has the X-CSRF-TOKEN and X-XSRF-TOKEN headers, so I don't think there is something missing.
I'm sending this Ajax request from a VueJS password reset form with the Axios library.
Why my POST request does not work if the controller has the guest middleware ?
Thanks !
Here are the headers sent with the request :
POST /password/email HTTP/1.1 Host: myapp.dev Connection: keep-alive Content-Length: 37 Pragma: no-cache Cache-Control: no-cache Origin: http://myapp.dev X-XSRF-TOKEN: eyJpdiI6IjRqTk1yTXFsXC9FVlRzckF0dUM4azdRPT0iLCJ2YWx1ZSI6IjY0MUZzaEpCTXJDcUhzUGhcL2dzYVJmalQrR3pwV3IzYWxiTSt4dVwvN2VVKzJ4b2t3XC9GcVhJcllmK3pQYVV4VGFIZG4wZ0s3NlNCTG01WEl6YzBCY2NRPT0iLCJtYWMiOiIwYmNjOTRiZGJjZTM2YjYyMWJiMzRhNTlkOTkwOWU4Y2M4NmYzYzI5NjhiMTU4MDdiMGJkMmJhYmMwODEzMDhjIn0= X-CSRF-TOKEN: nejsetydvFWgeqppZc5XQtX04b5AdXlsTKSgaydj User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36 Content-Type: application/json;charset=UTF-8 Accept: application/json, text/plain, / X-Requested-With: XMLHttpRequest Referer: http://myapp.dev/password Accept-Encoding: gzip, deflate Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4 Cookie: XSRF-TOKEN=eyJpdiI6IjRqTk1yTXFsXC9FVlRzckF0dUM4azdRPT0iLCJ2YWx1ZSI6IjY0MUZzaEpCTXJDcUhzUGhcL2dzYVJmalQrR3pwV3IzYWxiTSt4dVwvN2VVKzJ4b2t3XC9GcVhJcllmK3pQYVV4VGFIZG4wZ0s3NlNCTG01WEl6YzBCY2NRPT0iLCJtYWMiOiIwYmNjOTRiZGJjZTM2YjYyMWJiMzRhNTlkOTkwOWU4Y2M4NmYzYzI5NjhiMTU4MDdiMGJkMmJhYmMwODEzMDhjIn0%3D; laravel_session=eyJpdiI6IkJnczRHV3NcLzhLbzZWaUlvTTI2cFlBPT0iLCJ2YWx1ZSI6IkpQYytLXC9pQ1R3MTZlaEx2QWJ4bGpSd21BV25jelJKVDJkQVdcL25GSG4rQkpQc1duZHIrTjErOGt3bk5BVVVcL3FTK1c2XC83Y1NqTmxBaVZ1bkQ2TWV5Zz09IiwibWFjIjoiNzg4Y2UyNWQ0ODcxMWNkNWE3MmU4ZDY1MmIyNTE0NDgwMzFmM2ZjYzkxMzM5ZGM5ZTk5MDI4NjE4OGRkNmJjYyJ9
webpack vue compiler in 1 file in .net mvc5 environment
I have a MVC5 .Net solution wich is using Vue.js and webpack to compile. on the early days of the project someone decided to compile the .vue in separated .js files. But now with over 20 .vue files, it's a pain. My question is:
How can I transform this webpack config to compile it in a single .js file?
const fs = require("fs"); const path = require("path"); // build an object that looks like // { // "filename": "./filename.vue" // } // to list the entry points for webpack to compile. function buildEntry() { const reducer = (entry, file) => { entry[file.split(".").shift()] = `./Vue/${file}`; return entry; }; return fs.readdirSync(path.join(__dirname, "Vue")) .filter(file => file.endsWith(".vue")) .reduce(reducer, {}); } module.exports = { entry: buildEntry(), output: { path: path.join(__dirname, "Vue"), filename: "[name].js", library: "[name]" }, module: { loaders: [ { test: /\.vue$/, loader: 'vue-loader' }, ], } }How to apply more than one conditional style to elements
I have a div that looks like this
<div v-for="person in people"> <p class='name' :class="{people.age == "adult" : 'green'}"></p> </div>I can change the class like that, but I have many age groups (around 8) and I am not sure how this can be done, without putting 8 logical arguments inside the element
VueJS get data as object
Here is a VueJS component:
<template> <a @click="log">click me<a> </template> <script> export default { data() { return { a: "a", b: "something", foo: { bar: "baz" }, // etc. } }, methods: { log() { // console.log( data ); // ??? } } } </script>I want to access the data from the log function and get it as an object (just like in its declaration). I know I can get data like this :
log() { console.log( this.a ); console.log( this.b ); console.log( this.foo ); }But what I want is the whole data as an object (because I want to send the data via an event to a parent component).
Is there a way to get the whole data object inside a method of a component?
How to detect if a website can be embedded as iframe (SAMEORIGIN)
What's a way to detect whether a website can be embedded or not because of the same-origin policy?
I have tried way to detect this but failed. I only found old method. But none of them work now.
V-select bug while selecting elements in Vuejs
I'm building a small application in vuejs 2 where I'm using v-select package for select box, Problem I'm facing is:
I've declared v-select in my component something like this:
<div class="form-group"><label class="col-sm-2 control-label">Company name:</label> <div class="col-sm-6"> <v-select :options="companyOptions" v-model="company_name" :on-search="getOptions" placeholder="Company name"></v-select> </div> </div>So accordingly I'm having data defined as company_name, and I'm calling an axios event to get the searchable data, while the component is being loaded I'm calling index data of first 50 set for initial selection and if anybody types then I'm calling a function getOptions to get data related to the input, now suppose if somebody selects any data and then removes it again from the selection and again search with key press event the searchable data is not displayed, I can see that my axios call is working fine and I'm able to get the relevant data. but it is not displaying in dropdown as it says:
Error in render function: "TypeError: Cannot read property 'label' of null"
Which is coming from the company_name model which was selected. Following is my code in codepen
In this my axios is not working as it says mixed content:
https://codepen.io/anon/pen/Bdeqam?editors=1011' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://connect.stellar-ir.com/api/companies'. This request has been blocked; the content must be served over HTTPS.
So I'm unable to explain properly in this code set. But my code looks same as declared in codepen.
Help me out in this.
Select Multiple on V-Model Object Interaction
VueJS input Validation Push/Pop to Array
Read the link above first.
I asked this question a moment ago and implemented it in a select multiple input instead of a normal select.
The v-model I used is inside an object, let's say form.username instead of form.username.
If I select multiple usernames, the data inside the form.username doesn't get updated, I think it doesn't recognize it as an array.
But instead, if I add a name and an opening and closing bracket after it in the input, let's say , it works.
Not sure if this is intended, just asking here for reference.
Creating Vue Search Bar | How to hide/show data based on input?
I am creating a dynamic search bar that will filter a sidebar full of names based on user input. However, I am having trouble temporarily hiding and showing data based on the search bar's value on keyup. What is the best way to achieve this the "Vue way"?
On keyup, I want to filter through all of the this.people data and only show names that contain the value of the search input.
Below is what my code looks like
Vue.component('sidebar',{ props: ['people', 'tables'], data: () => { return { fullName: '' } }, computed: { computed() { return [this.people, this.tables].join() } }, template: ` <div id="sidebarContain" v-if="this.people"> <input id="sidebar-search" type="text" placeholder="Search..." @keydown="searchQuery"> <select id="sidebar-select" @change="sidebarChanged"> <option value="AZ">A-Z</option> <option value="ZA">Z-A</option> <option value="notAtTable">No Table</option> <option value="Dean's Guest">Dean's Guest</option> <option value="BOO | VIP">BOO | VIP</option> </select> <div v-for="person in people" :class="[{'checked-in': isCheckedIn(person)}, 'person']" :id="person.id" :style="calcRegColor(person)"> <span v-if="person.table_name">{{person.first_name + ' ' + person.last_name + ' - ' + person.table_name}}</span> <span v-else>{{person.first_name + ' ' + person.last_name}}</span> </div> </div> `, methods: { isCheckedIn(person) { return person.reg_scan == null ? true : false; }, isHidden(person) { console.log("here"); }, calcRegColor(person) { switch(person.registration_type) { case "Dean's Guest" : return { color: 'purple' } break; case "BOO | VIP" : return { color: 'brown' } break; case "Student" : return { color: 'green' } break; case "Faculty": case "Staff": return { color: 'blue' } break; case "Alumni Club Leader": return { color: 'gold' } break; case "Table Guest" : return { color: 'pink' } break; default: return { color: 'black' } } } }, watch: { computed() { console.log("People and Tables Available"); } } }); var app = new Vue({ el: '#main', data: { tables: {}, people: [], currentAlerts: [], lastDismissed: [] }, methods: { loadTables() { $.ajax({ method: 'POST', dataType: 'json', url: base_url + 'users/getTableAssignments/' + event_id }).done(data => { this.tables = data; }); }, loadPeople() { $.ajax({ method: 'POST', dataType: 'json', url: base_url + 'users/getParticipants2/' + event_id }).done(data => { this.people = data; this.sortSidebar(this.people); }); }, loadCurrentAlerts() { $.ajax({ method: 'POST', dataType: 'json', url: base_url + 'alerts/getAlerts/' + event_id }).done(data => { this.currentAlerts = data; }); }, loadLastDismissed(num = 15) { $.ajax({ method: 'POST', dataType: 'json', url: base_url + 'alerts/getLastDismissed/' + event_id + '/' + num }).done(data => { this.lastDismissed = data; }); }, setRefresh() { setInterval(() => { console.log("Getting People and Tables"); this.loadPeople(); this.loadTables(); }, 100000); }, makeTablesDraggable() { $(document).on("mouseenter", '.table', function(e){ var item = $(this); //check if the item is already draggable if (!item.is('.ui-draggable')) { //make the item draggable item.draggable({ start: (event, ui) => { console.log($(this)); } }); } }); }, makePeopleDraggable() { $(document).on("mouseenter", '.person', function(e){ var item = $(this); //check if the item is already draggable if (!item.is('.ui-draggable')) { //make the item draggable item.draggable({ appendTo: 'body', containment: 'window', scroll: false, helper: 'clone', start: (event, ui) => { console.log($(this)); } }); } }); } makeDroppable() { $(document).on("mouseenter", ".dropzone, .table", function(e) { $(this).droppable({ drop: function(ev, ui) { console.log("Dropped in dropzone"); } }); }); } }, mounted() { this.loadTables(); this.loadPeople(); this.loadCurrentAlerts(); this.loadLastDismissed(); this.setRefresh(); this.makeTablesDraggable(); this.makePeopleDraggable(); this.makeDroppable(); } <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script> </head> <div id="app"> <sidebar :people="people" :tables="tables"></sidebar> </div>