Software
how can i set old input value on refresh in Vuejs
im using laravel and Vuejs
how can i set the input old value on refresh or back to the page in vue dynamic component
something like this :
value="{{ old('name') }}Vue & Webpack: Setting development and production variables
I'm using vue-cli to build my web app. My app uses an api in a number of places like so:
axios.post(API + '/sign-up', data).then(res => { // do stuff });The API variable is a constant containing the beginning of the address, e.g., https://example.com.
How would I detect whether this is a dev or prod build and set that variable accordingly? For now, I have a script tag in my index.html document and I am manually changing it for dev and prod:
<script>var API = 'https://example.com'</script>Is there a better way to handle this?
Why importing the Vue.js source works, but not the module?
The following HTML code
<!DOCTYPE html> <html lang="en"> <body> Greeting below: <div id="time"> {{greetings}} </div> <script src='bundle.js'></script> </body> </html>together with the entry.js file
// either the import or the require work Vue = require('./vue.js') //import Vue from './vue.js' new Vue({ el: "#time", data: { greetings: "hello world" } })and the webpack.config.js
module.exports = { entry: './entry.js', output: { filename: 'bundle.js' } }works fine (vue.js is locally downloaded from the site or a CDN).
I then tried to use the vue module installed via npm install vue --save-dev by changing entry.js to
import Vue from 'vue' new Vue({ el: "#time", data: { greetings: "hello world" } })This version does not work anymore: the whole <div> is not rendered (only Greeting below is displayed).
What should be done so that Vue.js can be used with webpack?
The Vue documentation mentions webpack a few times, but only in the context of components or production builds.
Should two-way binding work in vue when casting the value with the `.number` modifier?
This is what my HTML looks like:
<div v-for='(notUsingThis, index) in numbers'> <NumberWrap :index="index" :numbers="numbers" /> </div>
in NumberWrap.vue
<input type='number' number v-model.number='model' />I have a getter/setter there, I see the setter being called every time I change the value. However the second the field loses focus, it resets to nothing.
set model(val) { console.log('setting', val); this.numbers[this.index] = val; } get model() { console.log('getting', this.numbers[this.index]); return this.numbers[this.index]; }
If I log out my object in the console, I see it has been updated but the field is not showing it. If I remove the .number modifier it works as expected.
I know it seems indirect, but this is a simplification of how the code works.
Is there special handling I need to do myself when working with the casting? Is there anything that explicitly wrong with the way I use model get/set?
How to initialise components when using dynamic components
I have this code:
<div id="blocks"> <component v-for="block in blockList" :is="block.component" :id="block.uniqueId" :init-show-header="showHeaders" v-model="block.model" v-on:content-block-remove="removeBlock" :key="block.uniqueId"> </component> </div> addBlock(name) { let block = new Object() block.model = new Object() block.uniqueId = name + '-block-' + this.blockCount block.component = name + '-block' this.blockList.push(block) this.blockCount = this.blockCount + 1 }, <div id="buttons"> <button v-on:click="addBlock('taxonomy')" type="button" name="button" class="btn btn-primary btn-sm">Add Taxonomy</button> <button v-on:click="addBlock('text-input')" type="button" name="button" class="btn btn-primary btn-sm">Add Text Input</button> <button v-on:click="addBlock('header')" type="button" name="button" class="btn btn-primary btn-sm">Add Header</button> <!-- <button v-on:click="addBlock('text')" type="button" name="button" class="btn btn-primary btn-sm">Add Text</button> -->I have different types of components that have different kind of options stored in data object. I plan to save these options to the database upon saving the page where they are added and their settings adjusted. Each component type, its order on the page and components options are going to be saved in the database.
My question is, how do I initialise this page again after refreshing it and getting all the components and their options from the database? How would I get the options to each component when adding them in a loop on a mount event of the parent component where I load all components saved in the database and want to render them with the correct options?
What are my options?
Efficient ways to structure a main site + admin panel with vue-router?
What I am trying to accomplish is pretty straightforward. I want to have a set of main routes, e.g. '/', '/contact', '/blog', which all serve content from a database. At the same time, I need a set of routes which will be password-protected, e.g. '/admin/list', '/admin/add'.
My issue is that with the vue-cli and webpack combination, there is only one index.html, meaning that my admin panel and main site will be sharing the same meta tags, and CSS/JS files I include into index.html.
How would I go about serving a different .vue file to be used for div#app, depending on the current route? Apologies if this is something that's painfully easy to do. I'm just trying to figure out if there's a way to, more or less, 'host' two linked apps within the same routing engine.
This is a more 'visual' representation of what I'd do currently, but I feel like I'm missing something.
<app> <main> <main-nav/> <main-content/> <main-footer/> </main> <admin> <admin-nav/> <admin-content/> </admin> </app>Is there a way to do something like this with the Vue routing engine, where the HTML is very, very different for both 'apps'?
<main-app> <main-nav/> <main-content/> <main-footer/> </main-app> <admin-app> <admin-nav/> <admin-content/> </admin-app>Thanks for your time!
dropdowns and modals not working inside Vue components until I refresh the page
I am using Vue.js with Laravel 5.4 everything is working in the .blade.php files but not inside the .Vue files nothing happens when I click on a dropdown or a modal button. maybe I don't know what I'm doing but the weird thing that everything works fine when I refresh the page.
Any advice??
AspNet Core + Vue.js : User disappear in Controller
I created a new AspNet .Core + Vue.js app (using this template).
I use OAuth2 & the authentication systeme included in AspNet core to login (via Patreon), and when I disable the Vue app (delete the content of boot.ts), everything works, my User is correct, even in the Controllers.
But once the Vue.js is activated, black magic appear :
- The original login works
- The User is correct ONLY IN RAZOR PAGES
- The User is not correctly in my controllers (it's an anonymous user).
Code used in my razor page, which always works :
@if (User?.Identity?.IsAuthenticated ?? false) { <div id='app-root'>Loading...</div> <a class="btn btn-lg btn-danger" href="/logout">Sign out</a> } else { <h1>Welcome, anonymous</h1> <a class="btn btn-lg btn-success" href="/login">Sign in</a> }My Controller :
public IEnumerable<WeatherForecast> WeatherForecasts() { [...] var data = User; //User without data when the Vue app is activated [...] }My Vue.js routes :
const routes = [ { path: '/', component: require('./components/home/home.vue.html') }, { path: '/counter', component: require('./components/counter/counter.vue.html') }, { path: '/fetchdata', component: require('./components/fetchdata/fetchdata.vue.html') } ];And, to finish, samples of my Startup.cs :
app.UseCookieAuthentication(new CookieAuthenticationOptions() { AutomaticAuthenticate = true, AutomaticChallenge = true, LoginPath = new PathString("/login"), LogoutPath = new PathString("/logout") }); app.Map("/login", builder => { builder.Run(async context => { await context.Authentication.ChallengeAsync("Patreon", properties: new AuthenticationProperties() { RedirectUri = "/" }); }); }); app.Map("/logout", builder => { builder.Run(async context => { await context.Authentication.SignOutAsync(CookieAuthenticationDefaults.AuthenticationScheme); context.Response.Redirect("/"); }); });I'm not used to handle authentication, and I'm a newbie in Vue.js, so I certainly made a mistake somewhere.
Anyone have an idea ?
Module not found: Error: Can't resolve 'avoriaz'
I'm new to Vue and am learning how to test it from this tutorial. I've reached the end of the tutorial but am getting a strange error on the last step of using avoriaz:
ERROR in ./test/unit/specs/list.spec.js Module not found: Error: Can't resolve 'avoriaz' in '/Users/harishramachandran/tmp/Dropbox/Sites/tmp/vuejs- testing/test/unit/specs' @ ./test/unit/specs/list.spec.js 3:15-33 @ ./test/unit/specs \.spec$ @ ./test/unit/index.jsHere's the relevant code in my test file:
import { mount } from 'avoriaz'; import List from '@/components/List'; import Vue from 'vue'; ...And my package.json file:
... }, "dependencies": { "vue": "^2.3.3", "vue-router": "^2.6.0" }, "devDependencies": { "autoprefixer": "^7.1.2", "avoriaz": "^2.6.3", ...I tried removing my node_modules directory and package-lock.json and reinstalling everything with npm install to no avail.
Any ideas as to what could be causing this, and how to resolve it?
Fetch caching response - no-cache headers not working as expected
I've been doing the random quote machine project for freecodecamp and I can't seem to stop the response from the api being cached.
I've tried various answers:
- fetch(), how do you make a non-cached request?
- https://forum.freecodecamp.org/t/apis-and-the-random-quote-machine-not-even-sure-what-to-ask/65982/13
I thought I had it at one point:
fetch(this.url, {cache: 'no-cache'}) .then(res => res.json())... but I was just disabling the cache in developer tools.
Please help. :-D.
Here is where i've been trying to make it work: https://codepen.io/JonathanDWood/pen/gRNNKx
[Vue warn]: Error in render function: "TypeError: Cannot read property 'matched' of undefined"
am trying to route using two routers for two pages, main.js and profile.js and two init files main and profile
//for main pages import Vue from 'vue'; import App from './App'; import MainRouter from './router/main.js'; Vue.config.productionTip = false /* eslint-disable no-new */ /* vue init for main pages with MainRouter */ new Vue({ el: '#main-app', MainRouter, template: '<App/>', components: { App } })
import Vue from 'vue'; import App from './App'; import ProfileRouter from './router/profile.js' Vue.config.productionTip = false /* eslint-disable no-new */ /* vue init for profile pages with profile pages router */ new Vue({ el: '#profile-app', ProfileRouter, template: '<App/>', components: { App } })
routers are..
/* Router for main pages */ import Vue from 'vue' import Router from 'vue-router' /* pages */ import Meeting from '@/components/pages/meeting' import Feeds from '@/components/pages/feeds' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Feeds', component: Feeds }, { path: '/meeting', name: 'Meeting', component: Meeting }, { path: '/activities', name: 'Activities History', component: Activities }, { path: '/add_member', name: 'Add Member', component: Add_Member } ] })
profile.js
/* Router for profile related pages */ import Vue from 'vue' import Router from 'vue-router' /* pages */ import Activities from '@/components/pages/activities_history' import Change_Password from '@/components/pages/change_password' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Edit Profile', component: Edit_Profile }, { path: '/activities', name: 'Activities History', component: Activities } ] })
ill include more codes if needed... it was working fine while there was only one router. can u troubleshoot issue. Thanks in advance
Vuejs code change dose not appear in website
I developed laravel 5.4 project, and then hosted it, and I setup nodejs and other packages on server, but when edit in vuejs code, the change does not appear in the website. I also run "npm run dev" but it shows error for me this is error:
npm ERR! code ELIFECYCLE npm ERR! errno 126 npm ERR! @ development: cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules config=node_modules/laravel-mix/setup/webpack.config.js npm ERR! Exit status 126 npm ERR! npm ERR! Failed at the @ development script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Laravel/Vue.js How to update form data on selection change
I have a simple form in my Laravel application, displaying a few input/checkbox elements. At the top, there is a drop-down element. I want to change the contents of the input/checkbox elements, based on the selection changes in the drop-down.
The data is loaded from the Eloquent Models, and its not huge, so I have all the data for all the elements (corresponding to options in drop-down) when the page is rendered. I don't want to do a dynamic call to the backend every time the selection changes in drop-down.
Any comments/code-snippet would greatly help!
Thanks!
How do I make the background image of a div box in a vue.js component transparent?
I want to make the following vue.js component have a transparent background image. I can't use a dynamic background-image property in my stylesheet so I'm forced to bind to the style attribute in the div box. B/c of this I can't get my background image to be transparent. Any help is much appreciated.
<template> <div :style="{ 'background-image': article_backdrop }" class="news-article"> <div>{{ title }}</div> <div>by {{ author }}</div> <div>{{ desc }}</div> <div>{{ url_article }}</div> </div> </template> <script> export default { name: 'news-article', props: ['title', 'author', 'url_article', 'desc'], computed: { article_backdrop: function() { return 'url('+ this.url_article + ')'; } } } </script> <style> .news-article { position: relative; height:310px; width:310px; margin:5px; display:inline-block; overflow: hidden; } .news-article::after { position: absolute; left: 0; top: 0; width: 310px; height: 310px; z-index: -1; opacity: 0.5; content:""; /* background-image: url( a url removed for this posting ); */ background-repeat: no-repeat; -ms-background-size: cover; -o-background-size: cover; -moz-background-size: cover; background-size: cover; } </style>Vuejs Dynamic component cant read linked js files
im using laravel 5.4 and Vue 2. i have a blade page which have 2 component (dynamic)
my components have bootstrap-select (select box with search) this bootstrap-select has a js file which i import it in my main js file (vue instance)
the problem : my first component can read all files and bootstrap selects are ok. when my component going to change from clicking a button in my first component... my second component cant read bootstrap-select and they are hidden. but when i set my second component to load first, thats ok
<component :is="view"></component> //my Vue Main js : data () { return{ view : 'addnew1', } }, //at click on a button im my first component : nextview(){ this.$parent.view='addnew2' }How to return boolean and not string when using select?
I have this:
<div class="form-group"> <label for="">Allow Multiple</label> <select class="form-control" v-model="allowMultiple"> <option value=true>Yes</option> <option value=false>No</option> </select> </div>I set allowMultiple=true when I initialize it, but when I select No then allowMultiple='false' So its no longer a Boolean but a String? How to get it to be Boolean?
Vuex: set state from getter in another module
I have two modules in my store:
modules: { topojsonStore: topojsonStore, layersStore: layersStore, }In topojsonStore, I have a state and a getter:
state: { municipalityTopo: {}, }, getters: { getMunicipalityTopo: state => state.municipalityTopo, }In the state of my layersStore, I want to reference this getter and store it in inside an object, something like this:
state: { municipalityLayer: { topo: <rootState>.topoJsonStore.getMunicipalityTopo, data: {...}, type: 'polygon' } }Is this possible?
How to run ajax process first before calling slider on vue component?
My top league component vue like this :
<template> <div class="row"> <div class="col-md-3" v-for="item in items"> <div class="panel panel-default"> <div class="panel-image"> <a :href="baseUrl+'/leagues/'+item.id+'/'+item.name" :style="{backgroundImage: 'url(' + baseUrl + '/img/leagues/'+item.photo+ ')'}"> </a> </div> </div> </div> </div> </template> <script> ... export default { ... props: ['leagueId'], mounted(){ setTimeout( function(){ $('.slick').not('.slick-initialized').slick({slidesToShow: 3, infinite: false}); } , 10000 ); }, created() { this.getTopLeague([{league_id: this.leagueId}]) // this is ajax if load first }, computed: { ...mapGetters([ 'getListLeague' ]), items() { const n = ['getListLeague'] return this[n[0]] // this is response ajax // exist 5 league } }, methods: { ...mapActions([ 'getTopLeague' ]) } } </script>When loaded the first time, there are 5 items of data displayed in the form of sliders. And the slider works. But, it does not seem to be an effective way. Because the ajax process is completed sometimes not until 10 seconds. Sometimes only 2-5 seconds. And that's uncertain.
Is there a better way?
Can not render data by AJAX in Vuejs 2
and thanks for reading this. I have problems while trying to set data in a Vue instance. In this example: https://jsfiddle.net/a5naw6f8/4/ I assign the values to data property by AJAX. I can render exam object but when I want to access to an inner array exam.questions.length I get an error: "TypeError: exam.questions is undefined"
// .js new Vue({ el: '#app', data:{ id: "1", exam: {} }, created: function () { this.fetchData(); }, methods: { fetchData: function () { $.get("https://dl.dropboxusercontent.com/s/15lkz66wy3fut03/data.json", (data) => { this.exam = data; } ); } } }); <!-- .html --> <div id="app"> <h1>ID: {{ id }}</h1> <h1>Exam: {{ exam }}</h1> <!-- exam.questions array is undefined --> <!-- <h1>Questions length: {{ exam.questions.length }}</h1> --> </div>I found a similar problem but it was relative to this reserved word scope: Vuejs does not render data from ajax
Does someone know how to fix this problem?
What is the best way to package/host a Vue.js component in an existing application
We have several applications in the wild that use a variety of front-end frameworks (Angular 1.5, Aurelia, Durandal, ReactJS, MVC, etc...) We're looking to move forward with a single framework, one of the requirements is that it can be 'easily' incorporated into our existing applications.
With Vue it seems simple enough to build a reusable component however, it isn't clear how best to incorporate it into an existing application. I was hoping there would be a way to package up a .vue file and simply 'reference' it in an existing app.
I'm sure this problem been solved several times before. Anyone have any best practices for accomplishing this?