Software

According to the Vue documentation I should be able to add the v-if condition to the <template> tag:

<template v-if="false"> <div>Invisible text</div> </template>

But this will not hide the element, but it does work when added to the child element:

<template> <div v-if="false">Invisible text</div> </template>

Any suggestions?

I'm including the template in another .vue file:

<template> <div id="app"> <H1 class= "main-title">Title</H1> <span class="components"> <testtemplate></testtemplate> </span> </div> </template>

I am trying to set CSP headers in my Vue 2.0 app and I have a problem with 'eval' policy.

When I use 'unsafe-eval' - it's all working fine. But when I get rid of it (I know I should) my scripts stop working. There is no error in console. But if I put eval() somewhere in my code intentionally - I get error in console.

I searched whole project (including libs) for "eval" and "new Function" but I can't find any usage of them.

So maybe there are some other functions which meet 'eval' rules? I am using Vue, but my code is built with Browserify + vueify.

I have a simple form in VueJS that I would like to have a computed property for one of the form fields. I would like the computed property to be calculated as the user inputs data and then saved as a data property before submitting the form to the server.

<form> <div> <h3>Revenue</h3> <input type="text" v-model="formData.revenue"> </div> <div> <h3>Expenses</h3> <input type="text" v-model="formData.expenses"> </div> <div> <h3>Operating Income</h3> <input type="text" v-model="formData.operatingIncome"> </div> </form>

JS

new Vue({ el: '#app', data: { formData: {} }, computed: { operatingIncome() { return this.formData.revenue - this.formData.expenses; } } });

The computed property for operatingIncome does not calculate unless I explicitly create properties for revenue and expenses within formData data object and change the to a string interpolation. Any suggestions on how to make this work?

As with any application a number of things can go wrong sooner or later. I have a large Vue application that sometimes throws some errors (I know, it shouldn't, but sometimes it does anyway) and I'd like to show a friendly message to the user so they won't be stuck waiting. Like a "generic error handler" of some kind on the window object.

I tried this: javascript: how to display script errors in a popup alert? but it does not fire.

Any other suggestions?

Trying out Vue for the first time and having some problem with some values not beeing recognized in the template even though they are set when checking with the Chrome Vue debug tool.

I'm doing this in a Wordpress context if that matters, with an inline template. I stripped down a lot of non-important code in my example below to just focus on the loader. I'm setting the loading value to true and here I'm not changing it anywhere. When loading the page I can see the spinner briefly then it disappears. However the value of loading is true when I check with debug tool. What am I doing wrong?

Javascript:

(function($) { var employeesListingElement = document.getElementById('vue-employees-listing'); if ( employeesListingElement ) { var EmployeesListing = new Vue({ el : employeesListingElement, data() { return { employees: [], filter: '', errors: [], loading: true } } }); } })(jQuery);

PHP

<div id="vue-employees-listing"> <div v-if="employees.loading" class="ajax-loader"> <img src="<?php echo get_theme_file_uri('/spinner.svg'); ?>"> </div> </div>

Can't find a way to update a specific component's prop from outside of the component.

I have an App.js which loads all components in .vue format. What a basically do is I import a counter.vue inside the App.js, and want to modify one of the specific component's data.

Main file App.js:

Vue.component('counter', require('./components/Counter.vue')); export const App = window.App = new Vue({ el: '#app', methods: { } });

Here is a Counter.vue file:

<template> <span class="counter">{{ number }}</span> </template> <script> export default { props: ['name', 'number'], }; </script>

In my HTML I have multiple counter instances:

<counter name="cnameA" number="10"></counter> <counter name="cnameB" number="20"></counter> <counter name="cnameC" number="30"></counter>

How to I increment a counter with name cnameB by 1 ?

I tried to use a #watch approach, but it's not exactly what I need.

I saw an example datepicker for use with vue.js 2 a few days ago. The thing that was different about it was that when you click on the input box, instead of opening a calendar-type user interface, each part of the date (month, day, year) scrolled vertically. I think there was some animation, too. It looked really polished.

Spent all morning looking for it again, but I can't find it. Can someone please help me locate this component?

I am following this example

I am trying to load a html file with vue.js and add into my template.

my attempt:

HTTML:

<html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="/Static/content/css/foundation.css"> <link rel="stylesheet" type="text/css" href="/Static/content/css/spaceGame.css"> </head> <body> <div id="app"> <div class="grid-container"> <div class="grid-x grid-padding-x"> <div class="large-12 cell"> <h1>Welcome to Foundation</h1> </div> </div> </div> <div class="grid-x grid-padding-x"> <div class="large-4 columns"></div> <div class="large-8 columns"> <component :is="currentView"></component> </div> </div> </div> <!-- Footer --> <script src="https://unpkg.com/vue"></script> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="/Static/scripts/foundation.js"></script> <script type="text/javascript" src="/Static/scripts/what-input.js"></script> <script type="text/javascript" src="/Static/scripts/space.js"></script> </body> </html>

script:

$(function() { $(document).foundation() var myData = '../../Views/login.html'; Vue.component('manage-posts', { template: myData, }) Vue.component('create-post', { template: '#create-template' }) new Vue({ el: '#app', data: { currentView: 'manage-posts' } }) });

Errors:

above I get the following:

• Component template requires a root element, rather than just text.

changing var myData = '../../Views/login.html';

to

var myData = '<div>../../Views/login.html</div>';

gets rid of that error but...how do I load the actual html file?

I am new to single page applications and to vue.js, been at this for some time now and can't figure it out.

I have a Vue instance.

var myApp = new Vue({ el: '#my-App', data: { user: sessionStorage.getItem('user') }, components: { 'header-component': httpVueLoader('./components/header-component.vue'), 'footer-component': httpVueLoader('./components/footer-component.vue') } });

And a single file component header-component

<template> <li v-if="user !== ''" class="nav-item"> <a class="nav-link" v-on:click="openProfilePage" href="#">{{user}}</a> </li> </template> <script> module.exports = { data: function () { return {} }, methods: { openProfilePage: function () { if (userName !== '') { myApp.page = 'profile'; sessionStorage.setItem('page', 'profile'); page = 'profile'; } else { myApp.page = 'login'; sessionStorage.setItem('page', 'login'); page = 'login'; } } } } </script>

I don't want to define a new data.user in my single file file component and i want to use the data.user of the vue instance. How can i do that? How can i pass this data?

Given that a colon indicates one-way-data-binding in VueJS2, I would like to understand why in this example, the child is able to update the array that was declared in the parent and passed to the child via prop (one-way).

https://jsfiddle.net/ecgxykrt/

<script src="https://unpkg.com/vue"></script> <div id="app"> <span>Parent value: {{ dataTest }}</span> <test :datatest="dataTest" /> </div> var test = { props: ['datatest'], mounted: function() { this.datatest.push(10) }, render: function() {} } new Vue({ el: '#app', components: { 'test': test }, data: function() { return { dataTest: [] } } })

Thanks in advance!

I have this input

<input type="text" :value="user.name" v-model="userInfo.name">

that is in a component edit.vue.

In users.vue I have router link

<router-link :to="'/users/edit-user/'+user.id"><a>Edit</a></router-link>

and when I click it takes me on edit component with the id of the actual user on url.

The problem is that if I put this v-model="userInfo.name" in that first input overwrites the data that I bring to edit it, the name.

If I delete this v-model="userInfo.name" from that input I can see the actual value of the input, that comes from database, I mean the actual name.

I need this v-model, in that edit page, to take the new input value and send it back to database.

In a normal edit, when you click on edit button, you suppose to see the actual data to edit it, not an empty input.

So why v-model overwrites that user.name value(that comes from a json users, from database) and what can I do to make a see the actual value and be able to send the modified value input in database?

i'm building a game that we use to play as kid on quadratic sheet, the idea is to encircle the other player dots like this image , i'm using vue.js and d3.js for javascript, i would like to do something like on this website , someone can tell me which technologies is used on that website and can also suggest the good one.

If someone know about this game tell me the name in english of that game

That you

This question already has an answer here:

• How to get client's IP address using JavaScript only? 36 answers

I am trying to store get client's ip address in vuejs. Any one please tell me a good way of doing that.

I have a Vue application and I want use a line-awesome font. But in my App.vue that is my component I import css file fonts in this way:

@import 'assets/fonts/line-awesome/css/line-awesome.min.css';

My problem is that no errors are shown, but my fonts are not loaded in my app.

In that css file, it contains this font face:

@font-face { font-family: "LineAwesome"; src: url("../fonts/line-awesome.eot?v=1.1."); src: url("../fonts/line-awesome.eot??v=1.1.#iefix") format("embedded-opentype"), url("../fonts/line-awesome.woff2?v=1.1.") format("woff2"), url("../fonts/line-awesome.woff?v=1.1.") format("woff"), url("../fonts/line-awesome.ttf?v=1.1.") format("truetype"), url("../fonts/line-awesome.svg?v=1.1.#fa") format("svg"); font-weight: normal; font-style: normal; }

Now I don't know if my problem is because my path is wrong setted or I need a additional configuration in my app.

Some idea about how I can fix it?

We are using VueDraggable (and Vue) in our front-end and we are testing our front-end with Dusk.

I am currently trying to use $browser->drag('selector', 'selector') from dusk to drag objects from one list to the other, but I don't see anything happening during the test (although it might be the action is not visible) nor is the right result shown, the object does not end up in the indicated list.

I was wondering if anybody made a working example already of using $browser->drag() combined with Vue.draggable? I am asking since I don't know if I am trying the impossible or not.

I follow this example for making new Traits type, it's completely working. Now I want this specific Textarea value show in HTML in GrapesJS.

editor.TraitManager.addType('textarea', { events:{ 'keyup': 'onChange', // trigger parent onChange method on keyup }, /** * Returns the input element * @return {HTMLElement} */ getInputEl: function() { var selectedModel = this.target; var input = document.createElement('textarea'); input.value = selectedModel.get('textarea'); return input; }, /** * Triggered when the value of the model is changed */ onChange: function () { this.target.set('textarea', this.model.get('value')); } }); { type: 'textarea', name: 'textarea' }

Here I show this textarea Example in GrapesJS.

Scenario: I have an iframe (which is hosted in the same domain, but purely use Jquery only) and it is already coded to trigger some events with parameters. And I have to catch those events with parameters in the parent vue.js application.

iframe:

$('*').mouseover(function (event) { var event = jQuery.Event( "mouseover-highlight" ); event.top = $(this).offset().top; event.left = $(this).offset().left; parent.$('body').trigger(event); });

vue.js

Catch this event somehow from the vue.js and set a div's css styles accordingly (Set the 'absolute' position). I have done it using vue.js before v2 comes by using Jquery inside the vue.js, But I've seen in the docs that vue.js isn't able to catch native events anymore. Any solution ?

Here is a simple Vue 2.0 form component. It consists of a number input and a button, e.g.:

Note that the value of the input is tied to the component's data using v-model. buttonText is passed in as a prop.

What's the best way to pass a default value into the form, so that it initially renders with a value other than 10?

• Using props doesn't seem to be the right way to do it because then v-model no longer works properly.
• However, data can't be passed in the way props can, as far as I can tell from Vue documentation.

.

<template> <form v-on:submit.prevent="onSubmit"> <input v-model="amount" type="number" min="1" max="20"></input> <button type="submit">{{ buttonText }}</button> </form> </template> <script> export default { props: [ 'buttonText' ], data: function() { return { amount: 10 } }, methods: { onSubmit: function() { this.$emit("submit", parseInt(this.amount) ); } } } </script>

I am using vue router and I have a route

{ path: '/my-route/:param?', component: MyComponent }

I have the link to my route as

<router-link :to="'/my-route/'+myParam">Link text</router-link>

if myParam is a string containing '/' like 'abc/def', it navigates to the link /my-route/abc/def which doesn't exists. How to solve this?

In my authority system I store secret token in Vue fields and get it from localStorage in created event:

const app = new Vue({ router: router, data: { token: '', user: null, }, created: function () { var token = localStorage.getItem('token'); if (token) { this.token = token; } ...

Then I'm trying to fetch token in beforeRouteEnter method of compomnent:

beforeRouteEnter: function (to, from, next) { var id = to.params.id; console.log(router.app.$root.token); },

But the field is empty, however it defined later. How to correct structure of my application to send api requests with token?