Software

I am working with vue-js-modal and i already builded my modal and it is working well except i can't move the modal to the sides, just top and bottom if i try to move it to the left or right it doesn't move.

Basicly i followed the inscructions on the github repo.

At the begin i installed the vue-js modal and in my main.js i set it up like this:

import VModal from 'vue-js-modal' Vue.use(VModal, { dialog: true })

then on my component i call it like this:

<modal name="modalSection" @closed="checkClose" :draggable="true"> <component :is="getView"> </component> </modal>

my hide and show is working well, so i don't need to show it here, the draggable = true just allows me to drag it top and down, i thaught it has something to do because i set bootstrap up and maybe it is inside the grid in a specific col, but i checked it and it doesn't.

Any help?

Thanks

The jsfiddle was, https://jsfiddle.net/r6o9h6zm/2/

I have used bootstrap nav pills in vue js 2, to display the data based on the selected tab (i.e, if click over the standard non ac room, the record of that particular room need to be displayed) but here i am getting all the three rooms at instance and i have used the following to achieve it, but it gives no result.

Html:

<div id="app"> <div class="room-tab"> <ul class="nav nav-pills nav-justified tab-line"> <li v-for="(item, index) in items" v-bind:class="{'active' : index === 0}"> <a :href="item.id" data-toggle="pill"> {{ item.title }} </a> </li> </ul> <div class="room-wrapper tab-content"> <div v-for="(item, index) in items" v-bind:class="{'active' : index === 0}" :id="item.id"> <div class="row"> <div class="col-md-8"> <div class="col-md-4"> <h3>{{item.title}}</h3> <p>{{item.content}}</p> </div> </div> </div><br> </div> </div>

Script:

new Vue({ el: '#app', data: { items: [ { id: "0", title: "Standard Non AC Room", content: "Non AC Room", }, { id: "1", title: "Standard AC Room", content: "AC Room", }, { id: "2", title: "Deluxe Room", content: "Super Speciality Room", }, ], } })

How can i get the result with records of only selected room type and others needs to be hidden?

I have a comment delete button in vue components.

<button class="button" style="background-color: grey;" @click="destroy">Delete</button>

When the button clicked will call the method "destroy"

destroy(){ swal({ title: "Delete this comment?", text: "Are you sure? You won't be able to revert this!", type: "warning", showCancelButton: true, confirmButtonColor: "#3085d6", confirmButtonText: "Yes, Delete it!", closeOnConfirm: true }, function(){ axios.delete('/comment/' + this.comment.id + '/delete'); $(this.$el).fadeOut(300, () => { return toastr.success('Comment deleted.'); }); }); },

i expect when alert come out, if users clicked confirm button then process to delete, but seem like when user clicked the delete function are not executed. What is the problems here?

I'm trying to build an app using Tone.js on top of Nuxt.js. Tone.js requires the browser's Web Audio API and as Nuxt renders stuff on the server side my build keeps failing.

Nuxt addresses this in the plugin documentation and I've followed that approach in my nuxt.config.js file writing:

module.exports = { plugins: [{src: '~node_modules/tone/build/Tone.js', ssr: false }], }

however that results in this error: [nuxt] Error while initializing app TypeError: Cannot read property 'isUndef' of undefined. Looking at Tone's source I'm pretty sure this is because I'm getting it because the code is still being executed on the server side.

I've seen solutions putting the js file into the static folder and checking process.browser but both result in Tone being undefined.

My question seems to be the same as this one if it's helpful additional context

I’m very new to VUE and trying loop through dynamically created tables from unique arrays. I have the table creation complete and dynamic table id’s based off a value from the array. I’m trying to validate that either cell[0] in each row contains a specific string or if the last cell[?] which has a select dropdown has been selected and is said string.

I’ve done something similar before in JS like this.

$("#" + t_node + " :selected").each(function (i,sel) { .....///code }

and like this

$("table#"+t_node+" > tbody > tr").each(function(row, tr) { .....///code }

I don’t know how to replicate with VUE. I have a onclick event that once all tables are created the onclick will loop through and validate each table.

I'm pretty sure it has something to do with babel, webpack and d3. I'm trying to get techanjs (http://techanjs.org) to work with vue.js (http://vuejs.org)

Here is an example app. https://github.com/chovy/techan-vue

You can checkout the repo and load up the app with:

git clone https://github.com/chovy/techan-vue cd techan-vue npm install npm run dev

As you can see the chart loads but you get errors in the console when you move your mouse around. From my understanding this might be due to d3 live event binding and using babel with webpack but so far I have not found a solution to the problem.

Here is the error:

Uncaught TypeError: Cannot read property 'sourceEvent' of null at __webpack_exports__.a (eval at <anonymous> (renderer.js:2455), <anonymous>:6:26) at __webpack_exports__.a (eval at <anonymous> (renderer.js:9334), <anonymous>:7:99) at SVGRectElement.eval (eval at <anonymous> (renderer.js:8060), <anonymous>:2357:38) at SVGRectElement.eval (eval at <anonymous> (renderer.js:2037), <anonymous>:29:16) __webpack_exports__.a @ sourceEvent.js?354a:5 __webpack_exports__.a @ mouse.js?ab49:5 (anonymous) @ techan.js?5956:2357 (anonymous) @ on.js?519a:27 drag.js?c3c9:10 Uncaught TypeError: Cannot read property 'button' of null at SVGPathElement.defaultFilter (eval at <anonymous> (renderer.js:8340), <anonymous>:16:70) at SVGPathElement.mousedowned (eval at <anonymous> (renderer.js:8340), <anonymous>:47:32) at SVGPathElement.eval (eval at <anonymous> (renderer.js:2037), <anonymous>:29:16)

Setting the "src" attribute of the html video element does not work with Vue.js and Vuex:

<video id="myVideoEl" :src="myStreamSrc" autoplay="autoplay">

myStreamSrc is a computed value and is set in a mutation by an event handler:

AddStream: function (state, plMyStream) { state.myRTCPeerConnection.addStream(plMyStream) state.myStreamSrc = plMyStream }

When I run my application with that code, I get the following error:

HTTP “Content-Type” of “text/html” is not supported. Load of media resource http://localhost:8080/[object%20MediaStream] failed.

When I do the following:

state.myVideoEl = document.querySelector('#myVideoEl') state.myVideoEl.srcObject = payloadWithMyStream

I do not get any error and the stream is shown. The problem is, I can not use the working code snipped because the referenced elements are added later to the DOM. This code snippet does not work when I bind the html video element in a div with a v-if Vuex.js attribute. Then I just get "undefined" as a result (because the div element with the video element did not exist on page load).

Is there a difference between setting the srcObject and setting the src attribute? I thought that when I set srcObject the video element will have a src attribute, but it does not.

Is it possible to set the srcObject in the video html attribute?

For more info, please visit my theard in the Vue.js forum: https://forum.vuejs.org/t/reference-elements-when-they-rendered-with-v-if/16474/13

I'm currently looking at the following example: https://vuejs.org/v2/examples/grid-component.html

and my goal is to have the data be HTML that is rendered. Here's what I've tried:

// bootstrap the demo var demo = new Vue({ el: '#demo', data: { searchQuery: '', gridColumns: ['html'], gridData: [ { html: '{{{<html><div><p>test</p></div></html>}}}', name: 'Chuck Norris', power: Infinity }, { name: '<html><div><p>test</p></div></html>', power: 9000 }, { name: '<div v-html="<p>Test</p>"></div>', power: 7000 }, ] } });

This is a proof of concept before I clean up the other data points. The requirements call for having a single-column grid that has boxes as it's items, with each box being a snapshot of rendered HTML.

We don't want to have to render the HTML to images if possible. In production, the HTML will be the content html of email mailings. Everything else, code wise, is the same as the example posted in the above link.

Thanks

I am going to build a computer game to study economic terms in Russian for Chinese students.

The script of my game is:

1. I have 5 random Chinese and five random Russain cards with economic terms. Upper there are Chinese ones, below are Russian ones. Cards are made like jpg files in Photoshop.
2. The user must find the particular term in Chinese, then the same one in Russian.
3. To make this game more complicated, I should mix terms. Now Chinese terms is just over its Russian translation. I want terms and translation to be mix in random. But Chinese terms should be always over Russian.

Here is my code:

HTML:

<div id="game"> <div class="container"> <div class = "chinese"> <game-card-chinese v-for="card in getSplicedArray(5)" v-bind:gameprop="card"> </game-card-chinese> </div> <div class = "russian"> <game-card-russian v-for="card in getSplicedArray(5)" v-bind:gameprop="card"> </game-card-russian> </div> </div>

JS:

Vue.component('game-card-chinese', { props: ['gameprop'], template: '<span><img :src = "gameprop.src_chinese" data-toggle="tooltip" v-bind:title="gameprop.name"/></span>' }) Vue.component('game-card-russian', { props: ['gameprop'], template: '<span><img :src = "gameprop.src_russian" data-toggle="tooltip" v-bind:title="gameprop.description"/></span>' }) var game = new Vue({ el: '#game', data: { splicedCardList:[], cardList: [ { id: 0, src_chinese: 'img/actions/actions_chinese.jpg', src_russian: 'img/actions/actions_russian.jpg', name: "Акция", description: "Акция – ценная бумага, свидетельствующая о внесении средств в капитал акционерного общества и дающая право на получение части прибыли в виде дивидендов" }, { id: 1, src_chinese: 'img/actives/actives_chinese.jpg', src_russian: 'img/actives/actives_russian.jpg', name: "Актив", description: "Актив: часть бухгалтерского баланса (левая сторона), отражающая состав и стоимость имущества организации на определённую дату. Совокупность имущества, принадлежащего юридическому лицу или предпринимателю" }, { id: 2, src_chinese: 'img/arenda/arenda_chinese.jpg', src_russian: 'img/arenda/arenda_russian.jpg', name: "Аренда", description: "Аренда — форма имущественного договора, при которой собственность передаётся во временное владение и пользование (или только во временное пользование) арендатору за арендную плату" }, { id: 3, src_chinese: 'img/amortization/amortization_chinese.jpg', src_russian: 'img/amortization/amortization_russian.jpg', name: "Амортизация", description: "Амортизация — процесс переноса по частям стоимости основных средств и нематериальных активов по мере их физического или морального износа на стоимость производимой продукции (работ, услуг)" }, { id: 4, src_chinese: 'img/assignation/assignation_chinese.jpg', src_russian: 'img/assignation/assignation_russian.jpg', name: "Ассигновать", description: "Ассигновать - Назначить отпуск денег." }, { id: 5, src_chinese: 'img/bankruption/bankruption_chinese.jpg', src_russian: 'img/bankruption/bankruption_russian.jpg', name: "Банкротство", description: "Банкротство — признанная уполномоченным государственным органом неспособность должника (гражданина, организации, или государства) удовлетворить в полном объёме требования кредиторов по денежным обязательствам и (или) исполнить обязанность по уплате обязательных государственных платежей" }, ] }, methods: { getSplicedArray: function(itemLength){ if(this.splicedCardList.length != 0){ return this.splicedCardList; } var itemIndex; for (var i = 0; i<itemLength; i++){ itemIndex = Math.floor(Math.random() * this.cardList.length); this.splicedCardList.push(this.cardList[itemIndex]); this.cardList.splice(itemIndex,1); } return this.splicedCardList; }, mixArray: function(){ var arr1 = [this.cardList.src_chinese]; var arr2 = [this.cardList.src_russian]; var arr3 = new Array(); for(var i in arr1){ var shared = false; for (var j in arr2) if (arr2[j].name == arr1[i].name) { shared = true; break; } if(!shared) arr3.push(arr1[i]) } arr3 = arr3.concat(arr2); },

Where is my mistake? What should I do?

first of all thanks in advance for the feedback. As I am new to es6 and vuejs I'm starting to have problems using imported Services module throughout the application. The end goal would be to move everything that uses Axios to one BaseService too.

[Vue warn]: Error in mounted hook: "TypeError: __WEBPACK_IMPORTED_MODULE_0__services_AuthService__.a.getCurrentUser is not a function"

AuthService.js

import BaseService from './BaseService' export default class AuthService { setCurretUser( user ) { localStorage.setItem("currentUser", user); } getCurrentUser() { return localStorage.getItem("currenUser"); } }

App.vue

import Axios from 'axios' import Navbar from './partials/Navbar' import Sidebar from './partials/Sidebar' import AuthService from '../services/AuthService' export default { name: 'app', components: { Navbar, Sidebar }, mounted() { console.log('Component mounted.') }, created() { Axios.get('api/user') .then(function (response) { AuthService.setCurrentUser(response.data); console.log(response); }) .catch(function (error) { console.log(error); }); } }

HI all I am trying to import my store into my Vuex Route-Gard.

router/auth-guard.js

import {store} from '../store' export default (to, from, next) => { if (store.getters.user) { next() } else { next('/login') } }

store/index.js

import {store} from '../store' export default (to, from, next) => { if (store.getters.user) { next() } else { next('/login') } }

The error I am getting export 'store' was not found in '../store'

my vue set up

"dependencies": { "firebase": "^4.3.0", "vue": "^2.3.3", "vue-router": "^2.6.0", "vuex": "^2.3.1"

I have a pagination component built with Vue 1, for which I am receiving data from Laravel pagination:

<template> <div class="row"> <div class="col-md-8"> <div v-if="zeroVideos">No videos found for "{{ query }}""</div> </div> <div class="col-md-8"> <single-video v-for="video in videos" :video="video"></single-video> </div> </div> <div class="row justify-content-center"> <pages v-if="meta && videos.length && showPagination" for="videos" :pagination="meta.pagination"></pages> </div> </template> <script> import eventHub from '../events.js' export default { props: ['query'], data () { return { videos: [], meta: null, showPagination: false, zeroVideos: false, } }, methods: { getVideos (page) { this.$http.get('/search/videos?q=' + this.query + '&page=' + page).then((response) => { this.videos = response.data.data this.meta = response.data.meta this.showPagination = response.data.meta.pagination.total_pages > 1 console.log('Videos ' + response.data.meta.pagination.total) this.zeroVideos = response.data.meta.pagination.total < 1 eventHub.$emit('videos.counter', response.data.meta.pagination.total) }) } }, ready() { this.getVideos(1) eventHub.$on('videos.switched-page', this.getVideos) } } </script>

For some reason, after I have updated my chrome, pagination stopped working and I am getting undefined for response.data.meta , but on checking the network tab in the console, I am sending the data from the backend:

data[{id: 43, uid: "15883245ef3de1",…}, {id: 44, uid: "15883245ef3de2",…},…] meta:{pagination: {total: 8, count: 8, per_page: 20, current_page: 1, total_pages: 1, links: []}}

The pagination works fine on IE, Firefox and Safari, but on Chrome I have problems after updating. What is wrong?

My project currently is made with VueJS. Now, we need to process a certain template with the input data, then store the result and use it to send an email (for example).

Can i render a template with the user data and save it? how?

I don't want to use another library for this purpose, unless We can't do with VueJS

I have a vue component with the following html structure:

<div v-for="ea in list1"> <competency></competency> </div> <div class="secured-break"> ** Lorem ipsum </div> <div v-for="ea in list2"> <competency></competency> </div>

When I display this html in the browser I would expect a list of items, followed by the ** Lorem ipsum text and then the second list of items. However, when I display this html, I see the ** Lorem ipsum first, then the results of list1 immediately followed by the results of list2. Why are these items displayed out of order?

css .secured-break { border-top: 1px solid #C0C0C0; font: 10px arial; font-style: italic; width: 880px; }

I'm using Element Ui for a tables

Say me please. How i can send template to label?

I'm trying to export my firebase app so I can call it inside of mocha test specs as well as within the source code I'm trying to test.

My Mocha test spec looks like this:

import Vue from 'vue' import Edit from '@/components/Edit' import filedata from '../../../static/filedata.js' import submitFile from '../../../helpers/submitFile.js' import firebaseapp from '../../../src/db.js' var db = firebaseapp.database() var storage = firebaseapp.storage() describe('Edit.vue', () => { it('should let me add files without choosing a category', () => { // add files to appear on the homepage var Constructor = Vue.extend(Edit) var vm = new Constructor().$mount() console.log(filedata + ' is the file data') var ref = storage.ref('categories') console.log(ref) submitFile(filedata) }) ...

And the submitFile file looks like this:

var firebaseapp = require('../src/db.js') console.log('the app is: ' + firebaseapp) var db = firebaseapp.database() var storage = firebaseapp.storage() module.exports = function(files){ // is the function being called from the test environment? if(files){ console.log(files) } else { // function called from src -- files were null var files = this.$refs.upload.uploadFiles; } var storageRef = storage.ref(); var pdfsRef = storageRef.child('files'); // var self = this; console.log('the files length is ' + files.length) files.forEach(function(file){ var file = file['raw']; var name = file['name'] var fileref = storageRef.child(name); var uploadTask = fileref.put(file); uploadTask.then(function(snapshot){ console.log('uploaded'); var url = snapshot.downloadURL; self.gettext(url, name); }); try { uploadTask.on('state_changed', function(snapshot){ // Observe state change events such as progress, pause, and resume // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded self.uploadProgress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100; console.log(self.uploadProgress + ' is the upload progress.'); switch (snapshot.state) { case app.storage.TaskState.PAUSED: // or 'paused' console.log('Upload is paused'); break; case app.storage.TaskState.RUNNING: // or 'running' console.log('Upload is running'); break; } }, function(error) { // Handle unsuccessful uploads }, function() { // Handle successful uploads on complete // For instance, get the download URL: https://firebasestorage.googleapis.com/... var downloadURL = uploadTask.snapshot.downloadURL; }); } catch(e){ console.log(e) } }) }

Lastly, here's what db.js looks like:

var Firebase = require('firebase')//import Firebase from 'firebase' var config = { ... }; var app = Firebase.initializeApp(config) /// USED TO BE CONST APP export default app

What's very strange is that when I run npm run unit, I get an error telling me that const is not recognized.

SyntaxError: Unexpected token 'const' at webpack:///src/db.js~:11:0 <- index.js:38182

So I went through my db.js file and changed const to var, and I'm getting the exact same error*, no matter how I change the file.

Does anyone have any idea what could be going on?

I have this in my vue.js template:

<img src="/media/avatars/{{joke.avatar}}" alt="">

It is inside a loop that renders jokes. Otehr fields are rendered fine, but for the image I get this error in the console:

• src="/media/avatars/{{joke.avatar}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .

I have also use v-bind:src="... but get invalid expression error.

How can I fix this?

P.S.

I have also tried

<img :src="'/media/avatars/' + joke.avatar" alt="">

As suggested here, but that did not solve the problem. So I don't know how my question can be a duplicate of that.

I am trying to pass through a v-for the text and the @click action of each li. For the text I know how to do it...but for the click action?enter code here

Each item of the array menuOptions (which is in the 'data' part of my Vue component) is structured like this : {action,name}

As "action", I mean the call of a peculiar function of my code, which will be different for each item.

<ul> <li v-for="option in menuOptions" @click="option.action">{{option.name}}</li> </ul>

Do you have some ideas? (I guess that's maybe a pure JS question, but maybe there are possibilities to do it Vue too?)

I have been on this error for 3 days, not sure if this is a bug, but I installed vuejs from vuejs/vue-cli

Using the following instructions:

npm install -g vue-cli vue init webpack foo.com cd foo.com npm install npm run dev

So far it works, now I created a directory structure like this inside src/

— src — assets — filters — config — components Profiles.vue Login.vue profiles.js routes.js main.js

So, in routes.js I have something like this.

// routes.js import ProfilesView from './components/Profiles.vue' import LoginView from './components/Login.vue' const routes = [{ path: '/profiles', component: ProfilesView }, { path: '/login', component: LogoutView }] export default routes

So far, I have no issue with above code, the problem comes from these two below files either profiles.js or Profiles.vue

Here is profiles.js

const profiles = Vue.mixin({ data: function () { return { profiles: [] } }, methods: { fetchProfiles: function(){....}, mounted: function(){ this.fetchProfiles() } }) export default profiles

Here is Profiles.vue

<template lang="html"> <div> {{ profiles }}<div> </template> <script> import { profiles } from '../../profiles' export default { mixins: [profiles], data () { return { profiles: [] } }, mounted () {} } </script> <style lang="css"> </style>

With the above code, I get these errors.

profiles.js:1 Uncaught ReferenceError: Vue is not defined at Object.<anonymous> (profiles.js:1) at __webpack_require__ (bootstrap 1995fd0fa58cb1432d6f:659) at fn (bootstrap 1995fd0fa58cb1432d6f:85) at Object.defineProperty.value (app.js:55806) at __webpack_require__ (bootstrap 1995fd0fa58cb1432d6f:659) at fn (bootstrap 1995fd0fa58cb1432d6f:85) at Object.<anonymous> (Profiles.vue:7) at __webpack_require__ (bootstrap 1995fd0fa58cb1432d6f:659) at fn (bootstrap 1995fd0fa58cb1432d6f:85) at Object.__webpack_exports__.a (app.js:56033)

If I add import Vue from 'vue' to profiles.js the above error gets replaced with this one:

Uncaught TypeError: Cannot read property 'components' of undefined at checkComponents (vue.esm.js:1282) at mergeOptions (vue.esm.js:1363) at mergeOptions (vue.esm.js:1379) at Function.Vue.extend (vue.esm.js:4401) at Object.exports.createRecord (index.js:47) at Profiles.vue:26 at Object.<anonymous> (Profiles.vue:30) at __webpack_require__ (bootstrap 625917526b6fc2d04149:659) at fn (bootstrap 625917526b6fc2d04149:85) at Object.__webpack_exports__.a (app.js:56036)

This is complaining about the mixins: [profiles], in profiles.js, I am thinking profiles prop is undefined, but that is not the case. For some reason Profiles.vue is not reading or reading the correct data from profiles.js because I also get this error always:

[HMR] bundle has 1 warnings client.js:161 ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/Profiles.vue 6:11-15 "export 'profiles' was not found in '../../profiles'

It is complaining export default profiles isn't found in profiles.js even though it clearly does. I even tried using require, changing the paths ... everything. Nothing works.

I would appreciate any help with this.

I have a collection of jQuery plugins in the file jquery-plugin-collection.js and I initialise the plugins in the file custom.js. When I reload the page, all the plugins are being initialised. but when I load the page using vue-router, the plugins are not initialised. I made alot of google research with no result. Am wondering if am the first to face this issue. You can comment if you want me to add some codes.