Software

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.

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.

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!

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

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:

I tried this, but it didn't work:

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?

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}`)

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?

how to list select values? example below.

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

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!!

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 } ] } ] } })

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 :)

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?

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?

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?

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?

I’m integrating Vue with a CMS called AEM thats works basically as component base system like Vue works too. But instead of having a webpack and imports of .vue files, every component on this CMS is a new Vue instance (new Vue({…})). So on my page I have a lot of Veu instances that communicate with each other using the same store (vuex).

This is actually working fine, but I have a scenario when I need a CMS component inside another. Since both this components are a unique vue instance and the “el” property from the parent includes the “el” from the child, the child component doesn’t work.

I know that this is not the expected use of this lib, but is there any way that I can tell or share the same “context” on both vue instances or even another approach for this scenario.

Thx, Alexandre.

I'm making a new project. I have one server application (Node, Express, Mongo) and I'm having two client application (both are VueJS). I want this structure (I want only one node_modules directory):

- client --- admin (vue project) --- page (vue project) - server --- server.js - node_modules - package.json

I server app works fine, but I have problems with VueJS. I created new project with vue-cli, remove node_modules and package.json. All dependencies I have in main node_modules. I had error:

These relative modules were not found: * ./build/dev-client in multi ./build/dev-client ./src/main.js * ./src/main.js in multi ./build/dev-client ./src/main.js

But I resolved this by changing paths in webpack.base.conf from this:

entry: { app: './src/main.js' },

to this:

entry: { app: './client/admin/src/main.js' },

and in webpack.dev.conf from this:

Object.keys(baseWebpackConfig.entry).forEach(function (name) { baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) })

to this:

Object.keys(baseWebpackConfig.entry).forEach(function (name) { baseWebpackConfig.entry[name] = ['./client/admin/build/dev-client'].concat(baseWebpackConfig.entry[name]) })

Project is now running but now I have this error:

ERROR Failed to compile with 1 errors error

and I don't know how to fix it. Please help

To engage readers, build community, and strengthen journalism, Mozilla’s open-source commenting platform will be integrated across washingtonpost.com this summer

 

Digital journalism has revolutionized how we engage with the news, from the lightning speed at which it’s delivered to different formats on offer.

But the comments section beneath that journalism? It’s… broken. Trolls, harassment, enmity and abuse undermine meaningful discussion and push many people away. Many major newsrooms are removing their comments. Many new sites are launching without them.

Instead, newsrooms are directing interaction and engagement to social media. As a result, tools are limited, giant corporations control the data, and news organizations cannot build a direct relationship with their audience. 

At Mozilla, we’re not giving up on online comments. We believe that engaging readers and building community around the news strengthens not just journalism, but also open society. We believe comments are a fundamental part of the decentralized web.

Mozilla has been researching, testing, and building software in this area since 2015. Today, our work is taking a huge step forward as the Washington Post integrates Talk — Mozilla’s open-source commenting platform — across washingtonpost.com.

Talk is currently deployed across the Washington Post’s Politics, Business, and The Switch (technology) sections, and will roll out to more sections in the coming weeks.

Talk is open-source commenting software developed by Mozilla.

What is Talk?

Talk is developed by The Coral Project, a Mozilla creation that builds open-source tools to make digital journalism more inclusive and more engaging, both for audience members and journalists. Starting this summer, Talk will also be integrated across Fairfax Media’s websites in Australia, including the Sydney Morning Herald and The Age. One of The Coral Project’s other tools, Ask, is currently being used by 13 newsrooms, including the Miami Herald, Univision, and PBS Frontline.

“Trust in journalism relies on building effective relationships with your audience,” says Andrew Losowsky, project lead of The Coral Project. “Talk rethinks how moderation, comment display and conversation can function on news websites. It encourages more meaningful interactions between journalists and the people they serve.”

“Talk is informed by a huge amount of research into online communities,” Losowsky adds. “We’ve commissioned academic studies and held workshops around the world to find out what works, and also published guides to help newsrooms change their strategies. We’ve interviewed more than 300 people from 150 newsrooms in 30 countries, talking to frequent commenters, people who never comment, and even trolls. We’ve learned how to turn comments — which have so much potential — into a productive space for everyone.”

“Commenters and comment viewers are among the most loyal readers The Washington Post has,” said Greg Barber, The Post’s director of newsroom product. “Through our work with Mozilla, The New York Times, and the Knight Foundation in The Coral Project, we’ve invested in a set of tools that will help us better serve them, powering fruitful discussion and debate for years to come.”

The Coral Project was created thanks to a generous grant from the Knight Foundation and is currently funded by the Democracy Fund, the Rita Allen Foundation, and Mozilla. It also offers hosting and consulting services for newsrooms who need support in running their software.

Here’s what makes Talk different

It’s filled with features that improve interactions, including functions that show the best comments first, ignore specific users, find great commenters, give badges to staff members, filter out unreliable flaggers, and offer a range of audience reactions.

You own your data. Unlike the most popular systems, every organization using Talk runs its own version of the software, and keeps its own data. Talk doesn’t contain any tracking, or digital surveillance. This is great for journalistic integrity, good for privacy, and important for the internet.

It’s fast. Talk is small — about 300kb — and lightweight. Only a small number of comments initially load, to keep the page load low. New comments and reactions update instantaneously.

It’s flexible. Talk uses a plugin architecture, so each newsroom can make their comments act in a different way. Plugins can be written by third parties — the Washington Post has already written and open sourced several — and applied within the embed code, in order to change the functionality for particularly difficult topics.

It’s easy to moderate. Based on feedback from moderators at 12 different companies, we’ve created a simple moderation system with keyboard shortcuts and a feature-rich configuration.

It’s great for technologists. Talk is fully extensible with a RESTful and Graph API, and a plugin architecture that includes webhooks. The CSS is also fully customizable.

It’s 100% free. The code is public and available for you to download and run. And if you want us to help you host or integrate Talk into your site, we offer paid services that support the project.

Learn more about The Coral Project.

The post Mozilla and the Washington Post Are Reinventing Online Comments appeared first on The Mozilla Blog.

I am using feathers-vuex in a project and am not very familiar with the rest of the feathers package. I am using this is because with the scaffolding cli, it was very easy to get started and it just works. Has been a really good experience so far. However, this also means that I do not entirely get what's going on under the hood. I am trying to use the find function to retrieve all records where a nested array contains a certain string from a mongodb. The questions are as follows:

• So far, the only option that I can think of is a fuzzy search. Is that the way to do it? Or are there other possibilities?
• Is my assumption that fuzzy search won't work because of the absence of hooks correct? Or have I misread the docs?
• Any other general way of accomplishing this?
• Does this mean that fuzzy search will not work using feathers-vuex or are there ways to accomplish this?

I'm discovering Vuex at this time and I have came across the concepts of Actions which should be used instead of Mutations if it is about asynchronous code.

But, I have this question, would it better to make all the asynchronous logic in the action itself or do the asynchronous login in the component and just commit Mutations in the then call?

In other words, is this code considered best practice in the Vuex realm or I just need to move the API call to a state Action?

Thanks.