Software

Vue selectize, getting json data from option?

Vuejs - Wed, 2017-09-06 21:28

I'm using vue2-selectize to display list of options fetched from axios call:

<template> <selectize v-model="selected" :settings="settings"> <option v-for="option in options" :value="option.id"> ({{ option.author }}) - {{ option.description }} </option> </selectize> </template> <script> export default { props: ['old-value'], data() { return { selected: this.oldValue, options: [], settings: { preload: true, placeholder: "Search All Authors", dropdownParent: 'body', closeOnSelect: true, render: { option: function (data) { console.log(data); return '<div>' + data.displayName + '<div class="item-bio">' + data.bio + '</div>'; } }, load: async (query, callback) => { axios.get(route('api.showAllAuthors')).then(response => { this.options = response.data; callback(); }) } }, } }, } </script>

The issue is that once you setup the <option> for the select you can only work with the two values it passes to the render function (text and value) and not the original object (whereas the actual <option> has access to this object).

The manual mentions the optional parameter of dataAttr available for <option> tags, but setting <option :data-data="option"> has no effect and I still can't access the original properties.

How can I access the original JSON attributes that the <option> is using in the render function?

Categories: Software

Send Params With Axios - VueJS

Vuejs - Wed, 2017-09-06 21:09

so I'm working with Axios in VueJS to send ajax requests. However I'm getting a bit of a problem when trying to send requests.

This is my JS code:

axios.post('http://localhost/app/php/search.php', { query: this.search //this should send the 'query' param }).then(response => { this.variable = response.data }).catch(e => { this.errors.push(e) })

And this is the search.phpfile:

<?php require '../Functions.php'; $obj = new Functions(); $array = $obj->search($_POST['query']); echo json_encode(array_values($array)); ?>

And I'm getting the following error on the PHP side: Notice: Undefined index: query in /path/to/app/search.php on line 6

Any reason as to why this is happening? Any help is greatly appreciated.

Categories: Software

Transform DOM Elements into Vue.js Components

Vuejs - Wed, 2017-09-06 20:47

I am using a d3.js plugin to create a complex visualization in my Vue.js application. I would like to apply a custom vue directive to the elements that were added by the d3 plugin.
It looks like the $compile functionality that was deprecated in vue2 is what I am looking for.

How can I add dynamically change the elements in the dom to vue components?

Categories: Software

Good way to start up vagrant configuration as single-click app?

Vuejs - Wed, 2017-09-06 20:35

I use vagrant to configure different VirtualBoxes under Linux.

My goal is that any colleague of mine would just have to visit a intranet-site and choose the VirtualBox that he wants to have on his/her machine. After selecting one or multiple boxes he or she might just click onto "proceed with installation" so that the respective vagrant directory/ies with its Vagrantfile(s) is/are checked out and execution with vagrant up is triggered.

So I want to abstract as much as possible from the console and make it look state of the art / fancy.

What technologies should I use?

I thought of vue.js together with node.js? Would that be a viable approach to get to my goal?

Categories: Software

Vue js Shopping cart

Vuejs - Wed, 2017-09-06 20:25

i'm doing a shopping cart in this amazing tool called Vue js also with Vuetify. Right now i'm stacked because I don't know how to obtain the boolean value true/false and add the price to the amount value if it's true or remove the price if it's false. Does anyone have any suggestion or knows a cool resource to solve this kind of issues?

<v-container grid-list-md text-xs-center> <v-card class=""> <h2 class="headline mb-0">Extra ingredients:</h2> <v-layout row wrap class="text-xs-center" v-for="ingredient in ingredients" :key="ingredient.id"> <v-layout column> <v-flex xs6> <v-checkbox name="checkbox" color="light-blue lighten-2" v-bind:label="`${ingredient.name}`" v-model="ingredient.checked" light></v-checkbox> </v-flex> </v-layout> <v-layout column> <v-flex xs6> <v-subheader>{{ingredient.price}} €</v-subheader> </v-flex> </v-layout> </v-layout> <v-divider></v-divider> <v-layout row wrap class="mb-3"> <v-flex xs6> <h3 class="headline mb-0">Total price:</h3> </v-flex> </v-layout> </v-card> </v-layout> <script> export default { data: () => ({ checked1: '', ingredients: [{ id: 1, name: "cheese", price: 2, checked: '', }, { id: 2, name: "ham", price: 2.0, checked: '', }, { id: 3, name: "Bacon", price: 2.25, checked: '', }, { id: 4, name: "spinac", price: 1.6, checked: '', }, { id: 5, name: "extracheese", price: 2.5, checked: '', }, { id: 6, name: "pepper", price: 2.75, checked: '', }], }), computed: { total() { var total = 0; for (var i = 0; i < this.ingredients.length; i++) { total += this.ingredients[i].price; } return total; } }, methods: { addToCart(item){ amount = 0; if(ingredient.checked == true){ amount += ingredient.price; } else { amount -= ingredient.price; } } } } </script>
Categories: Software

vue-router this.$route object is always empty with single file components

Vuejs - Wed, 2017-09-06 20:01

I am using single file components with vue-router and vue-2.0 and I am having an issue I can't seem to be able to resolve. The this.$route object called from a component always returns empty values.

e.g.

enter image description here

Messages.vue

<template> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="panel panel-default"> <div class="panel-heading">Post List</div> <div class="panel-body"> <li v-for="item in items"> {{ item.message }} </li> </div> </div> </div> </div> </div> </template> <script> export default { created() { console.log(this.$route); }, mounted() { console.log('Component mounted.') }, data() { return { items: [ {message: 'Foo'}, {message: 'Bar'} ] } }, } </script>

App.js

import Vue from 'vue'; import VueRouter from 'vue-router'; import Messages from './components/Messages'; Vue.use(VueRouter); const routes = [ { path: '/user/get/:id', component: Messages}, ] const router = new VueRouter({ routes }) const app = new Vue({ router, el: '#app', components: { Messages } });

Any help will be greatly appreciated.

Categories: Software

Vue.JS radio buttons remaining checked even after selecting a different radio button

Vuejs - Wed, 2017-09-06 19:26

this is my first time using Vue.JS so I apologize if the solution is simply and I'm just not seeing it. Here's a code snippet of what I have:

<div class="col-12" v-if="calendar.amenities"> <div class="form-group"> <label for="transportSelect" class="calendar__transport-label">{{$t("message.transportLabel")}}</label> <div id="transportSelect" class="form-group calendar__transport-list"> <div v-for="(amenity, amenityIndex) in calendar.amenities" class="calendar__transport-option" :key="amenityIndex"> <label> <input id="transportSelect" type="radio" :value="amenity.id" v-model="value"> <span>{{amenity.description}}</span> </label> </div> </div> </div> </div>

I'm trying to just get a simple radio buttons that allow user's to select one option, with the first option selected as default. Any help is much appreciated!

Categories: Software

Vue looping with modulus

Vuejs - Wed, 2017-09-06 19:16

How to do looping for each two data using modulus? In case I want to do a looping for every two data get a sequential class. Example :

I have 6 data :

  • Data A
  • Data B
  • Data C
  • Data D
  • Data E
  • Data F

So the final result I want to make is to give the class to each data with modulus every two data. I will have results :

  • Data A | Class 1
  • Data B | Class 1
  • Data C | Class 2
  • Data D | Class 2
  • Data E | Class 3
  • Data F | Class 3

The class name will always be increased using the counter if any new data is entered.

I have created the sample code below :

var app = new Vue({ el: '#app', data() { return { items: [{"id": "111","nama": "George",},{"id": "222","nama": "Paul",},{"id": "333","nama": "Mira",},{"id": "444","nama": "Doms",},{"id": "555","nama": "Brian",},{"id": "666","nama": "Oscar",}] } }, methods: { computedClass(index) { defValue = 1 if (index % 2 === 1) { return "data_1" } } } }); .item { pading: 10px; } .data_1 { color: #FF0000; } .data_2 { color: #0000FF; } .data_3 { color: #00CC00; } <script src="https://unpkg.com/vue@2.4.2/dist/vue.js"></script> <div id="app"> <div class="item" :class="computedClass(index)" v-for="(item, index) in items" >{{item.nama}}</div> </div>

but I am confused to do counter and modulus so that every two data I get the name of the class is also being incremented with counter.

In my code above, I can only do modulus of every second data. Not every two data. And I am confused to do class naming with counter

Can you help me. Thanks

Categories: Software

Hiding navigation component on main App.vue (Vue.js)

Vuejs - Wed, 2017-09-06 17:56

New to Vue.js .

I have a navigation component which is rendered in the main App.vue page. I don't want it to be shown on the first page.

I know I can use something along the lines of:

`navigation(v-if="this.$route.fullPath !== '/'")`

but where and how, inside export default? Are there any other files I have to alter (main.js / router.js)?

This is how I have the main App.vue page laid out at the minute:

enter image description here

I tried this, but it didn't work:

enter image description here

Categories: Software

is there minesweeper in vue.js examples?

Vuejs - Wed, 2017-09-06 17:54

i'm trying to find a good example of a minesweeper game built on Vue, i have tried searching on git hub and there are good examples out there, but in my project me and my peers are trying to build a grid game application built in Vue, and i'm only allowed 1 component to program in. so i'm wondering if there is an example of minesweeper built in one component, or maybe is there a way to convert minesweeper from a Javascript file to one Vue component?

Categories: Software

Call parent method from nested child in Vue

Vuejs - Wed, 2017-09-06 17:54

I scaffolded a project from vue-cli using the webpack template.

Now in the App component I created a bootstrap modal dialog, which I want to reuse from the entire application. Along with that I also created one method in the App component called showMessage which actually does the work of showing the modal.

Now considering that I should be able to reach that method from any component, is calling like what is shown below a bad idea?

this.$root.$children[0].showMessage('Message', `An email will be sent to ${this.form.email}`)
Categories: Software

Querying Gremlin via WebSockets using the gremlin-javascript package locally

Vuejs - Wed, 2017-09-06 17:31

I'm attempting to use the gremlin-javascript client in browser.

I've downloaded and installed the Titan-Hadoop stack from Titan Graph Db's github. I've setup the Gremlin server to use the WebSocket Channelizer. Gremlins Host and Port are default "localhost" and "8182" respectively, and I can connect the Gremlin-Console to it. I've populated the server with the "GraphOfTheGods" Data and I can query the data using the gremlin-console. By switching gremlin-servers channelizer to the http variant I'm able to query the server in the browser via a url; E.g. localhost:8182?gremlin=100-1. My preference is to use WebSockets though so this configuration has been reset.

I want to be able to query the database from my Web Application. I've setup a Vue.js application using the full template. I have installed gremlin-javascript via npm and on a button click event the following code runs:

import { createClient, bindForClient } from 'Gremlin' export default class titanService { async query (name, callback) { const getByName = (name) => ({ gremlin: 'g.V().has("name", name)', bindings: { name } }) const client = createClient() const queries = bindForClient(client, { getByName }) const users = await queries.getByName('saturn') callback(users) } }

This fires off a GET request which subsequently collapses into a 400 error with the obvious response of "not a WebSocket handshake request: missing upgrade".

The GET request to localhost:8182/gremlin is wrong. Wrong protocol. Wrong url. No payload. I also receive a CORS error.

Fetch API cannot load 127.0.0.1:8182/gremlin. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:8080' is therefore not allowed access. The response had HTTP status code 400. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Has anybody else possibly ever had this issue or perhaps any experience using the Gremlin-Javascript client connecting to Gremlin who could help me out?

I'd like to discuss. Can this be done? Is there a preferred way?

Categories: Software

How list values ​from a select vue.js

Vuejs - Wed, 2017-09-06 17:17

how to list select values? example below.

var app = new Vue({ el: '#app', data: { }
Categories: Software

VueJS 2 Templates

Vuejs - Wed, 2017-09-06 16:59

I'm new VueJS Student!

I made a "MainTemplate.vue", there are a menu, footer, header... So a create another .vue named "ComponentB.vue".

Here is my code ComponentB.vue

<template> <h1>Component B</h1> </template>

So simple. I imported this to my "MainTemplate.vue" and it worked well. But i don't know why if this template "ComponentB.vue" has a lot of code, it will not work.

Look, i simple add more code to my "ComponenteB.vue"

<template> <h1>Component B</h1> <h1>Component B</h1> <h1>Component B</h1> <h1>Component B</h1> <h1>Component B</h1> <h1>Component B</h1> </template>

When i save, the browser get to me this error:

client?cd17:139 ./~/vue-loader/lib/template-compiler?{"id":"data-v-4e4e09bc","hasScoped":false}!./~/vue-loader/lib/selector.js?type=template&index=0!./src/ComponenteB.vue (Emitted value instead of an instance of Error) Error compiling template: <h1>Component B</h1> <h1>Component B</h1> <h1>Component B</h1> <h1>Component B</h1> <h1>Component B</h1> <h1>Component B</h1> Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead. @ ./src/ComponenteB.vue 6:2-198 @ ./src/routes.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

Why i can't put more code inside ? Anyone can help me please?

Thanks a lot!!

Categories: Software

How can I show data from 2 level child component by clicking a button in the main instance?

Vuejs - Wed, 2017-09-06 16:54

Let's say I have the main instance, a child component called "movie-card" and another child component of "movie-card" called "link-btn". The thing is I want to build a selector looping the "link-btn" component with v-for, and also I want to have a button in the main instance that show the data selected with every "link-btn" component. Here is the code:

HTML:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>Test</title> </head> <body> <div id="app"> <movie-card v-for="(movie, index) in movies" key="index" :movie="movie" :title="movie.title" :description="movie.desc" :review="movie.review"> </movie-card> <a>BUTTON TO SHOW REVIEWS SELECTED</a> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script> <script src="https://unpkg.com/vuex@2.4.0/dist/vuex.js"></script> <script src="app.js"></script> </body> </html>

JS:

Vue.component('movie-card', { props: ['movie', 'title', 'description', 'review'], template: ` <div> <h2>{{ title }}</h2> <p>{{ description }}</p> <link-btn v-for="(review, index) in movie.reviews" :index="index" :review="review" key="review" @updateIndex="updateI($event)" @updateReview="updateR($event)"> </link-btn> <pre>{{ $data }}</pre> </div> `, data() { return { selectedIndex: '', selectedReview: '' } }, methods: { updateI(e) { if(e + 1 === this.selectedIndex) { this.selectedIndex = '' } else { this.selectedIndex = e + 1 } }, updateR(e) { if(e.id === this.selectedReview.id) { this.selectedReview = '' } else { this.selectedReview = e } } } }) Vue.component('link-btn', { props: ['index', 'review'], template: ` <a @click="change">{{ review.content }}</a> `, methods: { change() { this.$emit('updateIndex', this.index) this.$emit('updateReview', this.review) } } }) new Vue({ el: '#app', data: { added: [], movies: [ { title: 'Regreso al futuro', desc: 'Esto es la descripción de Regreso al futuro', reviews: [ { id: 1, content: 'Blabla...', stars: 2, active: false }, { id: 2, content: 'Blabla...', stars: 3, active: false }, { id: 3, content: 'Blabla...', stars: 1, active: false } ] }, { title: 'Titanic', desc: 'Esto es la descripción de Titanic', reviews: [ { id: 1, content: 'Blabla...', stars: 2, active: false }, { id: 2, content: 'Blabla...', stars: 3, active: false }, { id: 3, content: 'Blabla...', stars: 1, active: false } ] }, { title: 'Blade Runner', desc: 'Esto es la descripción de Blade Runner', reviews: [ { id: 1, content: 'Blabla...', stars: 2, active: false }, { id: 2, content: 'Blabla...', stars: 3, active: false }, { id: 3, content: 'Blabla...', stars: 1, active: false } ] } ] } })
Categories: Software

laravel axios vue.js / Error to connect to database

Vuejs - Wed, 2017-09-06 16:49

I’m trying to get my database objects to use them with Vue and Laravel.

my data.blade.php :slight_smile:

<!DOCTYPE html> <html> <head> <title> Tab test</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.css"> </head> <body> <div id="app"> <users></users> </div> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> <script src="/js/customers.js"></script> </html> my customers.js Vue.component('users',{ template : ` <table class="users"> <thead> <tr> <th>#</th> <th>Name</th> <th>Email</th> <th>Creation Data</th> </tr> </thead> <tbody> <tr v-for="user in users"> <th>{{ user.id }}</th> <th>{{ user.lastname }}</th> <th>{{ user.email }}</th> <th>{{ user.created_at }}</th> </tr> </tbody> </table> `, data: function() { return { users: [] } }, created: function() { this.getUsers(); }, methods: { getUsers: function(){ axios.get("{{route('api_users') }}") .then(response => {this.users = response.data.users}) } } }), new Vue({ el: '#app', });

And my api.php

Route::get('/users', function(){ return App\User::all(); })->name('api_users');

And my errors are :

enter image description here

Do you have an idea ? I think it's a problem with axios but I don't know how to solve it. ?

Thanks for any ideas or solutions :)

Categories: Software

React, Vue, Angular, etc., how to handle errors application wide?

Vuejs - Wed, 2017-09-06 16:43

Let's say I have application (no matter, what is on frontend).

Backend is just API.

There are many pages/forms. Every page/form requires some interaction with API.

Many errors can arise:

1. User is disconnected from network 2. User is not authenticated 3. API for some reason returns unexpected 500 code

It is bad to code handling of these errors in every form and every page (because we want to notify user that something went wrong) so it must be done in one place.

In Vue, for example, I can setup http interceptor, which swallows disconnected network error and 500 errors and shows info to user.

But some things can be bad, like web app checks some API every N seconds, so every N seconds it will show error (if network is disconnected).

Where can I read about web app architecture to remove code duplication like this?

Another thing, showing user that app is processing it's request

In React as I know I can make Redux store with something like

{ "loading": false }

Then every page/form dispatches action, which makes loading = true, upon finishing request sets loading=false so in some top level component I can show loading spinner.

Where to read about such cases?

Categories: Software

How to bind class to a div based on some conditions using Vuejs?

Vuejs - Wed, 2017-09-06 16:14

Actually, I need to activate the background color of a div based on the specific value given by the user. So I have done something like this. And don't know how to go further.

<div v-bind:class="[{active1: r_id === 1},{active2: r_id === 2},{active3: r_id === 3},{active4: r_id === 4},{active5: r_id === 5}]" > Mycard </div>

and my css part is:

active1{background:red;} active2{background:black;} active3{background:green;} active4{background:yellow;} active5{background:white;}

So how should I go on using Vuejs?

Categories: Software

Change laravel variable on every page using vue.js

Vuejs - Wed, 2017-09-06 16:00

I have navbar like this:

<nav class="navbar"> <p style="text-align: center; color: white;">{{ @$test}}</p> </nav>

And my page looks like:

<body class=""> <div id="app"> <div class=""> @include('navbar') @yield('content') <- here another components </div> </div> </body>

How to change that @$test laravel variable using vue.js?

Categories: Software

Axios not passing headers on requests

Vuejs - Wed, 2017-09-06 15:58

I'm building a VueJS application and I'm using JSON web tokens as my auth system. When I log the user, I store the token with localStorage and works fine. I check the headers and it's in the 'Authorization' param.

I pass with axios.defaults.headers.common['Authorization'] = localStorage.getItem('token')

I see the headers and it's okay. But when I execute a get request to an protected route in my API, return 'unauthorized'. But when I pass the header with token manually in the request, works fine.

Somebody know how to pass the header automatically when executing some request?

Categories: Software

Pages