Software
Vue.js datepicker with vertically scrolling month/day/year
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?
How to fetch local html file with vue.js?
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.
Vue.js Passing Data via httpVueLoader
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?
Vue.js - One-way data binding updating parent from child
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!
v-model overwrite input value in VueJS
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?
How to build a grid like this and zoom effet
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
Is it possible to get client's ip address in vuejs [duplicate]
This question already has an answer here:
I am trying to store get client's ip address in vuejs. Any one please tell me a good way of doing that.
Import CSS file with Fonts in VueJS
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?
Is it possible to use browser->drag() from dusk with Vuedraggable?
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.
How to get value of textarea field in HTML using Traits in GrapesJS
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' }How to catch Jquery event from vue.js
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 ?
Passing default data to Vue form component
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>How to pass a string containing slash ('/') as parameter to a route in vue.js
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?
Access to vue properties
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?
nuxt build --spa vs nuxt generate
What is the difference between
nuxt build --spavs
nuxt generateI am trying to compile three different variations:
1. regular nuxt with ssr 2. prerendered spa 3. spa without prerenderingI am struggling to find the appropriate commands for it
List rendering key
The documentation states that list rendering using v-for without key is
only suitable when your list render output does not rely on child component state or temporary DOM state (e.g. form input values).
Will the following code cause problems if itemArray is modifed using splice/push/pop?
<div v-for="item in itemArray"> ... <textarea v-bind:value="item.value" v-on:input="item.value = $event.target.value"> </textarea> ... </div>If not, what is an example where there would be a problem?
Difference between scoped CSS and "scope" by adding a parent class
When building an app using vue, vue-loader and the official boilerplate I noticed scoped css is used to limit the CSS to the current component. I don't see the point in this. I have always "scoped" css by defining it inside a wrapper class when I have felt the need for it.
For example in SASS:
.some-module { h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } }So what do i gain from using scoped CSS instead? Or is it merely just another method to achieve the same thing?
how to hot reload component with ts and vue-property-decorator
Every code I changed on the .ts file will trigger the browser refresh, and I do not want it work this way. I have tried many solutions like "vue-ts-loader", "vue-hot-reload-api",..., but I have not found a good one. How you guys fixed this issue?
Update the View of a web application from a DynamoDB update
Just wondering if anyone has done something like this. I'll add some context.
So there are two applications. A mobile app and a Vue.js web application which acts as a static DevOps board. The mobile app makes an updated to the DynamoDB table which the DevOps board should be listening too and updated the view. Like a live reload. I want to try and stay away from a timer of sorts to make a call to the DB again and pull down the objects.
I know Firebase acts like a live reload of data but I want to try and just use AWS unless someone has done something like this before.
Thanks
Can't load static files inside Vue.js component
I have component Login.vue and inside its template I paste
<img src="logo.png">The catalog structure is the same as here: https://vuejs-templates.github.io/webpack/static.html
I got static folder inside src folder.
I try many diffrent combinations like
<img src="src/assets/logo.png"> <img src="assets/logo.png">When I try to write with a dot prefix (absolute path)
<img src="./src/assets/logo.png">I got and error from babel compiler: Module not found: Error: Can't resolve './logo.png'