Vuejs

There are two teams, each has a logo and name, and for the first team, we display the logo, and then the name, and for the second, the name, and then the logo. I wanted to put the logo and name in the component, and handle this situation like this :

<div class="team_container"> <template v-if="isTeam1Flag"> <img :src="/logo_1.png" alt="Logo Team 1"> <span >Team 1</span> </template> <template v-else> <span >Team 2</span> <img :src="/logo_2.png" alt="Logo Team 2"> </template> </div>

Can you tell me if there is a better solution for this task?

I have the following line of code in my .vue template for an input field component which I want to check for whether an input field is a checkbox and bind a class on the input field if it is true.

In the component it looks like this:

<input :type="type" class="o-pf-input" :class="!isCheckbox ? 'o-pf-input--cbx' : ''" :placeholder="placeholder" :name="placeholder" :value = 'value' @input="value = $event.target.value">

Where it has :class="!isCheckbox ? 'o-pf-input--cbx' : ''"

in my data option I have this:

data: function() { return { value: '', checkbox: 'o-pf-input--cbx', isCheckbox: false } },

So it is kind of working but it applies the class to all input fields which is what I don't want to achieve. It should only add the class when the attribute type is a checkbox.

I have a problem, I really confused about how to get value from form binding vue js. I have tried --> https://vuejs.org/v2/guide/forms.html#Select. But I always getting error such as --> Property or method "selected" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. What's wrong with my code ?

Here is my code :

data : function() { return { data : { options : {}, selected : '' } }; }, methods : { Search : function(){ var vm = this; var types = [ { "id" : "id", "value" : "ID" }, { "id" : "title", "value" : "Title" }, { "id" : "category", "value" : "Category" }, { "id" : "username", "value" : "Nama User" } ]; vm.data.options = types; console.log(vm.data.selected); } }

Here is my html code :

<select v-model="selected" class="form-control sl"> <option v-for="option in data.options" v-bind:value="option.id"> {{ option.value }} </option> </select>

I am using vue-date-range date picker here i am using disabledStart and disabledEnd props but its not disabling date on view.for disabling date it required an object i am passing it but it doesn't work.I don't know what was the correct object format for disabling the dates.

Any help would be appreciated Plugin link https://www.npmjs.com/package/vue-date-range

Here is HTML

<div class="form-group form-group-lg"> <label>When is it required?</label> <daterange class="calendar" :sync-range.sync="range" :disable-days-before-today="disableDaysBeforeToday" :days-disabled-start="disableStart" :days-disabled-end="disableEnd" :lang="lang" @change="onChange"> </daterange> </div>

JS

<script> import { DateRange } from 'vue-date-range'; export default { data() { return { lang: 'en', disableDaysBeforeToday: true, disableStart: { startDate:moment()}, disableEnd: { endDate: moment().add(7, 'days') }, range: {} } }, components: { 'daterange': DateRange }, methods: { onChange(range) { console.log("START", range.startDate._d); console.log("END", range.endDate._d); }, disable() { console.log("on button click disable dates"); this.disableStart._d = new Date('2017-08-25').toString() } } } </script>

After that I uploaded site in xampp's virtualHost axios methods stopped working.(but site is working well)

httpd-vhosts:

NameVirtualHost *:80 <VirtualHost *:80> DocumentRoot C:\xampp\htdocs\zbudWew\public ServerName localhost <Directory C:\xampp\htdocs\zbudWew\public> Order allow,deny Allow from all </Directory> </VirtualHost>

.env:

DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=zbudwew DB_USERNAME=root DB_PASSWORD=

example axios method:

axios.post('api/news/', this.info).then(response => { this.news.unshift(response.data.info); this.info = {title: '', body:''}; console.log(response.data); }, response => { this.errors = response.data; });

On my localhost:8000 address site and adding content is working good, but if I am trying add content on my 192.168.0.199 address I am getting errors:

[Vue warn]: Error in render function: "TypeError: Cannot read property 'title' of undefined" found in ---> <Info> at C:\xampp\htdocs\zbudWew\resources\assets\js\components\Info.vue <NewsManagement> at C:\xampp\htdocs\zbudWew\resources\assets\js\components\NewsManagement.vue <Root>

Which is werid, because:

axios.get('api/news').then(response => { this.news = response.data.news; });

is working correctly. Could you guys give me an advice how to solve this?

I have a list as component and it contains hidden popup like facebook. For example you click any item on list, and it shows popup about the item here is my interface that I mentioned

It runs properly with v-if / v-show attributes. But works only on item list. If the user wants to click any location on the interface. I'm checking like following lines:

popupListener(event) { let element = $(event.target), allCard = $(document).find('.popup'), pointer_popup = element[0].closest('.popup'), pointer_card = element[0].closest('.card-item'); if ((!pointer_popup && !pointer_card) || (pointer_popup && pointer_card)) { allCard.hide(); } }

Also this listens in ready method of VueJS. This is not good solution. I wonder and look for better solution with VueJS.

I have just started to learn VueJS 2 and the more questions I have the harder it becomes.

The idea is that I have a sample problem with an array of objects, where I want to sort the array by "votes" property, which can be dynamically updated for each separate element. I want to sort my list by votes dynamically. Thus the question is how can I do that without doing weird code.

In angular you will do something like

for candidate in candidates | orderBy: 'votes'

but in here I could of though only of something like

v-for="(value, index, key) in sorted_candidates"

where in .js I'll have

computed : { sorted_candidates() { return this.candidates.sort((a, b) => { return b.votes - a.votes;}); } }

So my question would be if there is a more elegant way to solve this problem? Note: I am sorting on object property.

I am using vuejs with vuetify a material design support for vuejs, but I am confused as to how I can add custom css styles to material design without breaking a convention of the material design itself.

It is like bootstrap where we can call .row{} and override the styling or does it differ in some ways.

How can I loop over data set via ajax in my component methods? The problem is that when I try to call a method to perform the loop on component mounted(), the data isn't there yet. How can I tell my vue component to wait for the ajax data to arrive to execute the function? The parent makes the ajax call, so I can't stick it in the .done() function.

Vue.component('sidebar', { props: ['people'], template: ` <div id="sidebarContain" v-if="this.people"> <div v-for="person in people" :class="[{'checked-in': isCheckedIn(person)}, 'person']" :id="person.id"> {{person.first_name + ' ' + person.last_name}} </div> </div> `, methods: { isCheckedIn(person) { return person.reg_scan == null ? true : false; }, displayName() { //this is the function I want to run when ajax data is done and passed from parent to child for (var i = 0; i < this.people.length; i++) { console.log(this.people[i]); } } }, mounted() { this.displayName(); } }); var app = new Vue({ el: '#main', data: { people: [] }, methods: { loadPeople() { $.ajax({ method: 'POST', dataType: 'json', url: base_url + 'users/getParticipants/' + event_id }).done(data => { this.people = data; }); }, setRefresh() { setInterval(() => { console.log("Getting People"); this.loadPeople(); }, 10000); } }, mounted() { this.loadPeople(); this.setRefresh(); } }); <div id="app"> <sidebar :people="people"></sidebar> </div>

While looping on array of sales , i need to capture the object of which salesPerson === "bar" and print its sellValue outside the v-for block.

Of course i can't access the array in hard-coded way. i have to assume that the position of the object i'm looking for is random.

also, i can't add another loop on top of the one loop that already exist here. (v-for is a loop obviously).

i need way to do achieve it.

here is an example component:

<template> <div id="app"> <!-- i need to print here the sellValue of 'bar' --> <p v-for="(sell,index) in sales" :key="index">{{sell.sellValue}}</p> </div> </template> <script> export default { name: 'app', data() { return { sales: [ { salesPerson: 'foo', sellValue: 1 }, { salesPerson: 'bar', sellValue: 2 } ] } } } </script>

I'm trying to install vuejs-uib-pagination on laravel 5.4... (https://github.com/sant123/vuejs-uib-pagination)

1. npm install vuejs-uib-pagination

2. Added the following codes to /resources/assets/js/app.js

3. npm run dev

4. Added HTML and scripts

On browser, I got an error: [Vue warn]: Unknown custom element: <uib-pagination> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Some codes located at /src/types/index.ts like Vue.component("uib-pagination",...

I think I need to import these stuffs, but I'm not familiar with 'webpack' or 'mix'. Where will be the proper way to import the codes?

I have an element in my html code

<div class="my_div"> </div>

Now i want to alert when user scrolled to this element.How can i do that using Vue considering that my_div is in the center of the page?

I have a global status variable, STATUS, that I'd like to inject into essentially all of my Vue components, given so many of them have to test against the status of API calls.

Two questions:

1. Does this kind of go against a Vue paradigm, and I should find a different solution?
2. If not, what is the best way to do this (add to window, etc...)?

I'm trying to send push notification to users in my Web App but it is not working on mobile.

I'm using VueJs + Firebase, i use a Cloud Function to send the notification and in the service worker i receive and handle for show to the user.

It work in the Browser on PC, but dont work in mobile 'Android', here are some code:

Cloud Function:

}).then(function (aTokens) { const payload = { data: { title: 'Test-Title', body: 'Test-Body' } } // Send notifications to all tokens. return admin.messaging().sendToDevice(aTokens, payload).then(res => { res.results.forEach((result, index) => { const error = result.error if (error) { console.error('Failure sending notification to', tokens[index], error) } }) response.send('OK') }) })

Service-Worker Function:

importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-app.js'); importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase- messaging.js'); var config = { messagingSenderId: "1033425324523" } firebase.initializeApp(config); var messaging = firebase.messaging(); messaging.setBackgroundMessageHandler(function (payload) { var title = payload.data.title; var options = { body: payload.data.body }; return self.registration.showNotification(title, options); });

In Browser the Notification work See The Image:

But in Android it dont work, i have the last version or chrome and firefox and i tested in both, i also put the Web app in the home screen and allowed to send notification too. But the notifications nerver show there.

What i need to include for i see push notifications on mobile too?

How can I require vue-server-renderer with import instead?

const renderer = require('vue-server-renderer').createRenderer()

I tried:

import renderer from 'vue-server-renderer' const vueRenderer = renderer.createRenderer()

Error:

var vueRenderer = _vueServerRenderer2.default.createRenderer(); ^ TypeError: Cannot read property 'createRenderer' of undefined

Any ideas?

Trying to build a dropdown-menu that will only be shown when screen is smaller than 767px. There are two requirements here to hide the menu and those are:

If someone clicks outside the menu and when a random router link is being clicked.

export default { name: 'navbar', data() { return { isShow: false } }, methods: { onClick(e) { isShow = false } } } <button v-on:click ="isShow = !isShow">Click ME</button> <div class="router" v-show="isShow"> <router-link to="/" class="nav-link" @click.native="onClick">Home</router-link> <router-link to="/phones" class="nav-link">Phones</router-link> <router-link to="/moreproducts" class="nav-link">More Products</router-link> <router-link to="/blogs" class="nav-link">Support</router-link> <router-link to="/news" class="nav-link">News</router-link> </div> </div>

As title Vuefire can auto get data from firebase database, but it needs some loading time. So I want to display some css animation before data being fetched, is there any event can I $watch when it successed

I just finished a basic project in Vue JS, on my localhost server. Now, what I want to do is to move all the content from localhost to a public server. What can I do to solve this problem?

I am working with a Vue-js based website and showing data using JSON API. I parse data using Axios and returned the response to my view.

My JSON API contains some HTML data including an embed gist like below

<p>Some informative text here <br /> <script src="https://gist.github.com/nisat19/8e8e2c03ecbf198daef168948548d481.js"></script> </p>

In the view, I tried to render my data with v-html

<div v-html="content"></div>

It successfully parses only the HTML portion but does not render the gist. i.e

Some informative text here /* Gist Script Missing */

Is there any way to parse the script?

I'm starting to get into web development a little more. Currently I use the Spark Framework along with Vue for the few apps I've made. While this certainly works it's not ideal.

The project is built with Maven (and NPM for Vue) and the build process looks something like this.

1. Maven packages the Spark Framework Java application
2. Maven (with the frontend-maven-plugin) downloads node/npm and builds the Vue frontend
3. Maven copies the compiled resources into the jar as static assets

So the filesystem looks something like this

/src/main/java (Spark Framework)

/src/main/resources (Vue)

This leads to a couple of annoyances.

1. Everything is in one repository. Ideally I'd be able to have a separate repo for each project
2. Development workflow isn't ideal. If I just want to test the Java part of the app, I still spend time compiling the frontend (Vue)
3. A minor issue, but while working in an IDE, I'm dealing with deeply nested folders. Anytime I want to edit the frontend, my folder structure looks something like /src/main/resources/project-vue/

Here's one of my projects that uses this model

So my question is: What's a better way to structure my application?