Vuejs

I have an existing python/django app with jinja template engine.

I have a template with a filter and a list the gets rendered correctly via server, also the filters work perfectly without javascript. (based on url with parameters)

The server also responds with json if the same filter url is requested by ajax. So it's ready for an enhanced version.

Now: I would like to make it nicer and update/rerender the list asynchronously when I change the filter based on the json response I receive.

Questions:

1. When I init the vue on top of the page template, it removes/rerenders everything in the app. All within the vue root element becomes white. Can I declare only parts of my whole template ( the one filter and the list) as separate vue components and combine these instances (there are other parts that are not part of the async update part vue should not take of)

2. Can I somehow use the existing markup of my components in jinja to be used to rerender the components again with vue or do I have to copy paste it into javascript (please no!) ?

TLDR: I don't wan't to create the whole model with vue and then prerender the whole app (modern SSR way) and vue will find out the diff.

I just want to use vue on top of an existing working django app.

i can't understand what the ... want this vue! please help if you can! this is my code

var groupadding = new Vue({ el: '#groupAdd', data:{ currentFullData: [], localData: [] }, methods: { getDepartment() { var sendData = id; // this is example this.$http.post('some api ', sendData, {emulateJSON: true}) .then( resp => { this.currentFullData = resp.data; } }, getLocalDepartment() { this.localData = this.currentFullData; } } })

in currentFullData for example i have 4 boolean field, 'create' , 'read', 'update', 'delete'

this 4 fields gets localData too, but when i change in localData some of them, they changes in currentFullData too!!!!!!!!!!!!!!!

soooooo anyone can explain me wtf is this?!?!?!

I am developing an application with vuejs, and using vue-route for routing. I created a route.js as:

import Vue from 'vue' import VueRouter from 'vue-router' import Content from './components/Content.vue' Vue.use(VueRouter) const router = new VueRouter({ mode: 'history', routes: [ { path: '/', component: Home, meta: { forVisitors: true, title: 'Univibe Plus', } }, { path: '/content', component: Content, meta: { forVisitors: true, title: 'Content', } } ] }) export default router

on running sudo npm run dev routes are working fine, but when I create production application using sudo npm run build only / page is working and /content page is not working and giving error "cannot get page /content". Kindly help me out here.

I am using Vue.js with Chart.js in order to retrieve some data from Firebase and display it on a chart. This is my code:

import {Line} from 'vue-chartjs' let Firebase = require('firebase'); // let config = { apiKey: '****************************', authDomain: '****************************', databaseURL: '****************************', storageBucket: '****************************' }; let firebaseApp = Firebase.initializeApp(config); let db = firebaseApp.database(); let schools = db.ref('schools'); export default Line.extend({ firebase: { schoolsArray: schools }, data(){ alert('data'); return { names: [] } }, computed: { schoolNames: function () { for (let item of this.schoolsArray) { this.names.push(item.name); } alert('computed'); return this.names } }, mounted () { alert('mounted'); this.renderChart({ labels: this.names.toString(), datasets: [{ label: 'School Reports', backgroundColor: '#dd4935', data: [10, 20, 50, 12, 34, 43, 45] }] }, {responsive: true, maintainAspectRatio: true}) } })

The problem is that the names array are always empty and the labels are not displayed. Here is how it looks:

I need to display the school names on the x axis!

I tried to understand the utility of Vue.js from its site Vue, but I still fighting to get best out of it.

There are tons of framework available in the market including angular and react, Why someone will go in different direction with the progressive web application?

Can anybody help me by explaining how it works and how could it be helpful in using Vue to create a better application?

I have 2 components Parent and Child - a parent can have many children. I need the children to know their position (index) in relation to their siblings.

Javascript

Vue.component('Parent', { template: '<div><slot></slot></div>', mounted: function() { this.$children.forEach(function(child, index) { /* attempt one */ child.$el.setAttribute('test-prop', index); /* attempt two */ child.$props.testProp = index; }) } }) Vue.component('Child', { template: '<div><span>{{testProp}}</span><slot></slot></div>', props: ['testProp'] });

Markup

<Parent> <Child>some complex html</Child> <Child>some complex html</Child> <Child>some complex html</Child> <Child>some complex html</Child> </Parent>

attempt one results in undefined but dom inspector shows the property has been applied

attempt two throws a direct prop mutation warning but the child still doesn't appear to have access to the index.

The indices are only known at the point of Parent being mounted, so I can't apply the prop directly to the Child elements in the Markup.

What would be the best way to tackle this?

I have a table that look like :

here i can define how many rows and columns i want on my table and the table get updated as i want, at here everything fine, the next step i need is to change the content of each cell and bind it to an array, i really don't know how to accomplish this, seems like contenteditable has some issues with v-model.

Another problem is that i don't know how to pass the data to my data object, should i pass it as a matrix? a array? i need to know each input for the specific row and columns, any help?

here is what i did so far:

<template> <div> <form class="form-horizontal"> <h2 class="text-center"> Table </h2> <div class="form-group"> <div class="col-md-1"> <button @click="changeView('appTableStyle')" type="button" class="form-control btn btn-xs btn-warning"> <span class="glyphicon glyphicon-pencil"></span>&nbsp; </button> </div> <label for="rows" class="control-label col-md-1">style:</label> <div class="col-md-6"> <select class="form-control" v-model="table.tableStyle"> <option v-for="(item,key) in tableStyles" :value="item.Id"> {{ item.style }} </option> </select> </div> </div> <div class="form-group"> <label for="rows" class="control-label col-md-2">rows:</label> <div class="col-md-2"> <input type="number" min="1" v-model="table.rows" class="form-control" id="rows"> </div> <label for="columns" class="control-label col-md-1">columns:</label> <div class="col-md-2"> <input type="number" min="1" v-model="table.cols" class="form-control" id="cols"> </div> <label for="columns" class="control-label col-md-2">How Many?:</label> <div class="col-md-2"> <input type="number" min="1" v-model="insert" class="form-control" id="cols"> </div> </div> <table class="table table-responsive" style="background-color:lightGray"> <tbody> <tr v-for="(row,idx2) in tableRows"> <td v-model="table.colsArr[idx]" :key="" class="table-success" v-for="(col,idx) in tableCols" contenteditable="true">{{idx}}</td> </tr> </tbody> </table> <div class="form-group"> <div class="col-sm-offset-2 col-sm-9"> <div class="text-center"> <button type="submit" @click.prevent="addTable" class="btn btn-success margin-above2 btn-block">Add Table</button> </div> </div> </div> </form> </div> </template> <script> export default { name: 'app', data () { return { table: { rows: 1, cols: 1, key: 'Table', tableStyle: 1, colsArr: [] }, insert: 1 } }, methods: { }, changeView: function (view) { this.$store.commit('changeCurrentView', view) } }, computed: { tableStyles () { return this.$store.getters.getTableStyles }, tableRows () { return parseInt(this.table.rows) }, tableCols () { return parseInt(this.table.cols) } } } </script>

I'm following this tutorial to make an app w/ Framework7-Vue. http://blog.toast38coza.me/building-a-mobile-app-with-vuejs-cordova-webpack-and-framework-7/

For some reason, I see a blank screen once I've copied all the code and installed everything. I get no errors during compile time. I get the following error once the app is running in the console

Uncaught TypeError: Cannot assign to read only property 'prototype' of function 'class Template7 { constructor(template) { const t = this; t.template = template; function getCom...<omitted>... }' at Object.eval (webpack-internal:///29:381) at eval (webpack-internal:///29:557) at Object.<anonymous> (app.js:879) at __webpack_require__ (app.js:660) at fn (app.js:86) at eval (webpack-internal:///21:1) at Object.<anonymous> (app.js:826) at __webpack_require__ (app.js:660) at fn (app.js:86) at eval (webpack-internal:///10:3)

Any ideas what could be causing this?

I have the following jsfiddle example (check the console) and all you will see is [object Object] instead of person data:

So, basically I have a vuejs instance and a div for v-for to iterate an object

<div id='app'> <p v-for="person in people[0]"> <span> {{ person.name }}</span> <i class="fa fa-check" v-bind:data-identity="person" @click="addDetail($event)"></i> </p> </div>

The problem is that if I echo {{ person }} I can see a JSON data on the page, but if I try to get it in the function addDetail() with e.target.dataset.identity then all I get is [object Object] and not the json data. I have tried JSON.parse and String methods, non of them work.

iam using vue-factory to inject some service in my nuxt app (vue-ssr). the problem is i can't use my service in asyncMethod & fetchMethod in nuxt. The service can only running on browser event (in mounted and methods);

i have trying this to add my service on context method in nuxt, but its raise an error in browser Cannot redefine property: $Vue

import Vue from 'vue'; import factory from 'vue-factory'; import postService from '../service/postService'; import commentpostService from '../service/commentpostService'; Vue.use(factory); Vue.factory.register({ 'postService': postService, 'commentpostService': commentpostService, }); export default ({ app, store }) => { Vue.factory.register({ 'postService': postService, 'commentpostService': commentpostService, }); // app.postService = postService; // app.commentpostService = commentpostService; }

can anyone solve this

I'm still learning Vue.js 2 so I do apologize if this question is a bit silly. I'm building an application using MongoDB, Node, Express and Vue. Normally I'd use a template engine such as Ejs where data passed through Express's res.render method can be readily captured in the template.

Is there a similar way to pass data from backend to the root Vue component? For example, normally, a get request fetches some data from Mongodb, express will render the template file and pass data to it.

app.get("/gallery/:id", function(res, req) { var id = req.params.id; database.findById(id, function(err, data) { .... res.render("home", data); } });

Now my root Vue application is attached to html file. I'd like to be able to dynamically render the app with data returned from the database.

I've built an app before that streams data from an api and passed it to my Vue component via socket but I feel like using a socket in this case is unnecessary.

Signin form:

<form @submit.prevent="signIn()" enctype="multipart/form-data"> <div class="form-group" :class="{'has-error': errors.has('login.signin_mobile_number') }" > <input v-model="login.signin_mobile_number" name="signin_mobile_number" v-validate="'required'" class="form-control" type="number" placeholder="Mobile Number"> </div> <div class="form-group" :class="{'has-error': errors.has('login.signin_password') }" > <input v-model="login.signin_password" name="signin_password" v-validate="'required'" class="form-control" type="password" placeholder="Password"> </div> <a href="" class="frgt-pwd">Forgot Password? </a> <div class="modal-footer btn-center"> <button type="submit" class="btn btn-default">Sign In</button><br><br> <a href="" data-dismiss="modal" id="signin"> Or Sign Up </a> </div> </form>

script:

export default { data() { return { login: { signin_mobile_number: '', signin_password= '', } } }, methods: { signIn() { this.$validator.validateAll().then((result) => { }); axios.post(config.apiDomain+'/Login',this.login).then(response=>{ this.login=""; }); }, signUp() { this.$validator.validateAll().then((result) => { }); axios.post(config.apiDomain+'/Register',this.register).then(response=>{ this.register=""; }); }, } }

Login Controller:

<?php namespace App\Http\Controllers; use App\Login; use Illuminate\Http\Request; use App\Http\Controllers\Controller; use Illuminate\Support\Facades\Auth; class LoginController extends Controller { public function authenticate() { $mobile_number = $request->get('mobile_number'); $password = $request->get('password'); if (Auth::attempt(['signin_mobile_number' => $mobile_number, 'signin_password' => $password])) { // Authentication passed... return redirect()->route('Home'); } else { return redirect()->back() ->with('message','Incorrect email or password') ->with('status', 'danger') ->withInput(); } } public function store(Request $request) { $input = $request->all(); Login::create($input); } }

The register form also:

<form @submit.prevent="signUp()"> <div class="form-group" :class="{'has-error': errors.has('mobile_number') }" > <input v-model="register.mobile_number" name="mobile_number" v-validate="'required'" class="form-control" type="number" placeholder="Mobile Number"> </div> <div class="form-group" :class="{'has-error': errors.has('email') }" > <input v-model="register.email" name="email" v-validate="'required'" class="form-control" type="email" placeholder="Email"> </div> <div class="form-group" :class="{'has-error': errors.has('password') }" > <input v-model="register.password" v-validate="'required|confirmed:confirm_password'" name="Password" class="form-control" type="password" placeholder="Password"> </div> <div class="form-group" :class="{'has-error': errors.has('confirm_password') }" > <input v-model="register.confirm_password" name="confirm_password" class="form-control" type="password" placeholder="Confirm Password"> </div> <div class="modal-footer btn-center"> <button type="submit" class="btn btn-default">Sign Up</button> </div> </form>

The above were the codes that i have used to do sign in functionality, Here i have given a form with signIn() method and i have made a api call inside it and the values are getting stored in database.. But the thing is i need to do login for the registered user only .(i.e,) if i give any details inside login it taking and storing in db but i need to restrict this that only registered user has to get login otherwise error message needs to be displayed, i am new with laravel so kindly let me know how should i make the change in the controller for login only by registered user.

i'm creating modal with vuejs and following this example but i create a separated file for modal so i can simply call my modal component anywhere i need to like this

here is my modal.vue

<template> <div class="modal-mask" @click="close"> <div class="modal-dialog" :class="size"> <div class="modal-content"> <div class="modal-header" :class="color"> <button type="button" class="close" @click="close">&times;</button> <h6 class="modal-title">{{ title }}</h6> </div> <div class="modal-body"> <slot></slot> </div> <div class="modal-footer"> <slot name="button"></slot> </div> </div> </div> </div> </template> <script> export default{ props: ['title','color','size'], methods: { close(){ this.$emit('close'); } } } </script> <style> .modal-mask { position: fixed; z-index: 9998; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); transition: opacity .3s ease; } </style>

and in index.vue where i want to call it i just simply

<app-modal :title="modalTitle" :size="modalSize" :color="modalColor" v-if="modalShow" @close="modalShow = false" > </app-modal>

now my question is i want to use 2 kind of transition, first is in my index.vue page

<transition name="modal"> <app-modal :title="modalTitle" :size="modalSize" :color="modalColor" v-if="modalShow" @close="modalShow = false" > </app-modal> </transition>

and the second one is in my modal.vue like this

<template> <div class="modal-mask" @click="close"> <transition name="modal-inside"> <div class="modal-dialog" :class="size"> <div class="modal-content"> <div class="modal-header" :class="color"> <button type="button" class="close" @click="close">&times;</button> <h6 class="modal-title">{{ title }}</h6> </div> <div class="modal-body"> <slot></slot> </div> <div class="modal-footer"> <slot name="button"></slot> </div> </div> </div> </transition> </div> </template>

why i want it like that well simply because in there is modal-mask class that warp entire modal and that css class is add some dark/shade background so user can focus on the modal.... exactly like bootstrap modal fade effect and then after that i want everything inside div modal-dialog to show/transition after modal-mask is already finished its transition

so it will just first darken background and then show modal... they move separately one after another.. not at the same time

or to be more easy to imagine it i want to generate exactly like bootstrap modal

I would like to check the to and from of the route path with scrollBehavior to manage the scroll behaviour.

global.router = new VueRouter({ routes, scrollBehavior(to, from, savedPosition) { console.log('>>> to', to); console.log('>>> from', from); switch (to.path) { case '/in-list': break; case '/your-list': break; default: return {x: 0, y: 0} } }, mode: 'history', });

Suppose, I navigate from About page to the In-List or Your-list page, I would like to return {x: 0, y: 0}. However, when navigating between In-list or Your-list I would like no such behaviour.

However, both to and from return the same path. They both return the to.path so I cannot check where it was navigated from. What am I missing here?

i'm having this setup where i have child component props that have datetime format inside it and i want to change it to more human readable format in my table, so i use moment js to change the format and to do those kind of task it will be make more sense if i use computed property. Like this in my index.vue

<div class="page-container"> <div class="page-content"> <div class="content-wrapper"> <data-viewer :source="source" :thead="thead"> <template scope="props"> <tr> <td>{{props.item.name}}</td> <td>{{props.item.creator}}</td> <td> <i class="icon-checkmark5" v-if="props.item.publish === '0'"></i> <i class="icon-cancel-circle2" v-else></i> {{props.item.publish}} //for testing purpose to see returned value </td> <td>{{publishDate}}</td> //this is where i put my computed to change created_at format </tr> </template> </data-viewer> </div> </div> </div> <script type="text/javascript"> import DataViewer from '../../components/dataviewer.vue' import moment from 'moment' export default{ components:{ DataViewer }, data(){ return{ source: '/api/article', thead: [ {title: 'Name', key: 'name', sort: true}, {title: 'Creator', key: 'creator_id', sort: true}, {title: 'Publish', key: 'publish', sort: true}, {title: 'Created', key: 'created_at', sort: true} ], } }, computed: { publishDate: function(){ return moment(props.item.created_at).format('YYYY-MM-DD') } } } </script>

and here is what inside my dataviewer file

<template> <table class="table"> <thead class="bg-primary"> <tr> <th v-for="item in thead"> <span>{{item.title}}</span> </th> </tr> </thead> <tbody> <slot v-for="item in model.data" :item="item"></slot> </tbody> </table> </template> <script> import Vue from 'vue' import axios from 'axios' export default { props: ['source', 'thead'], data() { return { model: { data: [] }, } }, beforeMount() { this.fetchData() }, methods: { fetchData() { var vm = this axios.get(this.source) .then(function(response) { Vue.set(vm.$data, 'model', response.data.model) }) .catch(function(error) { console.log(error) }) } } } </script>

but it just won't work, it can't find props.item.created_at, so how i can change created_at or any other property item to change from my index.vue?

I'm trying to put Bootstrap Select2 in a Vue wrapper. Somehow, my code works. But It doesn't seem proper to me.

I found a reference in here https://vuejs.org/v2/examples/select2.html In the VueJS website example, the el is empty. I didn't stick to this concept where in the new Vue part, they included a template because my el have sidebars and other stuffs also. What I did was I added a

<admin-access></admin-access>

to a section in the HTML.

I think I made my component nested which I'm skeptical if it is proper in VueJS.

Is there a better way to code this?

Templates

<template id="select2-template"> <select> <slot></slot> </select> </template> <template id="admin-access"> <div> <transition name="access" enter-active-class="animated slideInRight" leave-active-class="animated slideOutRight" appear> <div class="box box-solid box-primary" v-if="admin" key="create"> <div class="box-header with-border"> <i class="fa fa-text-width"></i> <h3 class="box-title">Create Admin</h3> </div> <div class="box-body"> <form action="" class="search-form"> <div class="form-group"> <label for="search_user_admin">Search User</label> <select2 name="search_user_admin" id="search-user-admin" class="form-control select2" :options="options" v-model="selected"> <option disabled value="0">Select one</option> </select2> </div> </form> </div> </div> </transition> </div> </template>

Script

Vue.component('admin-access', { template: '#admin-access', props: ['options', 'value'], created: function() { $('#search-user-admin').select2({ placeholder: "Select User", allowClear: true }); }, data: function() { return { admin : true, selected : false } }, }); Vue.component('select2', { template: '#select2-template', data: function() { return { selected: 0, options: [ { id: 1, text: 'Hello' }, { id: 2, text: 'Darkness' }, { id: 3, text: 'My' }, { id: 4, text: 'Old' }, { id: 5, text: 'Friend' } ] } }, mounted: function() { var vm = this; $(this.$el).select2({ data: this.options, placeholder: "Select an option", }) .val(this.value) .trigger('change') .on('change', function () { vm.$emit('input', this.value); }); }, watch: { value: function (value) { $(this.$el).val(value).trigger('change'); }, options: function (options) { $(this.$el).select2({ data: options }); } }, destroyed: function () { $(this.$el).off().select2('destroy'); } }); var admin = new Vue({ el: '#app' });

I just started using Nuxt for server side rendering. It seems like a great framework. But I don't like about it is it generates lots of ugly html markups, js links, and the css is basically being dumped into the html directly. Also, you see lots of data-s. For example:

<!DOCTYPE html> <html data-n-head-ssr data-n-head=""> <head> <meta data-n-head="true" charset="utf-8"/><meta data-n-head="true" name="viewport" content="width=device-width, initial-scale=1"/><meta data-n-head="true" data-hid="description" name="description" content="Nuxt.js project"/><title data-n-head="true">Users</title><link data-n-head="true" rel="icon" type="image/x-icon" href="/favicon.ico"/><link rel="preload" href="/_nuxt/manifest.1dd9a3883f67d40b9aa7.js" as="script"><link rel="preload" href="/_nuxt/common.992cf40ea79f7d7937d8.js" as="script"><link rel="preload" href="/_nuxt/app.2d1407798eb328e5c249.js" as="script"><link rel="preload" href="/_nuxt/layouts/default.1360f17fdf8a6083917d.js" as="script"><link rel="preload" href="/_nuxt/pages/users.a5ea843f780a24b7dfd7.js" as="script"><link rel="prefetch" href="/_nuxt/pages/index.3c2e71cd997494896cb8.js"><link rel="prefetch" href="/_nuxt/pages/users-name.353da70d66b2cb18c1c9.js"><link rel="prefetch" href="/_nuxt/pages/about.7e9c73cd5e6253d976d6.js"><link rel="prefetch" href="/_nuxt/layouts/dark.9d852c7e76764cd94b7c.js"><link rel="prefetch" href="/_nuxt/pages/tasks.67c8259c9b53f68ea9a3.js"><style data-vue-ssr-id="5e853cdc:0">body,html{background-color:#fff;color:#000;letter-spacing:.5px;font-family:Source Sans Pro,Arial,sans-serif;height:100vh;margin:0}footer{padding:20px;text-align:center;border-top:1px solid #ddd}a,a:focus,a:hover,a:visited{color:#000}.logo{width:100%;height:auto;max-width:400px;max-height:289px}.layout-enter-active,.layout-leave-to{-webkit-transition:opacity .5s;transition:opacity .5s}.layout-enter,.layout-leave-to{opacity:0}</style><style data-vue-ssr-id="c6f373dc:0">.progress[data-v-5b643829]{position:fixed;top:0;left:0;right:0;height:2px;width:0;-webkit-transition:width .2s,opacity .4s;transition:width .2s,opacity .4s;opacity:1;background-color:#efc14e;z-index:999999}</style><style data-vue-ssr-id="59c3f703:0">.title[data-v-2941d5fc]{margin:30px 0}.users[data-v-2941d5fc]{list-style:none;margin:0;padding:0}.user[data-v-2941d5fc]{margin:10px 0}</style> </head> <body data-n-head=""> <div id="__nuxt" data-server-rendered="true"><div class="progress" style="width:0%;height:2px;background-color:black;opacity:0;" data-v-5b643829></div><section class="container" data-v-2941d5fc><img src="/_nuxt/img/logo.a04e995.png" alt="Nuxt.js Logo" class="logo" data-v-2941d5fc><h1 class="title" data-v-2941d5fc> USERS </h1><ul class="users" data-v-2941d5fc><li class="user" data-v-2941d5fc><a href="/users/jona" data-v-2941d5fc> jona </a></li><li class="user" data-v-2941d5fc><a href="/users/jon" data-v-2941d5fc> jon </a></li><li class="user" data-v-2941d5fc><a href="/users/jonas" data-v-2941d5fc> jonas </a></li></ul></section></div><script type="text/javascript">window.__NUXT__={"layout":"default","data":[{"users":[{"_id":"59a53db03a35535198135b15","id":null,"name":"jona"},{"_id":"59a53ded3a35535198135b17","id":null,"name":"jon"},{"_id":"59a574afd5bc922f3dbf8b68","id":null,"name":"jonas"}]}],"error":null,"serverRendered":true};</script><script src="/_nuxt/manifest.1dd9a3883f67d40b9aa7.js" defer></script><script src="/_nuxt/layouts/default.1360f17fdf8a6083917d.js" defer></script><script src="/_nuxt/pages/users.a5ea843f780a24b7dfd7.js" defer></script><script src="/_nuxt/common.992cf40ea79f7d7937d8.js" defer></script><script src="/_nuxt/app.2d1407798eb328e5c249.js" defer></script> </body> </html>

This is plain ugly to me:

<div id="__nuxt" data-server-rendered="true"><div class="progress" style="width:0%;height:2px;background-color:black;opacity:0;" data-v-5b643829></div><section class="container" data-v-2941d5fc>

Why do I need id="__nuxt" for?

How can I build all the js files into one file - not sure if this is possible?

How can I not to embed the entire css into the html?

How is this going to effect SEO?

Trying to add to a store on click from an input. There would be multiple inputs with different parts of an objects info. How can I grab in input data from a method?

In this case, I'm working with packets via a store

<input label="Packet Name" v-model="packets.name" required><br> <input label="Packet Name" v-model="packets.folder" required><br> <button @click="addPacket">Add</button>

On the addPacket call how do I get the input data?

Full jsfiddle : https://jsfiddle.net/tga9sfcm/1/

I hope you can help me with this. I am trying to dynamically display some buttons according to an API call. I just dont happen to manage to receive the data before the page renders.

new Vue({ el: '#app', data : function(){ return { results : [], } }, beforeCreate : function(){ axios.get('somesite') .then(function (response) { this.results = response.data; console.log(this.results); }) .catch(function (error) { console.log(error); }); }, })

and the html is:

<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no"> <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"> </head> <body> {% raw %} <div class="container"> <div id="app"> <div class="response_list"> <button class="entries" v-for="entry in results"></button> </div> </div> </div> {% endraw %} <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript" src="{{ url_for('static', filename='js/index.js') }}"></script> </body> </html>

I'm trying to use a click method and an event handler on the same input box.

Only addLocale works, while showTip does not. However, if I remove one, the other begins to work. I'm not getting any errors so it's really hard to debug.

Is there some type of "collision" between @click and @keyup events in VueJS?

Here's my input field

<input type="text" v-model="addLocation" @click="showTip('local')" @keyup.enter="addLocale" >

Here are my methods

methods: { showTip(type) { if (type === 'locale') { this.audienceTip = false this.localeTip = true } if (type === 'audience') { this.localeTip = false this.audienceTip = true } }, addLocale() { if (this.addLocation) { this.selectedLocations.push(this.addLocation) this.addLocation = '' } } }