Vuejs

I've got this filter:

Vue.filter('limit', function (value, amount) { return value.filter(function(val, index, arr){ return index < amount; }); });

and i'm using like this:

<div v-for="movimiento in movimientos | limit 7" class="c-movimientos-tabla__block">

Q: How can i change the limit number on click in any button?

I have created a small project using Laravel 5.4 and VueJs 2.0. It is not a Signle Page Application. I am using vue components on each and every page to display the contents. The flow of my application is goes like this. Whenever a use clicks on the tab in navbar, he's redirected to the respective components. On the laravel side, I am simply using return view(login); and on the login.blade.php, I am using <login-component></login-component> which then sends the ajax requests to fetch data. I don't really know if this is the right approach as to get the 2 http requests are generated (if anyone knows a beeter approach, please do let me know). Mostly for for the ajax requests to load the vue component, the controller returns json data. Everything works fine, but when I click the back <- button on the browser, only json gets displayed. I then have to refrest the pager (ctl + R) in the browser the get the vue component.

Here's the controller code:

public function index(Request $request, VideoRepository $video_repo, Channel $channel) {

if ($request->ajax()) { $videos = $video_repo->getChannelVideos($channel); return response()->json([ 'data' => [ 'message'=> 'Success', 'videos' => $videos, 'channel' => $channel, ] ], 200); } return view('channels.index')->with([ 'channel_slug' => $channel->slug, ]); }

Here's my channel.index page:

@extends('templates.default') @section('content') <channel-dashboard channel-slug="{{ $channel_slug }}"></channel-dashboard> @endsection

Here's my channel-dashboard vue component:

axios.get('/channels/' + this.channelSlug) .then(({data}) => { this.videos = data.data.videos; this.channel = data.data.channel; this.divideVideosArrayInChuncks(); }) .catch(({response}) => { this.error = response.data; });

What do I need to do get vue component

I have a problem making the parent binding update from changes in the child.

I have the following vue code:

Vue.component('usercomp', { template: '<input v-model="user.name.lastname">', props:['user'], computed: { fullname: function() { return this.user.firstname + ' ' + this.user.lastname; } } }); new Vue({ el: '#user-example', data: function() { return { user: { name: { fullname: '', firstname: '', lastname: '', } } } } })

where I am binding the computed property of the child on the parents view. I'm trying to get a computed property from the child to update a <p> in the parent. I've tried using a store, but seems to give the exact same result unfortunately.

I have created this fiddle: https://jsfiddle.net/alexintime/02jxvqex/7/

As of date of posting, I cannot find any documentation to use the "custom filter" prop in data tables.

I just want to create a custom filter to filter my data table by headers. I have a dropdown, and when user click on one of the options for the dropdown, it will filter the list for one specific header.

Example: Dropdown options: Food type: fruit, meat, vegetable

1. Bakchoi (vegetable)
2. Pork (meat)
3. Chicken Thigh (meat)
4. watermelon (fruit)

If I select dropdown as meat, it should only show me pork and chicken thigh.

How can I implement authentication with keeping URL same in browser as facebook does?

If user is authenticated, it shows home page, if not, it shows login page. But in both case URL is same.

How can I achieve that using Vue js.

I don't want to keep home page html at client side if not authenticated (might be server side rendering will require for this scenario).

I have used asp.net core, identity server 4, typescript, webpack in project.

I have this code so far, i try to take the value from radio button.I can take from v-model value but with radio i have some problems.For example if i have more radio buttons how i can take the checked one.

new Vue({ el:'#root', data:{ removelines: [ {value:'a'}, {value:'b'} ] }, methods:{ insert:function(){ let vueIn = this; axios.post('/vue', {removelines: vueIn.removelines.value}).then( function(response){ vueIn.removelines = response.data.removelines.value; } ).catch(function(error){ console.log(error.message); }); } } });

html code here:

<div class="card-block"> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-warning active"> <input v-model="removelines" name="removelines" type="radio" class ="cheker" autocomplete="off" v-bind:value="a" checked> Yes </label> <label class="btn btn-warning"> <input v-model="removelines" name="removelines" type="radio" class ="cheker" v-bind:value="b"> No </label> </div> </div>

So I have this basic VUE.js page, but I want variable C to be a composite of variable A and B together.

var app = new Vue({ el: '#app', data: { firstname: '', lastname: '', fullname: firstname + lastname } })

so I can use it in a <input type="text" v-model="fullname"> and it will contain the values of firstname and lastname.

firstname and lastname will be binded to 2 other inputs as follows:

<label>Insert your first name:</label> <input type="text" v-model="firstname"> <label>Insert your last name:</label> <input type="text" v-model="lastname">

so the fullname variable will be a dynamically binded firstname + lastname variable.

I've tried several things but I can't seem to get this working.

let's say I have following tree:

[ { name: 'asd', is_whatever: true, children: [ { name: 'asd', is_whatever: false, children: [], }, ], }, ],

The tree is stored in a module via Vuex under key 'tree' and looped through with following recursive component called 'recursive-item':

<li class="recursive-item" v-for="item in tree"> {{ item.name }} <div v-if="item.is_whatever">on</div> <div v-else>off</div> <ul v-if="tree.children.length"> <recursive-item :tree="item.children"></recursive-item> </ul> </li>

Now i want to toggle item's property 'is_whatever', so i attach a listener

<div v-if="item.is_whatever" @click="item.is_whatever = !item.is_whatever">on</div> <div v-else>off</div>

When i click it, it works, but emits following

"Error: [vuex] Do not mutate vuex store state outside mutation handlers." [vuex] Do not mutate vuex store state outside mutation handlers.

How am I supposed to implement it without this error? I can see no way how to dispatch an action or emit event to the top of the tree because it's nested and recursive, so I haven't got a path to the specific item, right?

Is it possible for a vuetify.js to add an option in the standard selection component based on the user's search? As in this example for select2:

$(".js-example-tags").select2({ tags: true })

https://select2.github.io/examples.html#tags

Is there a way to add three or more components in one Vue-template.

<template> <div id="app"> <navbar></navbar> <router-view></router-view> <footer></footer> //adding third component will not work this way </div> </template>

mounted(){ this.$http.get('http:anotherurl.com/api/data.xml') .then(function (response) { console.log(response); }); }

i get this console error :

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

i test vue-resource with reddit and it worked fine but with this url gives the problem . please help .

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.