Software

There is a database. Containing two tables - a recipe and a flavor , between which one-to-many relationship. One recipe - a lot of flavor. I send data from the vue. How do I prepare the data for transmission?

var vm = new Vue({ el: '#my_view', data: { recipeslist: [], recipe: [], newrecipe: {} }

fiddle

I wanted to build a QR code SCANNER using Vue.js but I am not able to find any resources.Can someone please help me to get some resources.I am new to Vue.js so I am not able to find any resources/packages to build the QR code scanner

I am creating small project in Laravel. I made a small CMS based on vue.js (it is component based SPA application) and now I (as Admin) want to insert manually users to database (username, email, password, and boolean isAdmin) from vue's component.

And questions is how can I do that in secure way?

I want to pass BASE_URL to all components. My App.js is like:

<template> <router-view></router-view> </template> <script> import addJoke from './components/addJoke.vue' import showJokesAll from './components/showJokesAll.vue' export default { components: { 'add-joke': addJoke, 'show-jokes-all': showJokesAll }, data () { return { BASE_URL : 'http://127.0.0.1:8090' } } } </script> <style> </style>

And the routes.js:

import showJokesAll from './components/showJokesAll.vue'; import addJoke from './components/addJoke.vue'; export default [ {path:'/', component: showJokesAll, props: {BASE_URL: 'http://127.0.0.1:8090'} }, {path:'/add', component: addJoke, props: {BASE_URL: 'http://127.0.0.1:8090'} } ]

and in showJokesAll component I have:

<script> import axios from 'axios'; export default { name: 'showJokesAll', props: ['BASE_URL'], data () { return { jokes:[] } }, methods: { }, created() { axios.get( BASE_URL + '/api/jokes').then( response => this.jokes = response.data); } } </script>

But the components is not received BASE_URL.

[Vue warn]: Error in created hook: "ReferenceError: BASE_URL is not defined"

How can I fix this?

I use vue 2.0 and Laravel 5.4

I trying to build a matching system

that has a dynamic vue component in it (i.e when someone likes another person it immediately tells you that you have liked that person and/or when accepting it immediately tells you that you're a match)

but the component keeps loading, and in my dev-tools it tells me it has an internal server error(500) (+ Uncaught (in promise))

and in my network it shows a BadMethodCallException--> Call to undefined method Illuminate\Database\Query\Builder::matches_with()

i'v included the component in my app.js file (resources)-->> Vue.component('match', require('./components/Match.vue'));

my Vue file

<template> <div> <p class="text-center" v-if="loading"> Loading... </p> <p class="text-center" v-if="!loading"> <a v-if="status == 0" @click="like_user"> <span title="I like you" class="send-heart"></span> </a> <a href=""><span title="I like you to" class="pending" v-if="status == 'pending'" @click="mutual_like">accept</span></a> <a href=""> <span title="You like this person" class="pending" v- if="status == 'waiting'"></span> </a> <span v-if="status == 'match'" title="Chat" class="chat"></span> </a> </p> </div> </template> <script> export default { mounted() { this.$http.get('/check_match_status/' + this.profile_user_id) .then((resp) => { console.log(resp) this.status = resp.body.status this.loading = false }) }, props: ['profile_user_id'], data() { return { status: '', loading: true } }, methods: { like_user() { this.loading = true this.$http.get('/like_user/' + this.profile_user_id) .then((r) => { if (r.body == 1) this.status = 'waiting' this.loading = false }) }, mutual_like() { this.loading = true this.$http.get('/mutual_like/' + this.profile_user_id) .then((r) => { if (r.body == 1) this.status = 'match' this.loading = false }) } } } </script>

my Controller

<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use Auth; use App\Profile; use Illuminate\Support\Facades\Event; use App\User; use App\Matches; use App\Traits\Matchable; use DB; class MatchesController extends Controller { use Matchable; public function check($id){ if (Auth::user()->matches_with($id) === 1) { return [ "status" => "match" ]; } if(Auth::user()->has_pending_like_request_from($id)) { return [ "status" => "pending" ]; } if(Auth::user()->has_pending_like_request_sent_to($id)) { return [ "status" => "waiting" ]; } return [ "status" => 0 ]; } public function like_user($id) { //notify users return Auth::user()->like_user($id); } public function mutual_like($id) { //sending nots return Auth::user()->mutual_like($id); } public function matches() { $uid = Auth::user()->id; $match1 = DB::table('matches') ->leftJoin('users', 'users.id', 'matches.recipient_id') // who is not loggedin but send request to ->where('status', 1) ->where('sender_id', $uid) // who is loggedin ->get(); //dd($friends1); $match2 = DB::table('matches') ->leftJoin('users', 'users.id', 'matches.sender_id') ->where('status', 1) ->where('recipient_id', $uid) ->get(); $matches = array_merge($match1->toArray(), $match2->toArray()); return view('matches', compact('matches')); } }

my Trait use App\Matches; trait Matchable { public function like_user($recipient_id) { if($this->id === $recipient_id) { return 0; } if($this->matches_with($recipient_id) === 1) { return "You are already a match!"; } if($this->has_pending_like_request_sent_to($recipient_id) === 1) { return "You already liked this person."; } if($this->has_pending_like_request_from($recipient_id) === 1) { return $this->like_user($recipient_id); } $match = Matches::create([ 'sender_id' => $this->id, 'recipient_id' => $recipient_id ]); if($match) { return 1; } return 0; } public function mutual_like($sender_id) { if($this->has_pending_like_request_from($sender_id) === 0) { return 0; } $match = Matches::where('sender_id', $sender_id) ->where('recipient_id', $this->id) ->first(); if($match) { $match->update([ 'status' => 1 ]); return 1; } return 0; } public function matches() { $matches = array(); $m1 = Matches::where('status', 1) ->where('sender_id', $this->id) ->get(); foreach($f1 as $match): array_push($matches, \App\User::find($match->recipient_id)); endforeach; $matches2 = array(); $m2 = Matches::where('status', 1) ->where('recipient_id', $this->id) ->get(); foreach($m2 as $match): array_push($match2, \App\User::find($match->sender_id)); endforeach; return array_merge($matches, $match2); } public function pending_like_requests() { $users = array(); $matches = Matches::where('status', 0) ->where('recipient_id', $this->id) ->get(); foreach($matches as $match): array_push($users, \App\User::find($match->sender_id)); endforeach; return $users; } public function matches_ids() { return collect($this->matches())->pluck('id')->toArray(); } public function matches_with($user_id) { if(in_array($user_id, $this->matches_ids())) { return 1; } else { return 0; } } public function pending_like_requests_ids() { return collect($this->pending_like_requests())->pluck('id')->toArray(); } public function pending_like_requests_sent() { $users = array(); $matches = Matches::where('status', 0) ->where('sender_id', $this->id) ->get(); foreach($matches as $match): array_push($users, \App\User::find($match->recipient_id)); endforeach; return $users; } public function pending_like_requests_sent_ids() { return collect($this->pending_like_requests_sent())->pluck('id')- >toArray(); } public function has_pending_like_request_from($user_id) { if(in_array($user_id, $this->pending_like_requests_ids())) { return 1; } else { return 0; } } public function has_pending_like_request_sent_to($user_id) { if(in_array($user_id, $this->pending_like_requests_sent_ids())) { return 1; } else { return 0; } } }

my Model

namespace App; use Illuminate\Database\Eloquent\Model; class Matches extends Model { protected $fillable = ['sender_id', 'recipient_id', 'status',]; }

I am working with draggable and sortable with vueJS, and i am trying to accomplish a thing, basicly i have 2 lists, the first one is a list with some sections like (table, paragraph ...) the second one are building blocks with this sections, but basicly the flow i need is, drag a element from list1 to list2, but don't add the element this is important because i need to open a modal first to set the properties of the element that will be added, and then add it to the futureIndex.

At the moment i have a solution where i can do almost what i need, i just need to understand how to cancel the addition of the element without struggling with the preview of the dragging, with preview i mean this:

i wanna see the adition of the elment at the middle.

So my first list i have done this:

<draggable v-model="sectionList" class="dragArea" @end="changeView()" :move="moveItem" :options="{group:{ name:'sections',pull:'clone',put:false }}"> <div v-for="(section, index) in sectionList" class="card card-color list-complete-item"> <div class="card-block"> <h4 class="card-title text-center">{{section.text}}</h4> </div> </div> </draggable> methods: { addParagraph() { this.$set(this.paragraph, 'key', this.key); this.$set(this.paragraph, 'text', this.text); this.$set(this.paragraph, 'fontSize', this.fontSize); this.$store.commit("appendToDocument", this.paragraph) }, changeView: function () { this.$store.commit("changeCurrentView", this.sectionList[this.dragedIndex].component); this.show(); }, show() { this.$modal.show('modalSection'); }, hide() { this.$modal.hide('modalSection'); }, currentIndex(evt) { console.log(evt.draggedContext.index); }, moveItem(evt) { // future index of the modal that will be draged console.log(evt.draggedContext.futureIndex); this.dragedIndex = evt.draggedContext.index; } },

the second list is not that important, as long as i can understand with this post, how to move the item without adding it and see the preview. i had added the return false at the end but with that i can't see the preview and i can't drag elements between the same list.

Any help with this?

I want to make a desktop app in vue-electron. I am new to both vue.js and electron. I am having some problems while managing state.

When I click on login button https://cloudup.com/cFl9MTY6cnn I send data i.e sessionId and username to next screen https://cloudup.com/c76fmL8OGbF and on this screen I display these props https://cloudup.com/csahnc6Z04J using this code https://cloudup.com/cdR0F6Qyt-3 but as I go to the third screen https://cloudup.com/c0F1ztX8qu3 and then come back then this data disappears https://cloudup.com/cTFW32DxeRa

I am going back to second screen using router.go(-1) https://cloudup.com/cvpxk4GsIRx

The vue-router documentation https://router.vuejs.org/en/essentials/navigation.html says that “router.push method pushes a new entry into the history stack, so when the user clicks the browser back button they will be taken to the previous URL.” and router.go(n) "This method takes a single integer as parameter that indicates by how many steps to go forwards or go backwards in the history stack"

However in my case, lifecycle hooks are called again when I go back to history stack. So does that mean when we come to previous page that component is created again and not popped from stack. I actually don’t want to refresh / reload the page on back button.

I wish to toggle (show/hide) a list when clicking on a title, but cant get the following to work

I have this:

<!-- Title --> <div v-for="(subitem, index) in item" v-if="index === 0" @click="toggle(subitem)"> {{subitem.system_name}} - ({{item.length}}) </div> <!-- All title items that should expand on click "Title" --> <div v-if="subitem.clicked"> <p>{{subitem.system_name}}</p> </div>

When clicking on the im triggering a toggle function called toggle, that sets a property on the item "clicked" to true or false (I should mention that this property does not already exist on the object, and I haven't got the possiblity add it, as we get the JSON from an API)

The toggle function is this:

toggle: function (data) { data.clicked = !data.clicked; },

Now, when I do this above, I get an error saying: "Property or method "subitem" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option"

Im guessing I get this because the "clicked" property doesnt exist in the object... So how do I work around this? Can't see any real solution ?

I am building a SPA in vue js and I am getting date in a timestamp format i want it to be more human readable hence I tried using momentjs which didn't work for me. What is the best way to go in vue js

I have this 3 components. One is for the Question component that consists of questions. The second is for QuestionOption for the list of choices. And the third one is my main component. How do I get the data from the QuestionOption component to the main component. Since the main component is not the parent of the QuestionOption I cannot use the $emit. Also I make use of bus but it's not working on my case. Can anyone help me on this.

Also how will I get all the chosen answers after the submission of the button? Here is my code.

Main.vue

<div class="quiz-background"> <question v-for="(question, $indexParent) in randomQuestions" :question="question['doc'].question" :choices="question['doc']['choices']" :indexParent="$indexParent" :correctAnswer="question['doc'].correctAnswer" > </question> <section style="margin:16px"> <v-ons-button modifier="cta" @click="submit" v-show="!isDone" >Submit </v-ons-button> </section> </div> <script> submit() { bus.$on('choosed', function(answer) { console.log(answer); }); }, </script>

Question.vue

<template> <v-ons-list> <v-ons-list-header> {{indexParent + 1}}.{{ question }} </v-ons-list-header> <question-option v-for="(choice, key, $index) in choices" :choice="choice" :letter="key" :indexParent="indexParent" :index="$index" :correctAnswer="correctAnswer" > </question-option> </v-ons-list> </template> <script> import QuestionOption from './QuestionOption.vue'; export default { props: ['question', 'indexParent', 'choices', 'correctAnswer'], components: { QuestionOption } } </script>

QuestionOption.vue

<template> <v-ons-list modifier="inset"> <v-ons-list-item :name="'question-' + indexParent" :modifier="longdivider" :key="letter" tappable > <label class="left"> <v-ons-radio :name="'question-' + indexParent" :input-id="indexParent + '-' + index" :value="letter" :key="letter" v-model="chosenAnswer" @change="appendAnswer($event)" > </v-ons-radio> </label> <label class="center" :for="indexParent + '-' + index" :class="{'success' : isSuccess, 'danger' : isDanger}" > {{ letter }} . {{ choice }} </label> </v-ons-list-item> </v-ons-list> </template> <script> import Vue from 'vue'; var bus = new Vue(); export default { data() { return { chosenAnswer: '' } }, props: ['letter', 'choice','correctAnswer', 'indexParent', 'index'], computed: { isSuccess () { return this.chosenAnswer === this.correctAnswer; }, isDanger () { return this.chosenAnswer !== this.correctAnswer; } }, methods: { appendAnswer (event) { var answer = event.target.value; bus.$emit('choosed', answer); } } } </script>

I'm building an small guide website which allows users to submit articles about a game. There are a number of components on the website written in Javascript, using VueJS. The majority of the site is powered by Laravel and renders in plain HTML except these components. At the moment, I have VueJS mounted to #app, or my top level div element, as is default with the Laravel configuration.

I then drop components into the page as usual () and VueJS will pick these up and render them appropriately. Awesome.

However, there are a few situations where user submitted content will actually break the page. For example, if double brackets are used {{ example }}, this is VueJS syntax, and it will pick up the tags and refuse to render the page. Another example is if I need to use tags in the body which aren't VueJS, for example embedding a Twitch TV stream.

It seems like because Vue is mounted to #app, absolutely everything inside that shares VueJS syntax or is a script tag will break the page.

Is mounting to #app the wrong idea? Should I be splitting all of my components and somehow launching them with more granularity? I really like the approach of just dropping in Vue components into code with .

Thanks!

I'm asking this question on behalf of my friend.

I want to get a front-end job next year. There's about half a year for me to practice. I have the basic knowledge of html/css/js. Now I want to learn some architecture to do some projects.

I'd like to follow some books' guide and develop a website. Any recommendation?

Here's the requests:

1. The book will teach you step by step to develop a website. The ideal situation is that the book develops a website, and each chapter adds some components and functions to this website.
2. The book uses and teaches you to use one architecture like vue.js, angular.
3. The book includes back-end knowledge, if the back-end is node.js, it would be perfect.

Can anyone give me some recommendations? Web tutorial and book are both ok!

Thanks in advance.

I have 3 hero images and their content and I want to display them randomly when user refreshes the page!

Basically I am trying to display random div using Jquery on loading page, but issue is that the size of hero image is large and by using Jquery, all these 3 images start loading in DOM which affects the speed of page.

Is there any solution for this in Vue.js for loading that one specific div at a time, not all 3 divs when user refreshes the page!?

jQuery Code:

mounted() { var random = Math.floor(Math.random() * $('.slider-item').length); $('.slider-item').eq(random).show(); },

I'm working on a VueJs project and now structuring my router records. I've realized I could be having different components having same name. How do I import them and use them in the route records? How do I make their names unique when configuring the router?

import Vue from 'vue' import Router from 'vue-router' import AllUsers from '../components/Sales/AllUsers' import AllUsers from '../components/Finance/AllUsers' ... export default new Router({ routes: [ { path: '/', name: 'home', component: Home }, { path: '/sales/users', name: 'sales-users', component: AllUsers }, { path: '/finance/users', name: 'finance-users', component: AllUsers }

I have used a hypothetical example here (since I could as well call the components SalesUsers and FinanceUsers) but you will agree there are times when components will really have same name. How do I handle that, given that I need to specify the component for each route record?

PS: Slightly new to VueJS, so advice on improvements and best practices is welcome.

I'm new to vuejs and I'm trying to build a simple single file component for testing purpose.

This component simply displays a bool and a button that change the bool value. It also listen for a "customEvent" that also changes the bool value

<template> {{ mybool }} <button v-on:click="test">test</button> </template> <script> ipcRenderer.on('customEvent', () => { console.log('event received'); this.mybool = !this.mybool; }); export default { data() { return { mybool: true, }; }, methods: { test: () => { console.log(mybool); mybool = !mybool; }, }, }; </script>

The button works fine. when I click on it the value changes. but when I receive my event, the 'event received' is displayed in the console but my bool doesn't change.

Is there a way to access the components data from my code?

Thanks and regards, Eric

I try connect Vue.js with Symfony 3, but have no idea how to create proper route configuration for it. Project tree looks like that:

Project root - app/ - Resources/ - views/ - default/ - web/ - assets/ - static/ index.html // here Vue is included

From Symfony I provide some REST API, the routes to it are prefixed by /api/. And I have some routes in Vue SPA. The problem is if I press F5 in browser on any Vue route, which of course is not included in my routing.yml, browser returns 404 error from Symfony. One half-working decision is when I put content of index.html to Resourses/views/default/twig with such a route:

fallback_for_vue: path: /{req} defaults: { _controller: 'AppBundle:Default:index' } requirements: req: ".+"

,taken from another question, but this is not actually what I need, because I don't want my frontend programmer to go somewhere except web/ folder. So which configuration of Symfony routes I should use?

I am getting warnings in the console that the:

named exports in *.vue files are ignored.

On looking around about the problem I came across this where it is suggested that if I upgrade the vue loader to the version 8.3.1 that all the warnings are gone. On checking the package.json file in the node_modules/vue-loader folder I saw that I already have that version:

{ "_args": [ [ { "raw": "vue-loader@^8.3.1", "scope": null, "escapedName": "vue-loader", "name": "vue-loader", "rawSpec": "^8.3.1", "spec": ">=8.3.1 <9.0.0", "type": "range" },

How can I fix this and get rid of this warnings?

I want to drag a element from list 1 to list 2 and call a method when i leave the drag, i almost accomplish everything with it, my only problem here is that i only can put the @end(responsable for detecting the end of dragging) in the draggable tag, and the div that has the v-for is a child from it, so i can't get the element from the list to pas to a function in my draggable.

This is my code:

<draggable v-model="sectionList" class="dragArea" @end="changeView(section.component)" :options="{group:{ name:'sections', pull:'clone', put:false }}"> <transition-group name="list-complete"> <div v-for="(section, index) in sectionList" @click="changeView(section.component)" :key="section.text" class="card card-color list-complete-item"> <div class="card-block"> <h4 class="card-title text-center">{{section.text}}</h4> </div> </div> </transition-group> </draggable>

the @end=changeView receives a parameter, that parameter should be the section.component that comes from the list, any help to get the element?

Thank you

Im trying to create a computed function that can filter out my Object by "alarms",

So I've created a computed function, called filteredAlarms, and in my loop im doing a v-for loop:

<li class="event-log__item timeline__item" v-for="(item, key) in filteredAlarms" :key="key">

And in my filter im trying to do the following:

let filteredAlarms = Object.keys(this.eventLog).forEach(key => { this.eventLog[key].filter(item => { return item.type.indexOf("alarm") > -1 }); }); return filteredAlarms

Unfortunately, this doesn't work - Im getting a an error: TypeError: this.eventLog.filter is not a function

What am I doing wrong? :)

The object im trying to filter is something similar to the one below:

"system_events": { "1013": [{ "id": 25899, "timestamp": "2017-08-15T21:26:42Z", "type": "alarm", "code": 190, "title": "", "description": "", "appeared": "2017-08-15T21:26:40Z", "disappeared": null, "acknowlegded": null, "solved": null, "system_name": "Randers pr 44b sidste station" }, { "id": 26157, "timestamp": "2017-08-15T21:32:17Z", "type": "warning", "code": 190, "title": "", "description": "", "appeared": "2017-08-15T21:32:06Z", "disappeared": null, "acknowlegded": null, "solved": null, "system_name": "Randers pr 44b sidste station" }, { "id": 26387, "timestamp": "2017-08-15T21:37:38Z", "type": "info", "code": 190, "title": "", "description": "", "appeared": "2017-08-15T21:37:33Z", "disappeared": null, "acknowlegded": null, "solved": null, "system_name": "Randers pr 44b sidste station" } ], "1015": [{ "id": 23777, "timestamp": "2017-08-15T20:38:08Z", "type": "alarm", "code": 191, "title": "", "description": "", "appeared": "2017-08-15T20:38:00Z", "disappeared": null, "acknowlegded": null, "solved": null, "system_name": "Favrskov Svenstrup gyvelvej" }, { "id": 23779, "timestamp": "2017-08-15T20:38:08Z", "type": "alarm", "code": 190, "title": "", "description": "", "appeared": "2017-08-15T20:37:58Z", "disappeared": null, "acknowlegded": null, "solved": null, "system_name": "Favrskov Svenstrup gyvelvej" }, { "id": 23841, "timestamp": "2017-08-15T20:39:41Z", "type": "alarm", "code": 192, "title": "", "description": "", "appeared": "2017-08-15T20:39:31Z", "disappeared": null, "acknowlegded": null, "solved": null, "system_name": "Favrskov Svenstrup gyvelvej" }, { "id": 25243, "timestamp": "2017-08-15T21:12:03Z", "type": "alarm", "code": 191, "title": "", "description": "", "appeared": "2017-08-15T21:11:55Z", "disappeared": null, "acknowlegded": null, "solved": null, "system_name": "Favrskov Svenstrup gyvelvej" }, { "id": 25529, "timestamp": "2017-08-15T21:18:11Z", "type": "alarm", "code": 190, "title": "", "description": "", "appeared": "2017-08-15T21:18:00Z", "disappeared": null, "acknowlegded": null, "solved": null, "system_name": "Favrskov Svenstrup gyvelvej" } ],

} ]

}

I am trying to use vuejs and highchart on displaying the data. When I change the model, I want to redraw the chart data. Any idea ? This is what I tried to do?

var options = { title: { text: 'Temperature ', x: -20 //center }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ] }, yAxis: { title: { text: 'Temp' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { valueSuffix: '' }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, series: [{ name: 'Japan', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] }, { name: 'Australia', data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] }] };

For the Vue

return new Vue({ el: '#app', data: { modelValue = '', options:options }, methods: { changetemp = function(){ //The option value should be change here } },

When the model value is changed, I want the options to be redrawn