Vuejs

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??

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 ?

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.js

Here'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?

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

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

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.

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!

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>

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' }

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?

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?

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?

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?

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?

I'm trying to populate my events array from a meteor call so it shows up in a select list. The Meteor function 'get.upcoming' returns an array of JSON objects, but I think the select list is rendered before the event array gets populated.

Is there a way to re-render the select box or render it only after the events array gets populated?

<template> <div class="container"> <select v-model='eventId'> <option v-for='event in events'>{{JSON.stringify(event)}}</option> </select> </div> </template> <script> export default { data() { return { eventId: "", events: [], } }, created() { this.getItems(); }, methods: { getItems() { console.log("getting items"); Meteor.call('get.upcoming', function(err, res) { if (err) { console.log(err); } else { events = res; console.log(events); } }) } } } </script> <style> </style>

Ok, so i built a little app to exercise what i've learned so far with vue, but theres some things that i want to do but have no idea HOW yet

<div class="container" id="app"> <div class="row"> <div class="col-xs-6 jumbotron"> <form class="form-horizontal" @submit.prevent> <p> <label>Name</label> <input id="inputName" type="text" class="form-control" v-model="dataToArray.name"> </p> <p> <label>Sex</label> <input type="radio" name="sex" value="male" v-model="dataToArray.sex"> Male <input type="radio" name="sex" value="female" v-model="dataToArray.sex"> Female </p> <p> <label>Select a Color</label> <select id="selectColor" class="form-control" v-model="dataToArray.color"> <option value="red">Red</option> <option value="blue">Blue</option> </select> </p> <p> <button class="btn btn-primary" @click="addToArray()">Add to Array</button> </p> </form> </div> <div class="col-xs-6"> <table id="table" class="table table-bordered" v-if="savedData.length > 0"> <thead> <th>Name</th> <th>Sex</th> <th>Color</th> <th></th> </thead> <tbody id="test"> <tr v-for="(data, index) in savedData" v-if="savedData[index].status"> <td>{{ data.name }}</td> <td>{{ data.sex }}</td> <td>{{ data.color }}</td> <td class="text-center"> <button @click="editThis(index)" class="btn btn-warning">Edit</button> <button @click="saveEdit(index)" class="btn btn-default">Save</button> <button class="btn btn-danger" @click="deleteThis(index)">Delete</button> </td> </tr> </tbody> </table> {{ dataToArray.id }} <br> {{ dataToArray.name }} <br> {{ dataToArray.sex }} <br> {{ dataToArray.color }} <br> {{ savedData }} </div> </div> </div> new Vue({ el: '#app', data:{ dataToArray: { id: null, name: '', sex: '', color: '', status: true }, savedData: [] }, methods: { addToArray(){ this.dataToArray.id = this.savedData.lenth; this.savedData.push(Object.assign({}, this.dataToArray)); }, deleteThis(index){ this.savedData[index].status = false; }, editThis(index, event){ document.getElementById("inputName").value = this.savedData[index].name; document.getElementById("selectColor").value = this.savedData[index].color; //check the form radio according to the current sex of the object }, saveEdit(index){ this.savedData[index].name = document.getElementById("inputName").value; this.savedData[index].color = document.getElementById("selectColor").value; //this.savedData[index].sex = get the new radio value } } });

This is the app:https://jsfiddle.net/myrgato/10uqa1e1/5/

The edit and save button, i wanted to hide the edit button and show the saved button when the edit button is clicked, and the otherway around when the save button is clicked.

Editing the sex value of the object, i cant get the new radio value (the checked one after i click edit and select a new one)

Hiding the table if there are no rows, i am able to do that at the first time by comparing it to the size of the looping array, but when i delete rows, i dont delete the objects from the array, i just change the status, so if add one object to the array and delete it, the row will be gone (shows only if status = true) but the table will not (because even tho there are no rows, the object still exists inside the array)

Can someone help me understand how to achieve this?

In this case, we want to filter the words in our input: <input type="text" class="form-control" placeholder="Write something..." v-model="todoInput"">

These are the banned words that we want to replace from the input

"banned", "apple", "banana",

Suppose this is my template:

<template> <div id="Test"> <transition name="fade"> <div class="row" id="RowOne"> <p>Lorem ipsum dolor odit qui sit?</p> </div> </transition> <transition name="fade"> <div class="row" id="RowTwo"> <p>Lorem ipsum dolor sit amet, consectetur.</p> </div> </transition> <transition name="fade"> <div class="row" id="RowThree"> <p>Lorem ipsum dolor sit amet, tenetur!</p> </div> </transition> </div> </template>

I want to display and animate RowOne, RowTwo and RowThree when it's in the displayed in the viewport, respectively. Like in the Laracasts website, the elements appear and animate when scroll position reaches the elements offset. Is it possible using Vue.js and javascript?

My view like this :

@foreach($leagues as $league) <a data-toggle="tab" @click="$refs.leagues.changeLeague({{ $league->id }})"> {{ $league->name }} </a> @endforeach ... <div class="tab-pane active"> <top-league class="slick" league-id="{{ $league_id }}" ref="leagues"></top-league> </div>

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' ]), changeLeague(leagueId) { this.getTopLeague([{league_id: leagueId}]) // this is ajax if a link clicked setTimeout( function(){ $('.slick').not('.slick-initialized').slick({slidesToShow: 3, infinite: false}); console.log('test') } , 10000 ); } } } </script>

When loaded the first time, there are 5 items of data displayed in the form of sliders. And the slider works. But if I click the another tab. For example I click League B, the slider not works. Whereas the result of console.log('test') run

How can I solve it?

My vue component like this :

<template> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-3" v-for="item in items"> <!-- this is images slider --> </div> </div> </template> <script> export default { ... mounted() { this.getTopLeague([{league_id: this.leagueId}]) // this is ajax if load first setTimeout( function(){ $('.slick').slick({slidesToShow: 4, infinite: false}); } , 10000 ); // I set 10 seconds for the finished ajax process just started the slider }, ... methods: { changeLeague(leagueId) { this.getTopLeague([{league_id: leagueId}]) // this is ajax if a link clicked setTimeout( function(){ $('.slick').slick({slidesToShow: 4, infinite: false}); } , 10000 ); //I set 10 seconds for the finished ajax process just started the slider } } } </script>

If the code executed, there exist error like this :

Uncaught TypeError: Cannot read property 'add' of null at jQuery.fn.init.a.fn.slick

The error occurs after 10 second or ajax process finished

I set the slider to run after 10 seconds because if the ajax process has not finished there is an error

How can I solve this problem?