Feed aggregator

I am getting the error from the title:

Uncaught TypeError: cloned[i].apply is not a function at HTMLInputElement.invoker (vue.esm.js?65d7:1810)

Made standard setup with vue-cli (simple webpack), and this is my component:

<template> <div class="column is-4"> <nav class="panel"> <p class="panel-heading"> Authors in our library </p> <div class="panel-block"> <p class="control has-icons-left"> <input class="input is-small" type="text" placeholder="Search" v-model="search" @keyup="filterAuthors"> <span class="icon is-small is-left"> <i class="fa fa-search"></i> </span> </p> </div> <a class="panel-block is-active" v-for="author in filterAuthors"> <span class="panel-icon"> <i class="fa fa-book"></i> </span> {{ author }} </a> </nav> </div> </template> <script> export default { data () { return { 'search' : '' } }, computed: { filterAuthors() { let search = this.search.toLowerCase(); return this.$store.state.authors.filter((author) => { return author.toLowerCase().indexOf(search) >= 0; }) } } } </script>

Strange part is that the filter is working, but every time I type into the input field, I get this error. Anyone have any idea what can it be?

I have a plugin that adds some property to Vue instance.
Then I can access this property inside components using this.$plugin.prop. How can I watch for its changes? I need to do something inside component based on this.$plugin.prop value but neither watch or this.$watch worked for me. I assume its because watch works in component context so I can't watch for variable outside component, for example

mounted() { this.$watch('$plugin.prop', val => console.log(val)); }

doesn't work.
What is the right way to accomplish this?

I have a component (modal) which relies on a store. The store has the state of the modal component - whether it is active or not.

I need to be able to call this modal to open from other components or even just on a standard link. It opens by adding an .active class.

How can I change the state of the store - either by calling the stores action or calling the modal components method (which is mapped to the store).

Modal Store:

class ModalModule { constructor() { return { namespaced: true, state: { active: false, }, mutations: { toggleActive: (state) => { return state.active = ! state.active; }, }, actions: { toggleActive({ commit }) { commit('toggleActive'); }, }, getters: { active: state => { return state.active; } } }; } } export default ModalModule;

Vue Component:

<template> <div class="modal" v-bind:class="{ active: active }"> <div class="modal-inner"> <h1>modal content here</h1> </div> <div class="modal-close" v-on:click="this.toggleActive"> X </div> </div> </template> <script> import { mapGetters, mapActions } from 'vuex'; export default { computed: { ...mapGetters('Modal', [ 'active', ]) }, methods: { ...mapActions('Modal', [ 'toggleActive', ]), } } </script>

And somewhere else I want to be able to have something like:

<button v-on:click="how to change the state??">OPEN MODAL</button>

In my Vue project, I have mocked some data for next step development. I already save the test data in a json file. And my vue project is typical one created with Vue-Cli, and the structure for my project goes as following:

My_project build config data service_general_info.json node_modules src components component-A component-A.vue

as you can see, all the folders are created by the vue-cli originally. And I make a new folder data and place the test data json file inside.

And I want to read in the data by axios library in an event handling function inside the component of component-A as following:

methods: { addData() { console.log('add json data...'); axios.get('./../../data/service_general_info.json'); }, },

I use relative path to locate the target file.But get 404 error back. So how to set the path correctly? Currently I am running the dev mode in local host.

The error message is: GET http://localhost:8080/data/service_general_info.json 404 (Not Found)

I'm trying to call my namespaced store:

methods: { ...mapActions('Modal', [ 'toggleActive', ]), close: () => { this.toggleActive(); }

Which results in the error:

Uncaught TypeError: Cannot read property 'toggleActive' of undefined

Doing the following works:

close: function() { this.toggleActive(); }

How can I use ES6 function syntax with vue/vuex?

I created a vuejs2 project (using webpack) with 2 components, I want to publish this project on npm as a package so that I can use all the components inside this project with multiple projects (reusable components).

I published the project on npm npm publish and installed the package using npm install my-components, I found the project inside node_modules but it was with the whole source code, as if I copy/pasted the project there.

Also when I try to run npm build dist I am getting an error:

npm ERR! Darwin 16.6.0

npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dist"

npm ERR! node v6.9.2

npm ERR! npm v3.10.9

npm ERR! missing script: dist

npm ERR! npm ERR! If you need help, you may report this error at: npm ERR!
https://github.com/npm/npm/issues

npm ERR! Please include the following file with any support request: npm ERR!
/Users/myuser/Documents/Projects/my-components/npm-debug.log

Inside my project (https://github.com/Trelllis/my-components), there is a component called vue-version which I can't use and the project my-components isn't resolved.

How can I publish this project properly with all its components?

Thanks

I have a problem using Vue.js and the library VueDraggable (https://github.com/SortableJS/Vue.Draggable) Here is a sample of code :

<draggable v-if="n === 2 && track.getDisplayArray()[1].length !==0" element="ul" :options="{group:'layers '+ track.itemId}" v-bind:class="{ hidden: !track.show, 'child-container': track.show }" v-model="track.getDisplayArray()[1]" :move="onMove" @start="onStart" @end="onFinished"> <li class="item" v-bind:class="{ hidden: !layer.show, child: layer.show }" v-for="layer in track.getDisplayArray()[1]"> <span>{{layer.name}}</span> <img class="item-view" src="static/img/ic_view.svg" alt="view"> </li> </draggable>

onMove function just returns true, onStart and onFinished are empty (but I want to do something with them in the future ;) )

When the "v-model" property is here, the li tags which are created cannot be swapped.

When I remove this property, the li tags can be swapped.

Do you see the problem? Are they some "conflicts" between some properties that I am not aware of?

I followed along this tutorial and it worked perfectly fine. But what I want is to not use submit button to check or perform the validation, what I want is while I'm typing, it is now validating the form. Please see my code below, or visit the link that I mentioned above.

Code:

routes

<?php Route::get('/', function () { return view('welcome'); }); Route::get('/article/create', 'ArticleController@showArticleCreationForm'); Route::post('/article', 'ArticleController@publish');

ArticleController

<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Http\Requests; use App\Http\Controllers\Controller; class ArticleController extends Controller { public function showArticleCreationForm(){ return view('article.create'); } public function publish(Request $request){ $this->validate($request, [ 'title' => 'required|min:3', 'body' => 'required|min:10' ]); if ($request->ajax()) return; return 'publish'; } }

create.blade.php

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Create Article</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous"> <style> .body { height: 200px !important; } .error { color: darkred; margin-top: 5px; display: block; } </style> </head> <body id="app"> <form @submit.prevent="submitForm" class="col-md-4 col-md-offset-4" action="{{ URL::to('/') }}/article" method="post"> <h1>Create New Article</h1> <hr> {!! csrf_field() !!} <div class="form-group"> <input class="form-control title" type="text" name="title" placeholder="Title" v-model="formInputs.title"> <span v-if="formErrors['title']" class="error">@{{ formErrors['title'] }}</span> </div> <div class="form-group"> <textarea class="form-control body" name="body" placeholder="Content" v-model="formInputs.body"></textarea> <span v-if="formErrors['body']" class="error">@{{ formErrors['body'] }}</span> </div> <button class="btn btn-primary" type="submit">Publish</button> </form> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.14/vue.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.6.1/vue-resource.min.js"></script> <script> new Vue({ el: '#app', data: { formInputs: {}, formErrors: {} }, methods: { submitForm: function(e){ var form = e.target; var action = form.action; var csrfToken = form.querySelector('input[name="_token"]').value; this.$http.post(action, this.formInputs, { headers: { 'X-CSRF-TOKEN': csrfToken } }) .then(function() { form.submit(); }) .catch(function (data, status, request) { var errors = data.data; this.formErrors = errors; }); } } }); </script> </body> </html>

I am using Webpack to pull in .svg files which I can inline and use inside my Javascript components. It looks something like this:

export default class Svg { constructor() { const icons = require.context('public/images/svg', true, /\.svg$/); } }

It works perfectly fine. Looking at the buildfile from Webpack I can see that all of these .svg files are being put inside of my main app.js javascript file.

This bloats up my Javascript file that every user on the website needs to load. Although this is only a one time load it does add up to the initial load when someone has not cached the file yet, or when it is refreshed because of changes.

I know that only at buildtime the javascript has access to the filesystem through node.js and therefore there is probably no way around this.

How do I combat the bloat of this file thouhg?

To my knowledge there are a couple of options:

• Use XHR request to retrieve the data. This might be slow and cause flashes of icons that are not loaded in time. This might be do-able if you were to have something fast like elasticsearch but otherwise probably not feasible.

• Put all my .svg files into a separate file with Webpack so they will be cached longer because this files gets touched way less often than the main javascript code.

• Use code splitting to split up my .svg. files and put each.svg` file into a module of its own. Then let webpack deal with it by injecting the modules asynchronously when needed.

The last approach would probably only be helpful for components and javascript code that is not directly visible since there will be loadtime?

Because not all .svg files are necessary the first step would be to remove the require.context and import only files that are needed.

Any thoughts on how to deal with this? Would love to hear from someone who might have some experience on this. Otherwise any and all suggestions are welcome as well. :)

I followed up some tutorials about echo and pusher. I configured all the project as necessary but object notifications not appear at browser. I uncoment the line

App\Providers\BroadcastServiceProvider::class,

The next files it's about what I'm using:

bootstrap.js

channels.php

PackageNotifications (class which I create the notifications)

Line which I create a new notification

broadcasting.php

.env

I created and registered a component in vuejs called notifications then I set it out what says in laravel notifications as you can see bellow.

Everything is connecting with Pusher but when I send any notification it appear at pusher but as mentioned at before, the object notification is not appearing.

Someone have some idea about what is happening? Thanks in advance

How can I include and initialize an external javascript file mymain.min.js using VueJs with webpack?

Webpack.base.conf

resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'sauJs': path.resolve(__dirname, '../src/assets/mymain.min.js'), } },

I'm attempting to use an api call to a django-rest backend to populate my data-store. The api-call appears to be working fine.

After loading index.html i can look at both store_.state.products and v.$store.state.products which both appear to have my json response from the API. You can see that here in the console after navigating to index.html:

and

However, v.$data as you can see appears to be empty.

Please find below my code.

products.js

//api get call Vue.use(VueResource) function get(url, request) { return Vue.http.get(url, request) .then((response) => Promise.resolve(response)) .catch((error) => Promise.reject(error)) } //data store const apiRoot = 'http://127.0.0.1:8000/api/product-list/?format=json' const store_ = new Vuex.Store({ state: { products: [] }, mutations: { 'GET_PRODS': function (state, response) { state.products = response.body; }, 'API_FAIL': function (state, error) { console.error(error) }, }, actions: { getProducts (store) { return get(apiRoot) .then((response) => store.commit('GET_PRODS', response)) .catch((error) => store.commit('API_FAIL', error)) } } }) //products component Vue.component('product', { template: "#product-template", props: ['product'], delimiters: ["[[","]]"], }) //root instance const v = new Vue({ el: '#app', store: store_, data : function () { return { //this works fine as expected with hardcoded objects fed as data //products : [ //{ // id:1, // name:'test', // brief:'descrip', //}, //{ // id:2, // name:'other', // brief:'something else', //} //] products : this.$store.state.products }; }, delimiters: ["[[","]]"], }) //populate store.state.products with api-call v.$store.dispatch('getProducts')

index.html

<!DOCTYPE html> <html> <head> {% load static %} <link rel="stylesheet" href="{% static '/products/bootstrap.css' %}" /> <link rel="stylesheet" href="{% static '/products/bootstrap-theme.css' %}" /> <link rel="stylesheet" href="{% static '/products/base.css' %}" /> <link rel="stylesheet" href="{% static '/products/index.css' %}" /> <link rel="shortcut icon" href="{% static '/products/favicon.ico' %}" type="image/x-icon" /> </head> <body> <template id="product-template"> <div> <h1>[[ product.name ]]</h1> <h5>[[ product.brief ]]</h5> </div> </template> <div id="app"> <div class="container-fluid"> <div class="row title-row"> <h1 class="title">Products</h1> </div> <div class="row"> <product v-for="product in products" :product="product" :key="product.id"></product> </div> </div> </div> <script src="{% static "products/vue.js" %}"></script> <script src="{% static "products/vue-resource.js" %}"></script> <script src="{% static "products/vuex.js" %}"></script> <script src="{% static "products/products.js" %}"></script> </body> </html>

I am trying to get a simple Bootstrap card on a static website I am making in Vue.js. I am using Bootstrap-Vue for this. However, I cannot seem to get the image to show when I use the b-card with the img attribute. Here is the documentation on a card:

https://bootstrap-vue.js.org/docs/components/card

And here is my code that is not showing the image (all other text is rendering, even the github icon)

<b-card img="`../assets/q1.png`" title="7 Little Words" class="mb-2 col-md-6"> <!--The image above is not showing--> <h5 :style="{fontSize:1.3+'em', marginTop:20+'px'}">An addictive vocabulary puzzle for word nerds</h5> <div class="demo"> <a href="" :style="{marginBottom:10+'px'}">VIEW DEMO</a> </div> <div class="github"> <h4>Github</h4> <!--This image below is showing--> <a href=""><img src="../assets/GitHub.png" alt="GitHub"></a> </div> </b-card>

I think it must have something to do with the img attribute in the b-card, but I am not sure how to fix it. Also, here is my error in the console:

http://localhost:8080/assets/q1.png 404 (Not Found)

Can someone help me make this simple alert work? What I wanted was if I click the trigger button, the text would appear but then the component should do its part.

I'm new and learning VueJS and now is in the components part but I haven't fully grasped it yet.

Here's the link: JSBIN

Snippet of the JS Script

Vue.component('alert', { template: '#alert', props: { errors:false }, data: function() { return { message:"" } }, methods: { appear: function (status) { if(status=="yes") { errors = true; message = "Appeared"; } } } }); var myapp = new Vue({ components: 'alert', el: '#app', data: { }, methods: { trigger: function() { this.$alert.appear("yes"); } } });

I tried components methods in vue js. My code like this.

const Thread = Vue.component('threadpage', function(resolve) { $.get('templates/thread.html').done(function(template) { resolve({ template: template, data : function() { return { data : { title : "Data Table", count : this.GetData } }; }, methods : { GetData : function() { var data = {username : "newshubid", data : { page : 0, length : 10, schedule : "desc" } }; var args = {"data" : JSON.stringify(data)}; var params = $.param(args); var url = "http://example-url"; var result; DoXhr(url, params, function(response){ result = JSON.parse(response).data; console.log("load 1", result); }); setTimeout(function () { console.log("load 2", result); return result; }, 1000); } }, created : function(){ this.GetData(); } }); }); });

But, when I trying to use {{ data.count }} in template. Not showing result what i want. Even I tried return result in GetData.

Whats my problem ? And how to access data from methods ? Please help me, i'm a beginner. Thanks

i'm adding vue js into my current laravel apps so i can make it SPA and thats mean laravel is only acting as backend and rest of it is controlled by vue js from rendering view to routing.

My current laravel apps using kodeine laravel-acl for controlling which page and which action that my user can do by simply

put this in route:

Route::get('admin', [ 'as' => 'admins.admin.index', 'uses' => 'UserController@index', 'middleware' => ['auth', 'acl'], 'can' => 'view.admin_view']);

and if i just do this in view to hide some action if user don't have permission

@permission('view.admin_view') //some link or button @endpermission

and all these permission is stored in mysql database and each user have different set of permission.

but how to do that if i making it vue js SPA? since all route is controlled via vue js?

I want to right align my product and support links in my navigation bar. How do you align links in the navigation bar of a vue.js project overall?

This is how it looks now

This is the code.

<md-whiteframe class = "main-toolbar "> <md-theme name = "teal"> <md-toolbar class = ""> <router-link class = "nav-link " :to = " { name: 'levi' }" style = "color:white; text-decoration: none; ">levi</router-link> <router-link id = "nav"class = "nav-link" :to = "{ name: 'Product' }" style = "color:white; text-decoration: none;"> Product </router-link> <router-link id = "nav" class = "nav-link" :to = "{ name: 'Support' }" style = "color:white; text-decoration: none;"> Support </router-link> </md-toolbar> </md-theme> </md-whiteframe>

I try to make broad cast notification laravel 5.4 and vuejs 2 but notification not appear any one can help me ?

navbar.blade.php

Notification.vue

NotificationItem.vue

result npm run watch that errors appear

Header

I had a web app hosted on my personal server. It was built with Vue.js 2 and it was working properly until last month that I checked.

Basically, it loaded some content from Firebase and after choosing some options in the app, it gave me a result.

Even if I try to display some text that is not from Firebase, it still refuses to show anything.

In the console, there are no errors, but the only message I noticed was this:

["add",{"textareas":[],"contenteditables":[],"iframes":[],"htmlghosts":[]}] bundle.js:8321:29

I'm not sure what it is. I don't know what is suddenly wrong and how to fix it.

I have an async operation in parent component and need to notify child, that this operation was completed. Could I watch in child for a property change. Somewhat like:

new Vue({ props:['parentReady'], watch:{ parentReady(val){ alert('parentReady prop was changed'); } } })