Software

I would like to make a login page with vue-material. I got the form base from here. There is a laravel 5.4 on the server side.

The html part:

<div id="app"> <md-layout md-tag="form" novalidate @submit.stop.prevent="submit" md-align="center"> <md-layout md-tag="md-card" md-column md-flex="30" md-flex-medium="40" md-flex-small="60" md-flex-xsmall="90" class="md-primary"> <md-card-header> <div class="md-title">Login</div> </md-card-header> <md-card-content> <md-input-container> <md-icon>person</md-icon> <label>Email</label> <md-input email required v-model="email" /> </md-input-container> <md-input-container md-has-password> <md-icon>lock</md-icon> <label>Password</label> <md-input type="password" required v-model="password" /> </md-input-container> </md-card-content> <md-card-actions> <md-button type="submit">Login</md-button> </md-card-actions> </md-layout> </md-layout> </div>

My questions;

1. How can I set that form use POST and not GET?

2. How can I set that input fields values should be send?

Thanks for the answers in advance!

I want to use vue.js as frontend for sails.js and run both client vue.js and server sails.js seperately so that i can get maximum functionality,can someone explain how can i configure to make communication happen between both without any additional package.

I have 3 input fields (firstname, midname, lastname) that I have created using v-for for each client. Every time client name changes, I want to generate an updated version of the name in an object as a string.

<input :data-index="index" data-field="first-name" @keyup="nameUpdated"> <input :data-index="index" data-field="middle-name" @keyup="nameUpdated"> <input :data-index="index" data-field="last-name" @keyup="nameUpdated">

This is the method I though of, where index is the client count. But then I thought that is not the right way to achieve it. How I thought about it was on nameUpdated function, store client firstname, midname and lastname as an object and then reorganize it like:

client[1][first-name]' + ' ' + client[1][middle-name]' + ' ' + client[1][last-name]'

What is the right way of achieving a task like this?

I am getting this error in Vue v2.4.1. I am not understanding what does that mean actually. My code looks like this and the warning I am getting is [Vue warn]: component option "computed" should be an object.

export default { data() { return { bookings: [], games: [], slots: [], startTime: { time: moment().format("YYYY-MM-DD") } }; }, components: { 'date-picker': myDatepicker, 'reserved' : Reserved }, ready() { this.prepareComponent(); }, mounted() { this.prepareComponent(); }, methods: { prepareComponent() { this.getGames(); this.getSlots(); this.getBookings(this.startTime.time); }, onDateChange(){ }, formatSlot(slot){ }, getGames(){ } }, getSlots() { }, getBookings(date){ }, isReserved(gameId,slotId){ }, getReservedBooking(gameId,slotId){ }, isPastTime(time, date){ }, getUrl(date,slot_id,game_id){ } } }

I'm using Tabs from Bulma and I learnt how to use the Tabs from Laracast. However, I have a problem which is, I'm able to route correctly as shown in the URL but the tab 'isActive', is not displaying correctly.

Here is the example:

index.js (Routing)

{ path: '/user', name: 'User', component: User, children: [{ path: 'Staff', name: 'Staff', component: Staff }, { path: 'ResidentDeveloper', name: 'ResidentDeveloper', component: ResidentDeveloper } ] }

User.vue (only picking out what I think is important)

<tabs> <!--Staff Tab--> <tab name="Staff" :selected="true"> <router-view></router-view> </tab> <!--Resident Developer Tab--> <tab name="Resident Developer"> <router-view></router-view> </tab> </tabs> ... computed: { href () { return '' + this.name.toLowerCase().replace(/\s+/g, '') } }

Tabs.vue (only picking out what I think is important)

... <div class="tabs"> <ul> <li v-for="tab in tabs" :key="tab.name" :class=" { 'is-active': tab.isActive }"> <a :href="tab.href" @click="selectTab(tab)">{{ tab.name }}</a> </li> </ul> </div> ...

Tab.vue (only picking out what I think is important)

... computed: { href () { return '' + this.name.toLowerCase().replace(/\s+/g, '') } } ...

Appreciate your help! Thank you!

I've the following on the mounted hook in my vue app.

let vm = this; $("button[name='daterange']") .daterangepicker({ ranges: vm.presets, opens: 'left', format: 'YYYY-MM-DD', startDate: startDateValue, endDate: endDateValue }, function(start, end, label) { // cb for when dates are picked let filter = vm.$options.filters.date; vm.range = { start: start, end: end }; console.log(vm.range); vm.$root.$emit('date.change', vm.range); });

and the data is as follows:

data: function() { return { currentRange: 'Last 7 Days', presets: {}, range: {}, } },

For some reason, the watcher for range is not getting executed and I can't see the updated value in vue-dev-tool as well. But when I console log the value of range, it has the right data. This is the reason why I put the emit right below it. Can anyone help me find why the reactivity is not working here?

I have this script where it manually adds an error message in a specific field after I post a form via api

this.errors.add('registration-form.shipping_vmoney_email_address',response.data.message);

This is my HTML:

<input autocomplete="new-email" nofill v-model="shipping_vmoney_email_address" name="shipping_vmoney_email_address" v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('registration-form.shipping_vmoney_email_address')}" type="text"> <span v-show="errors.has('registration-form.shipping_vmoney_email_address')" class="help is-danger has-text-left">{{ errors.first('registration-form.shipping_vmoney_email_address') }}</span>

My problem here is the error that I added via this.errors.add, when I type in the email address field the error doesn't remove, is there a way to remove the error of the email address field while i am typing?

I have an element

<tbody ref="tbody"> <tr class="row" :ref="userIndex" v-for="(userData, uid, userIndex) in users" :key="uid">

in my template. I need to access/edit the DOM property like scrollTop, verticalOffset of <tr> element. How can I achieve this?

I have tried to access using this.$refs[userIndex][0].$el but its not working. I can see all the properties in the console but I am unable to access them. However this.$refs.tbody.scrollTop works. Below is the snap showing console.log(this.$refs)

I'm learning Vue JS and love it so far. I've got one issue I'm finding difficult to get any ideas on. Is it possible to dynamically 'inject' the moustache brackets (can't find the actual name for these i.e. {{ fooBar }}) into a HTML element? Specific example...

<!-- {{ tweet }} TO BE INJECTED BELOW --> <textarea cols="60" rows="4"></textarea>

I want to inject {{ tweet }} into a textarea element. This is because in my real-world example I can't access and modify the textarea HTML itself. I've tried using jQuery .val() to inject {{ tweet }}, which it does but as plain text. This CodePen will help explain the situation.

If this simply can't be done, are there any alternatives I could look at to dynamically bind the inaccessible textarea?

I am using chart.js in a vue application i have four charts declared each for each type of chart. Heres an example of one :

startDoughnut: function (canvas, type) { // init chart.js var ctx = document.getElementById("myDoughnut"); var myDoughnut = this.doughnutChart = new Chart(ctx, { type: 'doughnut', data: { labels: [ 'F0911', 'F0901', 'F0902', 'F0903', 'F0982' ], datasets: [{ data: [300, 50, 100, 60, 25], backgroundColor: [ 'rgba(255, 99, 132, 0.6)', 'rgba(54, 162, 235, 0.6)', 'rgba(255, 206, 86, 0.6)', 'rgba(75, 192, 192, 0.6)', 'rgba(153, 102, 255, 0.6)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 2, hoverBackgroundColor: [ '#FF6384', '#36A2EB', '#FFCE56', '#000066', '#660066' ] }] }, options: { responsive: true, defaultFontColor: '#ffffff', } }) }

I am then using jquery to change between separate divs that hold the canvases and destroy the chart based on a variable I pass in to destroy the chart based on which one is showing then start the next chart and switch the canvas. There is a few bugs like it only works certain times when i click it i am just wondering if there an easy way to do it. Here is one of the jquery functions i have to load a new chart.

$("#buttonPolar").click(function () { if (self.chartType == "doughnut") { $("#doughnut").fadeOut(400); self.doughnutChart.destroy(); } else if (self.chartType == "line") { $("#line").fadeOut(400); self.lineChart.destroy(); } else { $("#bar").fadeOut(400); self.barChart.destroy(); } self.startPolar(self.$refs.canvas, 'polar'); self.chartType="polar"; console.log(self.polarChart); console.log(self.chartType); $("#polar").fadeIn(400); });

Any help would be appreciated.

When i call a vuejs function from jquery selector it is not firing. I have integrate d3-dagre chart in vue component. when i set a click action for the nodes it is not firing the vuejs methods. In the below getJobid() is not firing. Find the below vue component code and also error in the end.

Vue component:

export default { name: 'dagView', created () { console.log('test2') }, mounted () { var g = new dagreD3.graphlib.Graph().setGraph({}) // Create the renderer var render = new dagreD3.render() // Set up an SVG group so that we can translate the final graph. var svg = d3.select("svg"), inner = svg.append("g") // Run the renderer. This is what draws the final graph. render(inner, g) inner.selectAll("g.node") .on("click", function(v) { console.log("Nodes --> "+ v + " -- "+ g.node(v).label) this.nodeId = g.node(v).label console.log("Node id -- "+ this.nodeId) this.getJobid() }) }, methods: { getJobid: function() { console.log('Received NodeId') } } }

Error:

Uncaught TypeError: this.getJobid is not a function at SVGGElement.eval (DAG.vue?2ccc:180) at SVGGElement.__onclick (d3.v3.min.js:1)

If you've created a VueJS instance like this...

var app = new Vue({ el: '#app', components: {...} })

Is it possible to add components to this instance it's instantiated?

The reason I ask is that we have a multi-page app which stares a template. We want the instantiation of the Vue app to be in the shared template code but we want each page to use different components so for example the code on the contact page would be split between two files...

Master.js Contact.js

The contact.js file would need to tell the main app that it wanted to use the conract-form component, but that component is not used on other pages so we don't want to add it to the initial app declaration in the master.js

Any help would really be appreciated.

I have this div :

[ ... ] <div class="item parent-track" v-on:click="expandTrack(jsonObject.tracks.indexOf(track));setGrey();"> [ ... ] </div> [ ... ]

The method expandTrack creates dynamically new items inside the div and I want to launch the method setGrey (which applies to all the template) after the end of rendering.

It seems that this is not what's happening. expandTrack launches but setGrey is not applying to the items which has been created.

I am experiencing a weird behavior using Vue.js 2.

I have a component that I reference twice in a single html page. This component contains an input file control called attachment_file. I hide it using the Bootstrap class hidden and I open the file selection using another button. When a file is selected, I put in a variable called attachment_filename a certain string just like so:

<template> <div> <button @click="selectAttachement"><span class='glyphicon glyphicon-upload'></span></button> <input id="attachment_file" type="file" class="hidden" @change="attachmentSelected"> {{attachment_filename}} </div> </template> <script> export default { data () { return: { attachment_filename: null, } }, methods: { selectAttachement () { $('#attachment_file').click(); }, attachmentSelected () { this.attachment_filename = 'some file here'; }, } } </script>

Problem With the class hidden and when a file is selected from the 2nd instance of the component, the value of this.attachment_filename is updated but in the data of 1st instance of the component!

If I remove the class hidden, it updates the value in the correct instance.

Possible solution use css opacity or width instead of the class hidden.

But is there a reason for this behavior?

I need to make this request but in axios

$.ajax({ type: "POST", url: url, data: {'HTTP_CONTENT_LANGUAGE': 'en'}, xhrFields: { withCredentials: true },

I tried

params = { data: { 'HTTP_CONTENT_LANGUAGE': 'en', }, withCredentials: true }; axios.post(url, params)

But didn't work what do I do?

I want some help in getting data form json array file is in the link

Html <div> <div v-for="data in myJson.id " >{{ data }}</div> </div> js import json from '.././json/data.json' export default { components: { MainLayout, }, data: function(){ return { myJson:json } }, method:{ getjson:function(){ this.json = JSON.parse(myJson); } } }

i want to access only the data with some specific id and i cannot access it using the syntax i am using Json file

I have a few dropdowns created with razor html helpers:

@Html.DropDownList("formtype-filter", Model.FormTypes, "Any Type...", new { @class = "form-control" })

I want to add a 'change' event handler to this input using VueJS

Normally I would try to add something along the lines of v-on:change="foo()"

However when I try to add this to my razor input, I receive errors because the razor template doesn't support colons as far as I'm aware

@Html.DropDownList("formtype-filter", Model.FormTypes, "Any Type...", new { @class = "form-control", @v_on:change="foo()" }) //^- Not allowed

How can I bind a Vue.js action/event to this input? Is it possible?

I am trying to use a component within my main .ts file using the components option from vue. However, when I use the components option, I get the following error on build:

(42,20): error TS2345: Argument of type '{ components: { SignOff: "string" | "number" | "boolean" | "symbol" | "undefined" | "object" | "f...' is not assignable to parameter of type 'ComponentOptions'. Types of property 'components' are incompatible.

I am able to resolve the error by using render: h => h(EvaluationMain) instead of the components option, but this doesn't help me too much because in my EvaluationMain I also need to import several components and can't use the render function as far as I am aware.

How can I resolve this error?

Evaluation.html <!DOCTYPE html> <html> <head> <title>Evaluations</title> <link href="../../Content/bootstrap.min.css" rel="stylesheet" /> <link href="./Evaluations.css" rel="stylesheet" /> </head> <body> <div v-cloak id="evaluations-app"> <evaluation></evaluation> </div> <label hidden>Icons by http://www.flaticon.com/authors/those-icons from www.flaticon.com</label> <script src="../../Scripts/jquery3.1.1.min.js"></script> <script src="../../Scripts/polyfill.min.js"></script> <script src="../../Scripts/vue.min.js"></script> <script src="../../Scripts/bootstrap.min.js"></script> <script src="../../Scripts/require.js" data-main="./Evaluations.bundle"></script> <script src="../WebAPI/WebAPI.bundle.js"></script> </body> </html> Evaluations.ts "use strict"; import Vue from 'vue'; import EvaluationMain from './components/EvaluationMain.vue'; new Vue({ el: "#evaluations-app", components: { 'evaluation' : EvaluationMain } //render: h => h(EvaluationMain) }); EvaluationMain.vue <template> <div> <competency></competency> <sign-off></sign-off> </div> </template> <script lang="ts"> import Vue from 'vue'; import * as vts from 'vue-typescript-component'; import SignOff from './SignOff.vue'; import Competency from './Competency.vue'; import bus from './EventBus'; @vts.component({components: {SignOff, Competency}}) export default class EvaluationMain extends Vue{ evaluation = new Evaluation(); initialize = async function () { // intialization details }; get perspective () { // get security perspective }; mounted = async function () { // Stuff to do when mounted }; } </script> <style scoped> </style> tsconfig { "compilerOptions": { // "allowJs": true, "allowSyntheticDefaultImports": true, "experimentalDecorators": true, "lib": [ "es2015", "dom", "es2015.promise" ], // "strict": true, "module": "es2015", "moduleResolution": "node", "noEmitOnError": true, "noImplicitAny": false, //"outDir": "./build/", "removeComments": false, "sourceMap": true, "target": "es5" }, "exclude": [ "./node_modules", "wwwroot", "./Model" ], "include": [ "./CCSEQ", "./WebResources", "./sfc.d.ts" ] } webpack.config const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = { entry: { Evaluations: './WebResources/Evaluations/Evaluations.ts', ExpenseUpload: './WebResources/ExpenseUpload/ExpenseUpload.ts' }, devServer: { contentBase: './dist' }, module: { rules: [{ test: /\.ts$/, loader: 'ts-loader', exclude: /node_modules|vue\/src/, options: { appendTsSuffixTo: [/\.vue$/] } }, { test: /\.vue$/, loader: 'vue-loader', options: { esModule: true } }, { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.(png|svg|jpg|gif)$/, use: [ 'file-loader' ] }, ] }, resolve: { extensions: [".ts", ".js"], alias: { 'vue$': 'vue/dist/vue.esm.js' } }, plugins: [ new CleanWebpackPlugin(['dist']) , new CopyWebpackPlugin([ { from: './Scripts', to: './Scripts' }, { from: './WebResources/Evaluations/*.css' }, { from: './WebResources/Evaluations/*.html' }, { from: './WebResources/ExpenseUpload/*.css' }, { from: './WebResources/ExpenseUpload/*.html' }, { from: './Content', to: './Content' } ]) , new webpack.optimize.CommonsChunkPlugin({ name: 'WebAPI' }) ], output: { filename: './WebResources/[name]/[name].bundle.js', path: path.resolve(__dirname, 'dist') } }

I cannot seem to get my app to load css files properly and I thought it might have to do with the fact that my app seems to be using webpack, but there is no webpack.config.js file in the root.

I have webpack.base.conf.js and webpack.dev.conf.js and webpack.prod.conf.js but they are all in the ./build folder.

Is this wrong?

i HAVE jquery request

$.ajax({ type: "GET", url: "http://6232423.212342343.100.89:9000/api/v2/content/categories/", xhrFields: { withCredentials: true }, });

how do I make the same but in axios? I tried like this:

axios.get(portal.categoriesUrl, {xhrFields: { withCredentials: true }} )

but didn't work