Software

I have install Vue Devtootls but each time I have errors it doesn't show in the console I see o laracast they have like [vue: warn] and the error. I put this code but nothing.

catch(function(error){ console.log(error.message); }); }

I have a simple Vue.js app with 2 iframes.

Using Vue Router I'd like to switch between the two iframes, but I'd like to keep the iframes "alive" in the background, so it doesn't need to reload the iframe each time.

Any idea why the following fiddle doesn't work? (notice that it reloads the iframes each time you switch back and forth)

http://jsfiddle.net/c3umtepz/1/

<div id="app"> <router-link to="/">/youtube.com</router-link> <router-link to="/foo">/adobe.com</router-link> <keep-alive> <router-view></router-view> </keep-alive> </div>

How should my file .htaccess look in Vue.js application

And when using routing in Single Page Application

I found 2 similar questions ont stackoverflow, but it didn't help.

I'm using VueJS and semantic-ui modal.

According to my structure of code, each time i call the "show modal" method, a new modal is added to the source page with the same id :

<div id="myModal ...>

So finally the content of this modal is wrong and not expected because the changes are in the last modal (conflict id). But anyway duplicating the modal code is wrong.

So i made a jsfiddle to be clear : https://jsfiddle.net/3ut5d9uu/5/

To reproduce the bug :

• click on "open modal", you see the name "a"
• click on "change name", open modal, the name has changed (just appending "x"), this is ok. You can repeat if you want.
• click on "change page", you go to page 2, click again to go to page 1
• "change name" has now no effect in the modal content.

Help to debug : i can see in my developement browser that each time "openModal" is called, a full code is added at the end at the DOM and never removed :

<div class="ui dimmer modals page inverted transition hidden"> <div id="myModal"...

So we have several same ids "myModal".

But i could'nt fix that. Thanks for your help.

I'm trying to create a HelloWorld app with Vue and typescript

index.html

<script data-main="app.js" src="node_modules/requirejs/require.js"></script> <div id="app">{{text}}</div>

app.ts

import Vue from 'vue' var app = new Vue({ el:"#app" ,data: { text: "hello there" } });

package.json

{ "name": "vue-example" ,"autohor": "nagyzsolthun" ,"dependencies": { "vue": "latest" } ,"devDependencies": { "typescript": "latest" ,"requirejs": "latest" } }

tsconfig.json:

{ "compilerOptions": { "target": "es5" ,"module": "amd" ,"moduleResolution": "node" ,"allowSyntheticDefaultImports": true ,"experimentalDecorators": true ,"lib": [ "es2015", "dom" ] } }

When opening index-html (after compiling app.ts) I see the following error:

GET file:///home/zsolt/prog/vue-boilerplate/vue.js net::ERR_FILE_NOT_FOUND

How can I make a working Vue app with typescript?

Ok. Now i am getting out of control. I have a child component and parent component. Parent component renders child component dynamically i.e. on demand and keeps the record in array. When a child component demands to be removed, it emits event and hence passes down its id to be identified in record. Though the record does get removed based on id but the last created instance is removed, always. Even if you click the first child, it is going to remove the last one only.

Here is the link that is identical to my situation but only in simple form. I did research on SO and found this answer whose fiddle is here. So I did followed its pattern in another fiddle but result is no different.

I don't know whats the problem here... what I am doing wrong? See if anyone can find the bug.

Thanks!

I have a textarea and I try to submit data with axios and vue to laravel but it doesn't work.I try to take the data and put ucfirst then return it.

new Vue({ el:'#root', data:{ areamodel: '' }, methods:{ insert:function(){ axios.post('/vue').then(response => this.areamodel = response.data); } } });

and

namespace App\Http\Controllers; use Illuminate\Http\Request; class PostController extends Controller { public function vue(Request $request) { $abc = ucfirst($request->input('areamodel')); return $abc; } }

Tell me how to extract data from the embedded json. The data in Vuejs is transferred from the database. There is data in the debugger in Google Chrome. There is a one-to-many relationship in the database. One recipe for many ingredients

Example Vue

var vm = new Vue({ el: '#my_view', data: { recipeslist: [], recipes: {} }, created: function () { this.$http.get('/recipe').then(function (data) { this.$set(this, 'recipeslist', data.body.items) $( "#recipe_view" ).hide(); }) }, methods: { showrecipe: function (event) { this.$http.get('/recipe/'+event.target.id).then(function (data) { this.$set(this, 'recipes', data.body.items) $( "#recipe_view" ).show(); $( "#main_view" ).hide(); }) } } })

Example html

<div class="root"v-for="index in recipes"> <h6> {{index.recipename}} </h6> <h6> {{index.flavorid}} </h6> </div>

Html view

test 1 3 test 1 4

Example data with this code

<div class="root"v-for="index in recipes"> <h6> {{index}} </h6> </div>

{ "id": 1, "bottleID": 1, "recipename": "test 1", "bottlesize": 60, "date": 1, "flavorslist": 1, "note": "none", "flavorid": 3, "NAME": "tpa lime", "drops": 5, "recepeid": 1 } { "id": 1, "bottleID": 1, "recipename": "test 1", "bottlesize": 60, "date": 1, "flavorslist": 1, "note": "none", "flavorid": 4, "NAME": "tpa prome", "drops": 1, "recepeid": 1 }

Tried so writes an error: vue.min.js:6 TypeError: Cannot read property 'recipename' of undefined

<div class="root"v-for="index in recipes"> <h6> {{index[0].recipename}} </h6> <h6> {{index[0].flavorid}} </h6> </div>

In general, I need to get:

One copy of recipename, bottleID, bottlesize, date (since this is the basis of the recipe and it is the same in json) But a few NAME, drops (since these are ingredients and there may be several)

I want to generate a password for users when creating an account using vue components. However when I check the box it doesn't disabled the password input field.

Here is my code:

create.blade.php

@extends('layouts.manage') @section('content') <div class="flex-container"> <div class="columns m-t-10"> <div class="column"> <h1 class="title">Create New Users User</h1> </div> </div> <hr class="m-t-0"> <div class="columns"> <div class="column"> <form action="{{ route('users.store') }}" method="POST"> <div class="field"> <label for="name" class="label">Name</label> <p class="control"> <input type="text" class="input" name="name" id="name"> </p> </div> <div class="field"> <label for="email" class="label">Email</label> <p class="control"> <input type="email" class="input" name="email" id="email"> </p> </div> <div class="field"> <label for="password" class="label">Password</label> <p class="control"> <input type="password" class="input" name="password" id="password" v-if="!auto_password" placeholder="Manually input a password"> <b-checkbox name="auto_generate" class="m-t-15" v-model="auto_password">Auto Generate Password</b-checkbox> </p> </div> <button class="button is-success">Create User</button> </form> </div> </div> </div> @endsection @section('scripts') <script> var app = new Vue({ el: '#app', data: { auto_password: true } }); </script> @endsection

looking for help. Thanks in advance.

my client wants to use AJAX crawling https://developers.google.com/webmasters/ajax-crawling/docs/specification (I know that it is deprecated But he wants it to use because of another search engine that still support it such as yandex.ru)

So I want to translate http://example.com/#/card/card_slug?category=car

to http://example.com/#!/card/card_slug?category=car

How do I do this with vue-router?

I can't seem to get webpack to compile Vue components. When I open a page that uses a component I get [Vue warn]: Failed to mount component: template or render function not defined. and in place of the component vue renders <-- function (a, b, c, d) { return createElement(vm, a, b, c, d, true); } -->

My webpack config.

module.exports = { entry: __dirname + '/display.js', output: { filename: 'bundle.js' }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' } ] } }

I've created a simplified project to demonstrate my problem. https://gist.github.com/RedHatter/8eadc65bd5f8327f26dcfd10a7bf3dad

Any help would be much appreciated.

When I make the selection nothing happens. Setting initial value works.

template:

<v-select :items="accountTypes" v-model="formData.AccountName" </v-select>

script data:

accountTypes: [ {value: 1, text: "student"}, {value: 2, text: "company"} ], formData: { FirstName: '', LastName: '', Email: '', AccountTypeId: 1, AccountName: 1, UserName: '', Password: '' },

I've looked into the source code and I found out that selectItem won't get triggered in v-select's generator line 128 (version 0.14.8, see code below)

const data = { on: { click: e => this.selectItem(item) }, props: { avatar: item === Object(item) && 'avatar' in item, ripple: true, value: active } }

I've tried upgrading and downgrading modules, but I think there is some kind of a "stupid" mistake somewhere. Thanks for any kind of input :)

I'm new to Vue.js and still practicing all features. I was wondering how can I write reusable functions for increment and decrement based on this code - that's what I have for now but it's repetitive. So I want to use increment/decrement function for two different buttons. Here's jsfiddle demo!

new Vue ({ el: "#pomodoro-clock", data: { breakLength: 5, sessionLength: 25, }, methods: { addBreak: function(inc){ this.breakLength += inc; }, subtractBreak: function(dec){ if(this.breakLength === 1) return; this.breakLength -= dec; }, addSession: function(inc){ this.sessionLength += inc; }, subtractSession: function(dec){ if(this.sessionLength === 1) return; this.sessionLength -= dec; } } });

I'm using vuejs-datepicker component in a project however I need some custom behaviour that's why I decided to create my own datepicker and inject vuejs-datepicker as a mixin. The solution works fine but I'm looking for a way to call the parent method inside my overridden one. That's how my component looks for now:

import Datepicker from 'vuejs-datepicker' export default { props: { /** * My custom property startDate to open a calendar on the given date by default */ startDate: { validator: function (val) { return val === null || val instanceof Date || typeof val === 'string' }, default: new Date() } }, mixins: [ Datepicker ], methods: { /** * I override parent method setPageDate to read default startDate when none is specified */ setPageDate (date) { // my code to set default date from the property if (!date) { date = this.startDate } // this part is the same as in the original method this.pageDate = new Date(date.getFullYear(), date.getMonth(), 1, date.getHours(), date.getMinutes()).getTime() } } }

Just one line of copied code isn't a big deal but I expect I need to override more methods in the future. So I'm looking for the best way to call that parent method inside my implementation, something like this.parent(date) or this.super(date). Is it possible at all?

Is there any way to render a vue.js component from a child component to on of its parents (maybe not the direct parent) like with slots but in the opposite direction?

My use case: In my root component I do have a <router-view> and a container for modals. from any child component of the router-view I would like to be able to add a child component to the modal wrapper.

Did I miss a feature of vue.js here or is there a even better practice to solve this problem?

I have 2 computed arrays, homeTeam and awayTeam. The code below does work to generate 2 tables to display the homeTeam and awayTeam, how can I simplify the code to only create the table once and loop through the homeTeam and awayTeam. I tried wrapping it in a v-for with an array of ['homeTeam','awayTeam], but that did not work. The computed works, everything below works, I just want to simplify the template.

<v-flex xs12 md6> <v-data-table :headers="headers" :items="homeTeam" hide-actions class="elevation-1 white"> <template slot="items" scope="props"> <td class="text-xs-right" v-model="gamesheet.number">{{ props.item.number }}</td> <td v-model="gamesheet.name">{{ props.item.name }}</td> </template> </v-data-table> </v-flex> <v-flex xs12 md6> <v-data-table :headers="headers" :items="awayTeam" hide-actions class="elevation-1 white"> <template slot="items" scope="props"> <td class="text-xs-right" v-model="gamesheet.number">{{ props.item.number }}</td> <td v-model="gamesheet.name">{{ props.item.name }}</td> </template> </v-data-table> </v-flex> ____ computed: { homeTeam() { return this.players.filter((player) => { return player.team == this.gameinfo.home; }) }, awayTeam() { return this.players.filter((player) => { return player.team == this.gameinfo.away; }) }, spares() { return this.players.filter((player) => { return player.team != this.gameinfo.home && player.team != this.gameinfo.away; }) }, }, ____

I'm wroking on laravel 5.4 project.
The question is vue-masonry(https://github.com/shershen08/vue-masonry) package doesn't work with the following error

[Vue warn]: Failed to resolve directive: masonry [Vue warn]: Failed to resolve directive: masonry-tile

Please help me to check my setting that are the wrong part.

Here is my app.js :

require('./bootstrap'); require('masonry-layout'); require('imagesloaded'); require('fancybox'); var vueMasonry = require('vue-masonry'); Vue.use(vueMasonry);

the bootstrap.js still original without modify a word, and package.json is here:

{ "private": true, "scripts": { "dev": "npm run development", "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch-poll": "npm run watch -- --watch-poll", "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "prod": "npm run production", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" }, "devDependencies": { "bootstrap-sass": "^3.3.7", "cross-env": "^3.2.3", "laravel-mix": "0.*", "lodash": "^4.17.4", "minifier": "^0.8.1", "stylus": "^0.54.5", "stylus-loader": "^3.0.1" }, "dependencies": { "axios": "^0.15.3", "fancybox": "^3.0.0", "imagesloaded": "^4.1.3", "jquery": "^3.1.1", "masonry-layout": "^4.2.0", "swiper": "^3.4.2", "vue": "^2.1.10", "vue-masonry": "^0.10.7" } }

And the final Html is something like:

<div class="grid-wrap" v-masonry fit-width="true" transition-duration="0.3s" item-selector=".grid-item" fit-width="true" > <div v-masonry-tile class="grid-item" v-for="wall in walls"> <div class="grid-date"> @{{ wall.created_at }} </div> </div> </div>

In my app, I make 2 ajax calls to pull in new data every 10 seconds. This data will often change. I want to make the Dom elements I create draggable.

1. What is the best way to structure this within my apps?
2. Is there a way to achieve this without calling $(elements).draggable() every time? There will be 1000+ DOM elements created in one of my apps.

var height = $(document).height(); var width = $(document).width(); $(function() { var app = new Vue({ el: '#main', data: { tables: [] }, methods: { loadTables() { $.ajax({ method: 'POST', dataType: 'json', url: base_url + 'tables/getTables/' + event_id }).done(data => { this.tables = data; }); }, computeOffsets(table) { return { top: (table.position_x * width) + 'px', left: (table.position_y * height) + 'px' } } }, mounted() { this.loadTables(); setInterval(() => { console.log("Getting Tables"); this.loadTables(); }, 10000); } }); var sidebar = new Vue({ el: '#sidebar', data: { people: [] }, methods: { isCheckedIn(person) { return person.reg_scan == null ? true : false; }, loadPeople() { $.ajax({ method: 'POST', dataType: 'json', url: base_url + 'users/getParticipants/' + event_id }).done(data => { this.people = data; }); } }, mounted() { this.loadPeople(); setInterval(() => { console.log("Getting People"); this.loadPeople(); }, 10000); } }); }); .table { position: absolute; } #sidebar { width: 10%; float: left; height: 500px; overflow-y: scroll; } .checked-in { background-color: lightgreen; } <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script> <div id="sidebar"> <div v-for="person in people" :class="{'checked-in': isCheckedIn(person), 'person' : true}" :id="person.id"> {{person.first_name + ' ' + person.last_name}} </div> </div> <div id="main"> <div class='table' v-for="table in tables" :style="computeOffsets(table)"> {{table.name}} </div> </div>

DNA: The Code of Life At the most magical SHA2017 gathering I gave two presentations, “DNA: The Code of Life” and the followup, “DNA: More greatest hits” (slides). The first presentation was recorded by the wonderful CCC C3VOC streaming crew, the second one by my friend Bart Smit (who is also wonderful). Without making this post too long, I want to thank everyone who helped me do this presentation — a lot of people contributed time, advice, recording abilities, great questions and enthusiasm.

I have this component rendered, I need to tell the users how much time remaining for each record displayed

I couldn't get anything worked out, I don't know any legible ways to work it out, so just trying calling out methods. I tried child components too but no avail.

<template> <div> <ul v-for="question in questions"> {{init_timer(secs)}} {{start_timer()}} <li> <a href="#" id="user-profile-text-link">{{question.name}}</a> <span class="question_clock">Validity : -- counter : {{time_remaining}} </span> </small> </li> </ul> </div> </template> <script> export default { data: function(){ return { questions: [], time_remaining : 1 }; }, methods: { init_timer: function(secs) { this.time_remaining = secs }, start_timer: function() { console.log('startiem') setTimeout(function () { this.time_remaining -= 1 }.bind(this), 1000) }, } , created: function(){ $.getJSON('/questions/json', function(response){ this.questions = response }.bind(this )); }, } </script>

any help is much appreciated