Vuejs

I am using laravel 5.3 and vue 1.0.26 version and it is unable to load components into blade pages. It showing empty. I was just trying with given laravel example component.

If any body have solution please suggest.

my app-laravel.js file

require('./bootstrap'); Vue.component('example', require('./components/Example.vue')); const app = new Vue({ el: 'body' });

my blade page looks like

<div class="col-10 text-muted"> <example></example> </div>

and am using gulp which looks like

elixir(mix => { mix.sass('app.scss', 'public/css/app.min.css') .scripts([ '../../../node_modules/jquery/dist/jquery.min.js', 'libraries/datatables.responsive.js', 'libraries/datatables.responsive.bootstrap4.js', '../../../node_modules/vue/dist/vue.min.js', 'app.js', ], 'public/js/app.min.js'); });

i am building a dynamic table, passing the columns and rows from an input, i need to build the data that is edited inside it with contenteditable atribute.

So after i pass number rows and columns i can edit the cells inside the html table, after that i have a create input, and i need to somehow get the data inside like a matrix for example

like this: dataTable[0][0] = "John"

at the moment i can't get any data :/

I tried to associate a v-model to the current index, like this:

Here i pass my number of rows and columns:

<div class="col-md-2"> <input type="number" min="1" v-model="table.rows" class="form-control" id="rows"> </div> <label for="columns" class="control-label col-md-1">columns:</label> <div class="col-md-2"> <input type="number" min="1" v-model="table.cols" class="form-control" id="cols"> </div>

here i iterate over the number of rows and columns to create the editable

<table class="table table-responsive" style="background-color:lightGray"> <tbody> <tr v-for="(row,idx2) in tableRows"> <td v-model="table.colsArr[idx]" class="table-success" v-for="(col,idx) in tableCols" contenteditable="true">{{idx}}</td> </tr> </tbody> </table>

Finally i have the data structure where i try to create that matrix, i tried with a simple array without success:

d

ata() { return { table: { rows: 1, cols: 1, key: "Table", tableStyle: 1, colsArr:[] }, insert: 1, }

when i create the table i want to show the elements, nothing is inside at the moment :/

alert("HEY:",this.table.colsArr[0]);

I'm trying to implement unlimited scrolling with vue.js and MugenScroll

The code is like this:

<template> <div class="jokes" v-for="joke in jokes"> <strong>{{joke.body}}</strong> <small>{{joke.upvotes}}</small> <div> <mugen-scroll :handler="fetchData" :should-handle="!loading"> loading... </mugen-scroll> <template> ... data () { return { jokes:[], comments: [], id: '', loading: false, page: 0, url: '' } }, methods: { fetchData() { this.loading = true; this.page++; axios.get(this.BASE_URL + '/api/jokes/'+'?page='+this.page).then( response => this.jokes = response.data); //how to scroll to the top of the newly fetched data ? this.loading = false },

The infinite scrolling works but the issue is that after the first page being fetched, the browser then scrolls immediately to the second page, as the DOM remained at the bottom. So I need to move the scroll to the top to avoid new page being rendered by a slight move down. How can I acheive this?

I'm new to javascript development and I have a real project here. Let me describe:

1. There is a project, an Express (Node.js) server that has a /public/app folder
2. There is another project, a Vue.js app that has a /dist folder
3. In the Express /public/app folder is copypasted vue.js application (copied from another project from /dist folder)
4. Vue.js app runs at http://localhost:3000/app/#/

I've added some console.log() commands into a different files/places in a vue.js app code, for example:

app.ts

... import {store} from './store/store'; import {isBoolean} from 'util'; console.log('APP'); let router = new VueRouter({ routes: [ { path: '/', component: WelcomeComponent }, ...

or in component:

... import * as common from '../../../store/common'; import * as country from '../../../store/country'; console.log('COMPONENT'); @Component({ template: require('./template.html'), components: { 'layout': LayoutContent2, ...

and so on. But none of the console.log() messages are displayed in a browser console. Im sure that an app is builded and copied correctly. So why can't I see the messages in console?

My project is done in laravel and vue.js, i have a separate css style sheets and all styles sheets are gulped into a common css style sheet. and it renders on production. Just after the production only some styles are working and most of the styles are not working, I use fileZilla to upload.

and all ccustomizations and configurations perfectly done. I guess something goes wrong in npm production. in local machine all styles are perfectly working.

I found a similar question on stack overflow but nothing worked.

I have 2 inputs, called col and row which i can change and they are related to the columns and rows of a table.

I want to see that table and edit his content, at the moment i have a v-model that updates my data with the row and columns, and need to put that in my v-for for the table so the table should get automaticly updated.

The problem is that the table is not getting updated.

This is what i have:

<div class="col-md-2"> <input type="number" min="1" v-model="table.rows" class="form-control" id="rows"> </div> <label for="columns" class="control-label col-md-1">columns:</label> <div class="col-md-2"> <input type="number" min="1" v-model="table.cols" class="form-control" id="cols"> </div> <table class="table"> <tbody v-for="row in table.rows"> <tr> <td contenteditable="true">John</td> </tr> </tbody> </table> data() { return { table: { rows: 1, cols: 1, key: "Table", tableStyle: 1, }, insert: 1, } }

,

Any help?

Is there any way to have the selected items using vue-mulitiselect in vuejs and Laravel5.4 sorted by value. For example if I choose “node2” first than choose “node1” I want it to auto order/sort them like “node1 node2”.

Thanks

The first few times I make changes the dev server restarts rapidly. After that, there's a good chance it won't restart the first time I save a change.. I often have to insert code that will not compile at all to get it to recompile, then revert that change. It also starts taking longer and longer. It will say "5000ms" but in actuality it might take 20 seconds.

There's got to be something buggy about how webstorm works with a vue cli project's dev server.

When I write npm run dev it starts on http://localhost:8080

Is it possible run on http://testdomain.local/? (without port)

I have a form

HTML:

<form ref="myForm" action="/AAA/BBB" method="get"> <input type="text" hidden="hidden" v-model="myValue" name="myName" /> </form> <button v-on:click="Send">Click me</button>

JS

new Vue({ data: { myValue: 1 }, methods: { Send: function() { this.myValue = 2; this.$refs.myForm.submit(); } } })

When i click the button, it will send the value: 1

I'm sure that the value was modified before form submit

this is my first question here because this is making me crazy. I am fiddling around with firebase and vue.js trying to loop thru my database(key-value) construct.

Below is my exported json:

{ "city" : { "new york" : { "zipcode" : { "10039" : { "street" : { " W 152nd St" : [ "263", "250", "21" ] } }, "02116" : { "street : { " W 155nd St" : [ "3", "25", "21" ] } } } }, "boston" : { "zipcode" : { "02116" : { "street : { "Berkeley St" : [ "161", "65", "13" ] } } } } } }

What else should I tell you? I thought this structure would help me generating a quad-devided depented dropdown like [city [v]] [zipcode [v]] [street [v]] [number [v]].

Thanks in advance for your time and help.

I created a login panel in Vue.js using Bootstrap CSS framework. Also, InputGroup component, because of help on back-end side. The purpose is not to write id="user_id" in Login.vue component, but in InputGroup.vue. It must be dynamic, in this case it does not write manually "user_id", but only takes data from the "field" props. The second problem is how to change the class, when is error on logging, add input class to tag "form-control-danger", but do not add class in "Login.vue" component, but in "InputGroup.vue" component. Thanks for help.

Login.vue

<form class="form-group has-error" @submit.prevent="checkUser"> <input-group field="user_id"> <label class="text-muted" for="user_id">User ID</label> <input class="form-control" type="number" id="user_id" v-model="form.userId" min="1" required> </input-group> <button class="btn btn-info btn-local">login</button> </form> <script> import InputGroup from './input-group/InputGroup.vue' import Form from './Form.js' // Form.js this is a class javascript file which helps in validation e.g. user ID. export default { name: 'LoginLocal', components: { 'input-group': InputGroup }, data() { return { form: new Form({ userId: '' }), }; }, methods: { checkUser() { this.form.post('/api/somewhere/users/' + this.form.userId + '/login') .then(() => this.$router.push('/')) .catch(error => window.handleError(error)) .catch(response => { if (response.status === 404) { return this.form.errors.recordCustom('user_id', 'Invalid User ID'); } }); }, }, }; </script>

InputGroup.vue

<template> <div class="form-group" :class="{ 'has-danger': parent.form.errors.has(field) }"> <slot></slot> <div class="form-control-feedback">{{ $parent.form.errors.get(field) }}</div> </div> </template> <script> export default { props: ['field'], }; </script>

I'm trying to test a Vue application. I have 2 simple page objects, and 2 simple spec files. When i run the e2e test, the first one (login) passes with no problem but the second one fails with this error:

Error: No selector property for element "client" Instead found properties: capabilities,globals,sessionId,options,launchUrl,launch_url,screenshotsPath,Keys,session,sessions,timeouts,timeoutsAsyncScript,timeoutsImplicitWait,elemen t,elementIdElement,elements,elementIdElements,elementActive,elementIdAttribute,elementIdClick,elementIdCssProperty,elementIdDisplayed,elementIdLocationInView,elementIdLocation,elementIdName,elementIdClear,elementIdSelected,elemen tIdEnabled,elementIdEquals,elementIdSize,elementIdText,elementIdValue,submit,source,contexts,currentContext,setContext,getOrientation,setOrientation,moveTo,doubleClick,mouseButtonClick,mouseButtonDown,mouseButtonUp,execute,execut eAsync,execute_async,frame,frameParent,window,windowHandle,windowMaximize,window_handle,windowHandles,window_handles,windowSize,windowPosition,refresh,back,forward,screenshot,url,status,title,keys,cookie,acceptAlert,accept_alert, dismissAlert,setAlertText,getAlertText,dismiss_alert,sessionLog,sessionLogTypes,click,clearValue,getAttribute,getCssProperty,getElementSize,getLocation,getLocationInView,getTagName,getText,getValue,isVisible,moveToElement,setValu e,submitForm,sendKeys,switchWindow,resizeWindow,setWindowPosition,maximizeWindow,saveScreenshot,getTitle,closeWindow,init,urlHash,getCookies,getCookie,setCookie,deleteCookie,deleteCookies,injectScript,getLogTypes,getLog,isLogAvai lable,waitForElementNotPresent,waitForElementNotVisible,waitForElementPresent,waitForElementVisible,end,pause,perform,useCss,useRecursion,useXpath,page,expect,assert,verify,currentTest,parent,name at new Element (C:\aquaprojects\src\bitbucket.org\scalock\tenantmanager\client\node_modules\nightwatch\lib\page-object\element.js:11:11) at C:\aquaprojects\src\bitbucket.org\scalock\tenantmanager\client\node_modules\nightwatch\lib\page-object\page-utils.js:39:35 at Array.forEach (native) at C:\aquaprojects\src\bitbucket.org\scalock\tenantmanager\client\node_modules\nightwatch\lib\page-object\page-utils.js:35:24 at Array.forEach (native) at module.exports.createElements (C:\aquaprojects\src\bitbucket.org\scalock\tenantmanager\client\node_modules\nightwatch\lib\page-object\page-utils.js:34:14) at Object.Page (C:\aquaprojects\src\bitbucket.org\scalock\tenantmanager\client\node_modules\nightwatch\lib\page-object\page.js:19:6) at Object.parent.(anonymous function) [as tenant] (C:\aquaprojects\src\bitbucket.org\scalock\tenantmanager\client\node_modules\nightwatch\lib\core\api.js:469:16) at Object.before (C:/aquaprojects/src/bitbucket.org/scalock/tenantmanager/client/test/e2e/specs/tenants.spec.js:7:26) at Object. (C:\aquaprojects\src\bitbucket.org\scalock\tenantmanager\client\node_modules\nightwatch\lib\util\utils.js:35:8)

login.js:

module.exports = { url: 'http://localhost:8080/#/login', elements: { app: '#app', loginSection: '.login-page', title: 'h3', submitButton: '.btn-primary', username: '#username', password: '#password' } }

login.spec.js:

let login = null module.exports = { before: function (client) { console.log('*********** Init login page *******************') login = client.page.login() }, 'open login page': function () { login .navigate() .waitForElementVisible('@app', 5000) .assert.elementPresent('@loginSection') .assert.containsText('@title', 'Tenant Manager Login') }, 'try to login': function () { login.setValue('@username', 'administrator') login.setValue('@password', '1234') login.click('@submitButton') login.waitForElementNotPresent('@submitButton') }, after: function (client) { client.end() } }

This one passes, the other one, which is basically copy/paste, with a few changes, fails on this line:

tenant = client.page.tenant()

tenant.js:

module.exports = { url: 'http://localhost:8080/#/tenants', elements: { tab: '#tenants', tenantsFilter: '.tenants-filter input', statusFilter: '.status-filter input', add: '.add-tenant' } }

tenants.spec.js:

let tenant = null module.exports = { before: function (client) { console.log('*********** Init tenant page *******************') tenant = client.page.tenant() }, 'open tenant page': function () { console.log('*********** Navigating to tenant page *******************') tenant .navigate() .waitForElementVisible('@tab', 5000) .assert.elementPresent('@tenantsFilter') // .assert.containsText('@title', 'Tenant Manager Login') }, after: function (client) { client.end() } }

For example, I'm using vue-charts.js and imported it into my root component:

import VueChartjs from 'vue-chartjs'; Vue.component('bar-chart', { extends: VueChartjs.HorizontalBar, ... })

Now VueChartjs is a wrapper for Charts.js so the component comes with its own template. I'd like to be able to edit that template within VueChartjs.HorizontalBar or the component bar-chartthat I mounted it onto.

Is there anyway to do this within this root component?

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.

This is not a duplicated question because I cannot find on SO a situation as simple as mine.

I'm manually trying to recreate an accordion

My html:

@foreach($device_menu_data['top_brands'] as $top_brand) <div class="brand_name" v-on:click="setVisibleBrand('{{$top_brand->brand}}')" > {{ $top_brand->brand }} <i class="fa fa-arrow-down device-list-toggler"></i></span> </div> <div class="brand_devices" v-if="visibleBrand === '{{$top_brand->brand}}'"> ....content of the duv </div> @endforeach

My js:

const open_device_menu_app = new Vue({ el: '#layout_header_container', data: { visibleBrand: 'none', }, methods: { setVisibleBrand: function(brand_name) { this.visibleBrand = brand_name; console.log(this.visibleBrand); } } });

When I click on brand name, the console logs the right name. I was expecting that the specific brand_device will be shown after a click on the brand_name. But this doesn't happen. Both using v-if and v-show do not change.

Why?

Does anyone know good libraries for timelines? I tried vis.js, but couldn't figure out how to include it to my vue component. (btw, I'm using webpack)

I'm using vue js in my ckeditor to change content when clicking the language in my input select

The v-model of my select is "language", and the v-model of my ckeditor textarea is "templateContent"

<template> <div id="edit_template"> <div class="form-group"> <label class="col-md-2 control-label">Language :</label> <div class="col-md-4"> <select class="form-control" name="language" id="language" v-model="language"> <option v-for="language in languages" v-text="language" :value="language"></option> </select> </div> </div> <div class="clearfix"></div> <div class="form-group"> <label class="col-md-2 control-label">Content :</label> <div class="col-md-offset-2 col-md-10"> <div class="bootstrap-admin-panel-content"> <textarea id="ckeditor_full" name="cancellationContent" v-model="templateContent"> </textarea> </div> </div> </div> </div> </template>

This is my vue-js code.

export default { props: ['emailTemplate'], name: 'edit_template', data () { return { languages: ['English','Dutch','French','German','Italian','Russian','Spanish','Swedish'], language: 'English', templateContent: '', }; }, mounted(){ this.templateContent = this.emailTemplate.english_content }, watch: { language(value) { this.$nextTick( () => { if(this.language =='English'){ this.templateContent = this.emailTemplate.english_content } else if(this.language =='Dutch'){ this.templateContent = this.emailTemplate.dutch_content } else if(this.language =='French'){ this.templateContent = this.emailTemplate.french_content } else if(this.language =='German'){ this.templateContent = this.emailTemplate.german_content } else if(this.language =='Italian'){ this.templateContent = this.emailTemplate.italian_content } else if(this.language =='Russian'){ this.templateContent = this.emailTemplate.russian_content } else if(this.language =='Spanish'){ this.templateContent = this.emailTemplate.spanish_content } else if(this.language =='Swedish'){ this.templateContent = this.emailTemplate.swedish_content } else{ this.templateContent = ''; } if(this.templateContent == null){ this.templateContent = ''; } }) } } }; </script>

the model "templateContent" is changing value but the textarea of my ckeditor not change. I dont know if the ckeditor is compatible in vue.

I have problem with refreshing data afer done axios method. I have statuses to change. When someone change status I want to have only status name without buttons, but when I do this, order is not refreshing, It works only when I go somewere else and go back to this site, then actual order is load, button is gone and everything works. How to do, that when someone change styatus, then new order i load and button is gone at the same time?

Here is my code:

<div v-if="(order.order_products[key].statuses[0].id) == 4 && orderLastStatus != 3"> <div> <button v-on:click="changeProductStatus(order_product.id, status.id)" v-for="status in availableStatuses" v-bind:value="status.id" >{{status.name}} </button> </div> </div> <div v-else> {{order.order_products[key].statuses[0].name}} </div>

And Vue:

changeProductStatus: function (orderProductId, statusId) { var self = this; if (confirm("Are you sure You want to change status?")) { axios.post("/order/" + orderProductId + "/changeStatus", {"status_id": statusId}) .then(function (response) { self.selected[orderProductId] = statusId; console.log(self.selected); }) } }

Hey i am trying to pass two parameters in my url for a simple spa and the params values will be extracted from the url using an api and passed to the server here is the url:

http://localhost:8080/#/game/username/token

but when i am hitting the url its passing this in the network:

Request URL:http://localhost:8080/api/game/usernametoken

and hence it is not hitting the right api