Software

I am trying to insert something like this into my website: https://vuejs.org/v2/examples/

In their example, the html looks like:

<div id="editor"> <textarea :value="input" @input="update"></textarea> <div v-html="compiledMarkdown"></div> </div>

my flask form looks like:

<form method="POST" action="{{ url_for('edit',itemid=item.id) }}" id="text-input"> {{ form.csrf_token }} <div style="margin-left:30px;margin-top:20px;"> Title: {{ form.title }} </div> <br/> Content: {{ form.content(cols="80", rows="50", id='larger')|safe }} <br/> Category: {{ form.category|safe }} <br/> <input type="submit" value="Save"> </form>

so somehow I need to change the line Content: {{ form.content(cols="80", rows="50", id='larger')|safe }} to indicate that it is using :value="input" and @input="update" . How can I do this? Do I do it in the Form definition on the server? Or perhaps with jquery once the page has been loaded?

I'm having what appears to be a rendering problem in Chrome.
I have a scrollable ul block that contains ~230 li items, each 80px tall, that is clipped by a white rectangle around the 70th item, until the end. The clipping area does not appear in the inspector, it is purely visual.
The hidden content is also still perfectly accessible and clickable, like normal.

The problem only appears in Chrome (MacOS), not even Chromium, and depends on the height of the viewport. Toggling the inspector, for example, will change the rendered height without any logic.

I tried to toggle pretty much every CSS that is applied to the related divs, without any success. I can't really post any code here since I don't know which part is responsible, but I'd be happy to if you have any clue.

Also, I'm using vue.js; the items are rendered by a v-for loop, I don't know if this is relevant here.

The issue I am having is similar to this question: Vue.js/vuex ajax update components with ajax state

First, I want to load some static topojson file to the store. This happens on mount of the main vue instance in main.js:

new Vue({ ... mounted () { this.$store.dispatch('topojsonStore/loadMunicipalityTopo', 'static/topojson_data/gem_2014.topojson') } })

This gets loaded in the store without problems. In the component where I want to visualize this data, I can access this data from the store just fine:

computed: { getMunicipalityTopo () { return this.$store.getters['topojsonStore/getMunicipalityTopo'] } }

I put the drawing functionality under a method in the component:

methods: { plotMunicipalities () { var width = 650, height = 770 var path = d3.geoPath() .projection(null) // TODO: fix projections var svg = d3.select('#map').append('svg') .attr('width', width) .attr('height', height) // Load topojson from store let topoJsonData = this.getMunicipalityTopo svg.append('path') .attr('class', 'municipalities') .datum(topoJsonData) .attr('d', path) }

This works fine if I attach this to a click event in the template, like so:

<button @click="plotMunicipalities()">Plot municipalities</button>

I want, however, to draw this stuff automatically when the page is loaded, and not after a click event. This is where I run into the asynchronicity issues... Putting this in the component, for example, does not work, as the data in the store is still not loaded:

mounted () { this.plotMunicipalities() }

How should I go from here? How can I trigger the function when the data in the store is loaded? I should mention that later, different layers will be loaded. Some layers will be unchangeable by the user, but for this particular layer it will be possible for the user to change it. Should I use a different workflow for these different layers?

I have a problem with documents, i want to download for the user after he started a export in my client.

The generation of the documents works fine and so the first part of my code. so everything until the last for loop is just for context. the first document in the for loop is downloading but the .click function somehow breaks my for loop. So after this line of code nothing is happening. I also tried to click with jQuery using the id of the new element. I am a little bit lost on this.

object.checked is a Object which contains every entity and a boolean which says if a document should be created.

object.usedFormats is a Object which contains also every entity and a integer which says if it should be created as excel or pdf file.

var docs = [] for(var prop in object.checked) { if(object.checked[prop] == true) { var a = document.createElement('A') if(object.usedFormats[prop + 'Format'] == 0) { a.href = 'api/export?type=' + prop a.target = "_blank" } else if(object.usedFormats[prop + 'Format'] == 1) { //TODO pdf Aufruf sobald Feature verfügbar a.href = 'api/exportpdf?type=' + prop a.target = "_blank" } else { Toastr.error('Falsches Format für Export gewählt!') } docs.push(a) } } for (var i = 0; i < docs.length; i++) { docs[i].id = 'dllink' + i document.body.appendChild(docs[i]) docs[i].click() document.body.removeChild(docs[i]) }

I need import some variable to vue component file. I am doing it this way:

require('imports-loader?myVar=>{test:12345}!./my-com.vue');

As result I get [Vue warn]: Error in render function: "ReferenceError: myVar is not defined"

I know about props, but I want pass namely a variable.

Here "my-com.vue":

<template> <div>...</div> </template> <script> console.log(myVar); // <--- here I get vue warn export default { props:['rows'], ... } </script>

Where I am wrong?
How it possible to import a variable to vue component file?

Thanks in advance.

I want to make the put, delete request with authorization header in vue.js. This is the request.

Put request:

PUT https://api.petbacker.com/v4/account/a20343be-6c9f-11e7-8c94-42010af001bb HTTP/1.1 User-Agent: Fiddler Host: api.petbacker.com Content-Length: 82

{ "accountInfo" :{ "email": "iwillverifyemail@petbacker.com" } }

Delete request:

DELETE https://api.petbacker.com/v4/account/a20343be-6c9f-11e7-8c94-42010af001bb/logout HTTP/1.1 User-Agent: Fiddler Host: api.petbacker.com Content-Length: 82 Authorization: RA a20343be-6c9f-11e7-8c94-42010af001bb:86aaccf288b7e4dc7692e4030dc96ace3ac009d3

{ "accountInfo" :{ "email": "iwillverifyemail@petbacker.com" } }

This is my code.

this.$http.put(url, accountInfo, {headers: {'Authorization': authHeader}}) .then((response) => { // if succeed }) .catch(e => { console.log(e) }) this.$http.delete(url, accountInfo, {headers: {'Authorization': authHeader}}) .then((response) => { // if succeed }) .catch(e => { console.log(e) })

I'm not sure it is correct. Let me know if you can solve this problem.

vue app is inside : C:\xampp\htdocs\booking

Laravel api is inside : C:\xampp\htdocs\booking-api

FYI : vue app is working on http://localhost:8080

If the folder structure is like above, then app works fine i can call the api like this,

axios.get('http://localhost/booking-api/public/Rooms').then((response)=>this.items = response.data);

But I want booking-api folder inside booking folder. If I place it and if I call the api like below,

axios.get('/booking-api/public/Rooms').then((response)=>this.items = response.data);

It wont work and the console window is like this,

Request URL:http://localhost:8080/booking-api/public/Rooms Request Method:GET Status Code:404 Not Found

So, how can I place api project inside vue app and how to call the api from vue.

Using Vue generated Vuecli with the webpack build. There's a lot of magic going on. What I can't figure out is how to generate the vendor prefixes needed for IE.

This was copied from github issue: https://github.com/vuejs-templates/webpack/issues/421#issuecomment-284322065

vue-loader.conf.js

var utils = require('./utils') var config = require('../config') var isProduction = process.env.NODE_ENV === 'production' module.exports = { loaders: utils.cssLoaders({ sourceMap: isProduction ? config.build.productionSourceMap : config.dev.cssSourceMap, extract: isProduction }), postcss: [ require('postcss-import')(), require('autoprefixer')({ browsers: ['ie >= 9'] }) ] }

Simple container component example

container/index.vue

<template> <div class="container"> <slot></slot> </div> </template> <script> import './index.scss' export default {} </script>

container/index.scss

// this is aliased in webpack.base.conf @import "~styles/base-config"; .container { @include grid(); // this generates display:flex and border-box resets max-width: 100%; margin: 0 auto; }

Expected inline output generated in the head, (but currently don't get -ms-flexbox or -webkit- prefixes )

<style> .container { -webkit-box-sizing: border-box; // not generated box-sizing: border-box; display: -webkit-box; // not generated display: -ms-flexbox; // not generated display: flex; max-width: 100%; margin: 0 auto; } </style>

Related:

• webpack2 vue-cli autoprefixer not work in js file when require scss file？

here is a piece of my code:

$(function () { var vm = new Vue({ el: '#app', data: { myObject : { id: "", _class : "", contentType : "TEXT", textValue : "", }, selected_language : "ENGLISH", }

I want to find a way to fill the textValue property with what is in selected_language. which mean that my object will look like:

myObject : { id: "", _class : "", contentType : "TEXT", textValue : "ENGLISH", }

Thanks for your help in advance, I am quite stuck

I have problem while working with nuxt js, for example when im working with vuejs webpack i have the following code and it works fine.

<div class="col span-1-of-2 navigation-terms"> <ul class="nav-terms"> <router-link :to ="{name: 'usering'}" tag = 'li' style="cursor:pointer;">Terms of use</router-link> <router-link :to ="{name: 'Conf'}" tag = 'li' style="cursor:pointer;">Confidentiality </router-link> </ul> </div> <div class="col span-1-of-2 display-terms"> <transition enter-class="" enter-active-class="animated fadeInRight" leave-class = '' leave-active-class = ''> <router-view> </router-view> </transition> </div>

However when im trying to implement something similar in nuxt.js by using this code:

<template> <div class=""> <nuxt-link to='sub/sub1'>Press me </nuxt-link> <nuxt-link to='sub/sub2'>Press me2 </nuxt-link> <h1>THAT TEXT IS MEANT TO STAY HERE RIGHT?</h1> <nuxt-child/> <nuxt-child> </nuxt-child> </div> </template>

It doesnt work, it redirects me to page that i need but it removes all the parent elements. Like in this case all the nuxt-links should stay there as well as the h1 text. So what am i doing wrong?

This is a full repo:https://github.com/StasB93R/nuxt-child

P.S i know i have nuxt-link/ plus opening and closing tags of the same sort, i just put 2 of them for the testing purposes I would highly appreciate any help

My vue component like this :

<template> <div class="row"> <div class="col-md-3" v-for="item in items"> ... </div> </div> </template> <script> export default { ... computed: { items() { ... } }, ... } </script>

If the loop complete, I want to call a statement or method

So the statement is executed when the loop completes

How can I do it?

I have a parent component with a grid of rows and I am using vuex to pass data, as i add a new record I would want to open the newly added record in a modal window. I am emitting an event and opening the modal with the first record (index = 0). The problem is that, as it is an ajax call to add record using an vuex "action", the emit happens before the record is added. How can I wait till the record is added with event? or Is there a better way to do it?

Below is the code:

<!-- Grid Component --> <grid> <addrow @newrecordadded="openNewlyAddedRecord"></addrow> <gridrow v-for="row in rows" :key="row._id"></gridrow> </grid> computed: { rows(){ return this.$store.state.rows; } }, methods:{ openNewlyAddedRecord(){ this.openmodal(this.rows[0]) } }

my store.js

state: { rows : [] }

so in addrow component once the user clicks on submit form it dispatches to vuex

methods:{ onsubmit(){ this.$store.dispatch('addrow',this.newrow); this.$emit("newrecordadded"); } }

actions.js

addrow({ commit,state }, payload){ var url = "/add"; Axios.post(url,payload) .then(function(response){ commit('addnewrow',response.data); }); }

mutations.js

addnewrow(state,payload){ state.rows.unshift(payload); }

Or alternatively can we pass a call back function to dispatch?

I'm using vuejs and almost everything I do is on client-side, but for thing I need to call the server-side to check if URL exists or not.

I don't want to make these requests from browser, because that doesn't make sense to fetch different website from my scripts that will be more like calling any bad website without user knowing it in background, so I need to call cloud-function(gce) or aws lambda(since I don't want to host the site on server for it, since it has just one api call).

What would be the best way to accomplish it, I'm looking for something like website is www.webapp.com and cloud-function call on www.webapp.com/checkUrl

I have a bit of a conundrum in my Vue/vuex/vue-router + Firebase app. The bootstrap code is supposed to initialize Firebase, as well as the signed in user (if any) in Vuex:

new Vue({ el: '#app', router, store, template: '<App/>', components: { App }, beforeCreate() { firebase.initializeApp(firebaseConfig) // Because the code below is async, the app gets created before user is returned... .auth().onAuthStateChanged(user => { this.$store.commit('syncAuthUser', user) // this executes too late... }) } })

In my routes, I have

{ path: '/home', name: 'Home', component: Home, meta: { requiresAuth: true } }

as well as

router.beforeEach((to, from, next) => { let authUser = store.getters.authUser // this is not set just yet... if (to.matched.some(record => record.meta.requiresAuth)) { if (!authUser) { next('signin') // /home will always hit here... } next() } else { next() } }) Problem

As mentioned in the comments, the app gets the authenticated user too late. So, when you go to /home while logged in, the app will run the beforeEachcheck in the routes... And the user instance will not be available just yet, so it will think that you are not logged in, when in fact you are (it's clear from my computed properties that are properly updated a few moments later).

Question

So, how do I change my code, so that the Vue app gets initialized only after Firebase returns the user and after that user is passed to the Vuex store? Plese let me know if I am doing something completely wrong.

Attempts

1. I tried the "unsubscribe" approach; however, its problem is that the onAuthStateChanged would only be triggered once. So, if I put my crucial this.$store.commit('syncAuthUser', user) there, then that code would only execute when the app is created, and not when the user logs out for example.
2. I also tried a better approach here. I did work for me, but I felt bad wrapping onAuthStateChanged in another Promise, for sure there must be a better way; plus, it seems wrong to place the auth user initialization login in the routes file.

So I have an array

const records = [ { value: 24, gender: "BOYS" }, { value: 42, gender: "BOYS" }, { value: 85, gender: "GIRLS" }, { value: 12, gender: "GIRLS" }, { value: 10, gender: "BOYS" } ]

And I want to get the sum so I used the JavaScript array reduce function and got it right. Here is my code:

someFunction() { return records.reduce(function(sum, record){ return sum + record.value; }, 0); }

With that code I get the value 173 which is correct. Now what I wanted to do is to get all the sum only to those objects who got a "BOYS" gender.

I tried something like

someFunction() { return records.reduce(function(sum, record){ if(record.gender == 'BOYS') return sum + record.value; }, 0); }

But I get nothing. Am I missing something here? Any help would be much appreciated.

It seems there is some overlap.

For instance, this code:

<div id="entry"> <textarea rows="20" v-model="input"></textarea> <div> {{ input | md }} </div> </div> <script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script> <script> var vm = new Vue({ el: '#entry', data: { input: '' }, filters: { md: function(val){ return marked(val) } } }) </script>

seems to work alright here: https://jsfiddle.net/5qvc815w/ (aside from the html tags rendered in the markdown)

but in flask I am getting

jinja2.exceptions.TemplateAssertionError TemplateAssertionError: no filter named 'md'

it seems to be looking to jinja2 to discover whats in the curly braces instead of in vue.js which it should be doing.

Defining a vuejs directive locally has issues when calling a method when being bound locally.

The problem: on tab/enter, look-up a value and set it based on what comes back (ie; setTimeout is the fake http call). Upon set time out completing, update the compute property.

I am aware of the migration docs says to use an 'eventHub' to communicate between the directive and the parent component. Is there another way to do this? If you check out the fiddle below, the global directive works perfectly while the local directive fails. I feel like the vm is not being bound properly on the local directive.

Local directive:

new Vue({ el: '#vue', directive: { localSomething: { bind (el, b, n, o) { $(el).on('keydown', function(e) { if(e.keyCode == 13 || e.keyCode == 9) { b.value($(el).val()); } }); } } }, ...

Global directive:

Vue.directive('globalSomething', { bind (el, b, n, o) { $(el).on('keydown', function(e) { if(e.keyCode == 13 || e.keyCode == 9) { b.value($(el).val()); } }); } });

Html:

Local: <input v-local-something="doSomething" /> Global: <input v-global-something="doSomething" />

Method:

methods: { doSomething: function(value) { let vm = this; setTimeout(function() { vm.item.name = value; }); }

Fiddle here: https://jsfiddle.net/4g1xyy9h/

Can you show me how can I run TinyMCE from VueJS2

I tried everything

I want to run it with this package https://www.npmjs.com/package/tinymce-vue-2 but i can't find out how to do it

thank you

I'm building a small app and want to authenticate it via Facebook. I have enabled Facebook as an auth method in the Firebase dashboard, provided my Facebook app tokens and the auth URI to Facebook.

This issue is this:

Uncaught TypeError: WEBPACK_IMPORTED_MODULE_0__firebase_config_js.a.FacebookAuthProvider is not a constructor

Here is the Vue JS Method in question:

const sphinx = firebaseApp.auth()

methods: { signUp (event) { sphinx.getRedirectResult().then(function (result) { if (result.credential) { var token = result.credential.accessToken } var user = result.user console.log(token, user) }) // Start a sign in process for an unauthenticated user. var provider = new sphinx.FacebookAuthProvider() sphinx.signInWithRedirect(provider) } }

It seems to have something to do with the line:

var provider = new sphinx.FacebookAuthProvider()

But I'm still fairly new to JS, but I think the issue is related to new in an ES6 environment? And if so, how can I change this.

I want to pass an Laravel object to my Vue component. In Vue I want to parse the data to an JSON object and I already tried this solution.

In my blade I have this:

<creator :object="parseData({{ $object->toJson() }})"></creator>

And in my component I have this:

data() { return { ball: null } }, parseData(data) { this.object= JSON.parse(data); }

This gives me the following error:

[Vue warn]: Property or method "parseData" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

Can you tell me what I am doing wrong?