Software

I've run into a problem when I delete a component any component created after it deleted and then recreated. Component in question gets deleted and child component created after it get deleted and then recreated.

Is there a reason why this is happening?

here is a video of it: maxniko.tinytake.com/sf/MTg3NTc2M182MDIyMzI5

Here is fiddle: jsfiddle.net/xk5yL3h8

fiddle code:

Vue.component('column-component', { props: ["columnData", "uniqueId"], mounted: function() { console.log('mounting column: ' + this.uniqueId) }, beforeDestroy: function() { console.log('removing: ' + this.uniqueId) }, template: ` <div style="float: left; padding: 10px; margin-right: 10px; border: 1px solid black;">aaa</div>` }) Vue.component('row-component', { props: ["rowData", "uniqueId"], data: function data() { return { columns: [], columnCount: 0 } }, mounted: function() { console.log('mounting row: ' + this.uniqueId) }, methods: { addColumn() { console.log var column = new Object() column.uniqueId = this.uniqueId +'.col.'+ this.columnCount this.columns.push(column) this.columnCount = this.columnCount + 1 } }, beforeDestroy: function() { console.log('removing: ' + this.uniqueId) }, template: ` <div> <div style="margin: 10px; padding: 20px; background: rgba(0,0,0, 0.5);"> row component: {{rowData.text}} <div class="column" v-for="(column, index) in columns"> <column-component column-data="abc" :uniqueId="column.uniqueId"></column-component> </div> <div style="clear: both;"></div> <div style="margin-top: 35px;"> <button @click="addColumn()">add column</button> </div> </div> </div>` }) new Vue({ el: '#app', template: ` <div> <div v-for="(row, index) in rows"> <row-component :uniqueId="row.uniqueId" :row-data="row" :key="row.uniqueId"></row-component> <button @click="deleteThisRow(index)">remove row</button> </div> <button @click="addRow()">add</button> </div> `, data: { rows: [], rowCount: 0 }, mounted: function() { this.addRow() this.addRow() this.addRow() }, methods: { addRow() { var row = new Object() row.uniqueId = 'row-' + this.rowCount row.text = 'row-'+(this.rows.length) this.rows.push(row) this.rowCount = this.rowCount + 1 }, deleteThisRow: function(index) { this.rows.splice(index, 1) console.log(this.rows) } } })

Is it possible to do the following?

export default { props: ['parentArray'], data () { return { computedArray: null } }, computed: { computedResult: function () { var flags = [] var output = [] var l = this.parentArray.length var i for (i = 0; i < l; i++) { if (flags[this.parentArray[i].myitem]) continue flags[this.parentArray[i].myitem] = true var firstfilter = this.parentArray[i].myitem.replace('something', '') output.push(firstfilter) } return output } }, mounted () { this.computedArray = this.computedResult }

When I try, the structure of my array makes it to the data element, but none of the data (at least not in the vue dev-tools. The computed array properly shows up in computed)

The title is just a simple intro to what the real problem is, basicly i have a dashboard with a lot of elements (example: table, paragraph, heading) this elements are respective to a construction of a docx document.

Everytime i click one of these elements i open a new modal, where i can change some parameters in order to create the element, for example with paragraph i can change his alignment, color and text.

When i click to add this element it is added to a section in my page as a block and i should be able to change the properties of each block by clicking above the block.

I want to open a new modal(something like the modal when i open in the dashboard, with the difference instead of adding, to edit).

My problem is that i don't know what is the best way to do this without having messy spaghety code.

At the moment i am building it this way:

i have the dashboard component that is like this:

<template> <div class="navbar navbar-custom navbar-fixed-left navSize"> <form class="navbar-form margin-above" role="search"> <div class="input-group add-on"> <input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text"> </div> </form> <h4 class="text-center">Doc Sections</h4> <div @click="changeView('appTable')" class="card card-color"> <div class="card-block"> <h4 class="card-title text-center">Table</h4> </div> </div> <div @click="changeView('appParagraph')" class="card card-color"> <div class="card-block"> <h4 class="card-title text-center">Paragraph</h4> </div> </div> <div @click="changeView('appImage')" class="card card-color"> <div class="card-block"> <h4 class="card-title text-center">Image</h4> </div> </div> <div @click="changeView('appBulletList')" class="card card-color"> <div class="card-block"> <h4 class="card-title text-center">Bullet List</h4> </div> </div> <div @click="changeView('appHeading')" class="card card-color"> <div class="card-block"> <h4 class="card-title text-center">Heading</h4> </div> </div> <div @click="changeView('appBreak')" class="card card-color"> <div class="card-block"> <h4 class="card-title text-center">Break</h4> </div> </div> </div> </template> <script> export default { data() { return { text: "", fontSize: 14, key: "Paragraph", paragraph: {}, } }, 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 (view) { this.$store.commit("changeCurrentView", view); this.show(); }, show() { this.$modal.show('modalSection'); }, hide() { this.$modal.hide('modalSection'); }, hey() { console.log("HEY"); } }, } </script>

the change view sends to vuex the new component that should render the modal, i have this at vuex store:

currentView: 'appTable', changeCurrentView: (state, view) => { state.currentView = view; },

in my create file template is the place where i render the component that i click, like this:

<modal name="modalSection"> <component :is="getView"> </component> </modal> computed:{ getView(){ return this.$store.getters.getCurrentView; } },

again, i access vuex for the currentView clicked and change the component rendered. In this page i also load the components to be displayed but i think the important part about how it works is already showed, each component has its own properties inside, for example Table is 1 component with his properties inside it, like(number of rows, columns).

Do i need to pass all this properties from all my components to vuex? so i can edit them in other component. Or is there a better way?

Thank you guys

i am building spa using vuejs as the frontend and laravel as the backend, and i purcased some admin bootstrap template named limitless (very cool admin template by the way).

But there is the problem with this template that in the main javascript file (app.js in admin directory) there is this line

// Calculate min height function containerHeight() { var availableHeight = $(window).height() - $('.page-container').offset().top - $('.navbar-fixed-bottom').outerHeight(); $('.page-container').attr('style', 'min-height:' + availableHeight + 'px'); } // Initialize containerHeight();

and because i am using spa vuejs so i only include all js file in my admin.blade.php file like this

<!DOCTYPE Html> <Html lang="{{ config('app.locale') }}"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'> <meta name="description" content=""> <meta name="author" content=""> <script> window.Laravel = <?php echo json_encode([ 'csrfToken' => csrf_token(), ]); ?> </script> <title>SIMO</title> <meta name="csrf-token" content="{{ csrf_token() }}" /> <!-- icon--> <link rel="icon" href="{{asset('images/logo.png')}}" sizes="16x16"> <link rel="icon" href="{{asset('images/logo.png')}}" sizes="32x32"> <link rel="apple-touch-icon" href="{{asset('images/logo.png')}}"/> <link rel="apple-touch-icon" href="{{asset('images/logo.png')}}" sizes="76x76" /> <link rel="apple-touch-icon" href="{{asset('images/logo.png')}}" sizes="120x120" /> <link rel="apple-touch-icon" href="{{asset('images/logo.png')}}" sizes="152x152" /> <link rel="apple-touch-icon" href="{{asset('images/logo.png')}}" sizes="180x180" /> <!-- Bootstrap Core CSS --> <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css"> <link rel="stylesheet" type="text/css" href="{{asset('css/admin/icons/icomoon/styles.css')}}" > {{-- <link rel="stylesheet" type="text/css" href="{{asset('css/admin/icons/fontawesome/styles.min.css')}}" > --}} <link rel="stylesheet" type="text/css" href="{{asset('css/admin/bootstrap.css')}}" > <link rel="stylesheet" type="text/css" href="{{asset('css/admin/core.css')}}" > <link rel="stylesheet" type="text/css" href="{{asset('css/admin/components.css')}}" > <link rel="stylesheet" type="text/css" href="{{asset('css/admin/colors.css')}}" > @yield('css') <!-- Html5 Shim and Respond.js IE8 support of Html5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/Html5shiv/3.7.0/Html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div id="app"></div> <script type="text/javascript" src="{{ URL::asset('js/app.js') }}"></script> <script type="text/javascript" src="{{ URL::asset('js/admin/plugins/loaders/pace.min.js') }}"></script> <script type="text/javascript" src="{{ URL::asset('js/admin/libraries/jquery.min.js') }}"></script> <script type="text/javascript" src="{{ URL::asset('js/admin/libraries/bootstrap.min.js') }}"></script> <script type="text/javascript" src="{{ URL::asset('js/admin/plugins/loaders/blockui.min.js') }}"></script> <script type="text/javascript" src="{{ URL::asset('js/admin/plugins/ui/nicescroll.min.js') }}"></script> <script type="text/javascript" src="{{ URL::asset('js/admin/plugins/ui/drilldown.js') }}"></script> <script type="text/javascript" src="{{ URL::asset('js/admin/plugins/buttons/hover_dropdown.min.js') }}"></script> <script type="text/javascript" src="{{ URL::asset('js/admin/plugins/forms/selects/bootstrap_select.min.js') }}"></script> <script type="text/javascript" src="{{ URL::asset('js/admin/plugins/ui/ripple.min.js') }}"></script> <script type="text/javascript" src="{{ URL::asset('js/admin/app.js') }}"></script> </body> </Html>

and after inspecting the code i found out that it need div with class page-container and this div is located after header part so in my index.vue page i put it like this

<template> <div> <div class="page-header"> //here is header </div> <div class="page-container"> //content </div> </div> </template>

so it will throw

Uncaught TypeError: Cannot read property 'top' of undefined

because when the page loaded it don't find any div with page-container class, since it not there yet.

And from what i read in vuejs documentation about lifecycle, this entire admin/app.js code should be run in mounted() or created() vuejs function. But from the example in documentation and around the internet it just used for run some javascript function but not include entire javascript file so it will be executed in there....

so my question is how to solve this? or for more simple way, how to add external css file and javascript file in component(this index.vue is called component right?) some people tell me to make it module and import it but i have no idea how to do that....

from what i know is i can download javascript plugin like moment from npm and it magically can be called within vue with import moment from moment but how about the local javascript files?

I am using d3-dagre to render the data. Initially i can render the data without any problem. When i try to update the same view in watch mode, it is updating the data but still some error is thrown in the console for "g" attribute transformation. Whenever i try to rewrite the SVG elements i am removing the "g" element inside the "svg" tag. I am trying this in vuejs2 ui library.

watch: { workflowDetails: function (changes) { console.log('Update component ==> ' + changes) this.workflowName = changes.label this.workflowDetails = changes this.metricGraph = false this.drawDAGView() } }, mounted () { this.drawDAGView() }, methods: { getJobid: function (nodeId) { console.log('Function to get graph api' + nodeId) this.metricGraph = true }, drawDAGView: function (isUpdate) { /* eslint-disable */ d3.selectAll('svg > g').remove() // Create a new directed graph var g = new dagreD3.graphlib.Graph().setGraph({}) var DagNodes = this.workflowDetails.nodes var fillColor // Add states to the graph, set labels, and style Object.keys(DagNodes).forEach(function(key) { console.log("Nodes - "+ DagNodes[key].name) var value = DagNodes[key] value.label = DagNodes[key].name + " (" + DagNodes[key].exec_time + ")" value.rx = value.ry = 5 g.setNode(DagNodes[key].name, value) }) var DagEdges = this.workflowDetails.edges; // Add states to the graph, set labels, and style Object.keys(DagEdges).forEach(function(key) { g.setEdge(DagEdges[key].startEdge, DagEdges[key].endEdge, { label: ""} ) }) // 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") // Set up zoom support var zoom = d3.behavior.zoom().on("zoom", function() { inner.attr("transform", "translate(" + d3.event.translate + ")" + "scale(" + d3.event.scale + ")") }) svg.call(zoom) // Simple function to style the tooltip for the given node. var styleTooltip = function(name, description) { return "<p class='name'>" + name + "</p><p class='description'>" + description + "</p>" } // Run the renderer. This is what draws the final graph. render(inner, g) inner.selectAll("g.node") .attr("title", function(v) { return styleTooltip(v, "Execution Time: "+g.node(v).label + " <br /> Description: "+g.node(v).label) }) //.each(function(v) { $(this).tipsy({ gravity: "w", opacity: 1, html: true }) }) var self = this inner.selectAll("g.node") .on("click", function(v) { console.log("Nodes --> "+ v + " -- "+ g.node(v).node_id) // whatever //window.location = "../dag/"+g.node(v).job_id self.nodeId = g.node(v).node_id console.log("Node id -- "+ self.nodeId) self.getJobid(self.nodeId) }) // Center the graph var initialScale = 1.2 zoom .translate([(svg.attr("width") - g.graph().width * initialScale) / 50, 20]) .scale(initialScale) .event(svg) svg.attr('height', g.graph().height * initialScale + 40) svg.attr('width', "100%") }

Error - Due to this below error newly loaded data not able to zoom

Error: <g> attribute transform: Expected number, "translate(NaN,20)

I'm asked to add a new html page to a vuejs project. This page is already fully developed and is based on jquery and some twitter-bootstrap features.

I've created a new component.

newPage.vue

<template> <div id="my-new-page"> ... </div> </template> <style src="path/to/_bootstrap.scss" lang="scss" scoped></style> <style src="path/to/font-awesome.scss" lang="scss" scoped></style> <style src="path/to/animate.css" scoped></style> <style src="path/to/custom/css.css" scoped></style> <script src="path/to/custom/js.js"></script>

js.js

import jQuery from 'jquery'; // Same error even with window.$ = window.jQuery = jQuery; import collapse from 'path/to/bootstrap/feature/collapse.js"; export default { created() { runjQuery(jQuery); }, }; function runjQuery($) { // here is how I thought integrate the jquery script of the new html page $(function () { .... $('#navbar').collapse('hide'); }); }

But this obviously does not work because collapse.js cannot access jQuery and I get this error

Uncaught ReferenceError: jQuery is not defined

How do I fix this problem?

Given that I don't want (if possible) to add bootstrap and jquery globally to my project because this will surely breaks here and there in my other components?

I'm having a data set which is by default have following:

summaries: [{client:'', type: '', mention: '', action: '', comment: '', button: true}],

I've a button which adds the same data set into summaries data:

addSummary() { this.summaryHeaders = true; this.summaries.push({ client: '', type: '', mention: '', action: '', comment:'', button: true }) },

Now I'm having other button, while being clicked I want to update button attribute as false of that particular data set. How can I achieve this?

I am using vuex to save a tree structure in the state property.

The data is fetched with an ajax call.

The problem is that the page manages to render before the variable I have in the state property manages to populate.

i.e

// sth.ts file state: { map: {} }, ... actions: { axios.get(...).then(... populate map ...).catch(...) } // sthelse.vue file <template> <div> <h1>Tree structure</h1> <ul > <item v-for="child in map[root]" :key="child.id" :name="child.name" :children="child.Children"> </item> </ul> </div> </template>

I have googled but I haven't found something that works. Has anybody dealt with a similar problem?

Is there a way it can be done?

I need to be able to delete specific component from the array. I do this with splice and although that component definition is removed from array, vuejs removes wrong component. It allways removes the last added component.

Here is a fiddle that provides demonstration of that:

https://jsfiddle.net/wjjonm8n/

and here is video to show what is happening:

https://maxniko.tinytake.com/sf/MTg3NTI5NF82MDIxNDAx

here is some code:

Vue.component('row-component', { props: ["rowData", "uniqueId"], mounted: function() { console.log('mounting: ' + this.uniqueId) }, beforeDestroy: function() { console.log('removing: ' + this.uniqueId) }, template: ` <div> row component: {{rowData}} <button @click="$emit('delete-row')">Delete</button> </div>` }) new Vue({ el: '#app', template: ` <div> <row-component v-for="(row, index) in rows" :row-data="row" :uniqueId="index" v-on:delete-row="deleteThisRow(index)"></row-component> <button @click="add()">add</button> </div> `, data: { rows: ["line1", "line2", "line3", "line4", "line5"], }, methods: { add() { this.rows.push('line'+(this.rows.length+1)) }, deleteThisRow: function(index) { this.rows.splice(index, 1) console.log(this.rows) } } })

this function tells me what vuejs really removes:

beforeDestroy: function() { console.log('removing: ' + this.uniqueId) }

it removes last added component if you look at what that console.log function prints. This is problem because on mount of each component I create listener for just that component:

this.$bus.$on('column-'+this.uniqueId+'-add-block', this.handlerMethod)

when vue removes last component, this event listener no longer works.

How can I solve this?

In my own application this is how I create child component:

let column = new Object() column.uniqueId = this._uid+'-column-' + this.addedColumnCount column.text = '1/2' this.columnList.push(column) this.addedColumnCount = this.addedColumnCount + 1

notice how I create uniqueId for component when I add it:

column.uniqueId = this._uid+'-column-' + this.addedColumnCount

when I try to delete a component it allways reports to me that the component with last added uniqueId is being removed.

beforeDestroy: function() { this.$bus.$off('column-'+this.uniqueId+'-add-block', this.handlerMethod) console.log('removing: ' + this.uniqueId) },

I have a stupid problem with VueJS. I'm new with VueJS. I want to access and change variables of data function. However I couldn't do it.

Here is my code:

data: function(){ return { item: 69, file: 0 }; }, methods: { toggle: (elementId = 0, type = 'item') => { console.log('element ID: ' + elementId); console.log('type: ' + type); console.log('item: ' + this.item); switch (type) { case 'item': break; case 'file': break; } } }

I'm working on a project where I want to add some more input fields when clicking on a button. So I tried jQuery.append but then there was a problem with v-model not being detected. So I tried to achieve the same thing using Vue if-statement and I figured out it could be done much simpler by just adding objects to the variable deciding how many input fields listed in the first place.

But then I noticed something strange and I would like to know if this is by accident or if it's meant to work this way.

So first of all - this is the html:

<div id="app-edit" class="form-group"> <template v-if="plate.props.products !== undefined"> <div class="form-group form-row" v-for="(extra, index) in plate.props.products"> <div class="col"> <label for="productExtrasNobb0" v-if="index == 0">NOBB number</label> <input type="text" class="form-control" v-bind:id="'productExtrasNobb' + index" v-model="plate.props.products[index].nobb"> </div> <div class="col"> <label for="productExtrasAmount0" v-if="index == 0">Amount</label> <input type="text" class="form-control" v-bind:id="'productExtrasNumber' + index" v-model="plate.props.products[index].number"> </div> <div class="col-auto d-flex align-items-end"> <button type="button" class="btn btn-danger"><i class="fa fa-minus"></i></button> </div> </div> <template v-if="extraAddons > 0"></template> <button type="button" class="btn btn-info" @click="addExtra(plate.props.products.length)"><i class="fa fa-plus mr-2"></i>Add</button> </template> <template v-else> <button type="button" class="btn btn-info" @click="addExtra(plate.props.products.length)"><i class="fa fa-plus mr-2"></i>Add</button> </template> </div>

And this is the relevant Vue JS:

var app = new Vue({ el: '#app-edit', data: { extraAddons: 0, plate: { props: { products: [], } } }, methods: { addExtra: function(number) { vm = this; vm.plate.props.products[number] = {nobb:'',number:''}; vm.extraAddons++; } } });

The thing is this is working fine. When I press the button to add an extra block it is inserted. But if I remove

<template v-if="extraAddons > 0"></template>

it's not working. Why is that relevant at all? It doesn't matter what tag I use - it could be p instead of template and still the same result but it seems like the v-if statement is triggering some sort of rendering?

Could anyone please explain so I can understand better why this is happening?

I have created custom autocomplete component which works as material input, but on focus or input debounces an ajax request and the reponse is a list of something which i can click and set as value of the input. The component uses labled-input component which is similar to Vuetify text input.

How ever, I would like to change to code to somehow using slots but its a problem since I have to listen for emits ( focus, blur ) from that slot.

So instead of my-labeled-input wanna change it to <slot></slot> and pass component from parent. The idea is to use the same code for selects too. Any suggestions?

<template> <div class="my-autocomplete"> <my-labeled-input :value="value" :title="title" @input="lInput" @focus="onFocus" @blur="onBlur"></my-labeled-input> <div class="list-container" v-if="focused"> <ul class="menu" v-if="list.length > 0"> <li v-for="item in list" @mousedown="itemClick(item.toponymName)">{{ item.toponymName }}</li> </ul> <template v-else> <p v-if="waiting"> Loading ...</p> <p v-else>No Data</p> </template> </div> </div> </template> <script> import debounce from 'lodash.debounce'; import myLabeledInput from '../../components/my-labeled-input/index.vue'; export default { name: 'my-autocomplete', components: { myLabeledInput, }, props: { value: { type: String, default: null, }, title: { type: String, default: null, }, apiUrl: { type: String, default: null, }, query: { type: Object, default: () => {}, }, debounceInterval: { type: Number, default: 1000, }, }, data() { return { list: [], focused: false, waiting: false, }; }, methods: { lInput(value) { this.$emit('input', value); this.waiting = true; this.getList(value); }, onFocus() { this.focused = true; this.waiting = true; this.getList(this.value); }, onBlur() { console.log('blur'); this.focused = false; }, getList: debounce(function (value) { // eslint-disable-line this.$http({ url: this.apiUrl, method: 'GET', params: { ...this.query, name_startsWith: value, }, }).then((response) => { console.log(response); this.list = response.data.geonames; this.waiting = false; }).catch(() => { this.list = []; this.waiting = false; }); }, 2000), itemClick(value) { this.$emit('input', value); }, }, }; </script>

I have this code:

Vue.component('parent', { template: ` <div> <child v-for='(child, index) in children' :key='index' :childNumber="index+1" v-on:removeChild="removeChild" /> </div> `, data: function() { return { children: [{}, {}, {}] } }, methods: { removeChild: function(index) { this.children.splice(index, 1); } } }); Vue.component('child', { template: ` <div> <input :value="'I am child number: '+childNumber"></input> <button v-on:click="removeChild">Remove child {{childNumber}}</button> </div> `, data: function() { return {} }, methods: { removeChild: function() { this.$emit('removeChild', this.childNumber); } }, props: ['childNumber'] }); const app = new Vue({ el: '#app', data: { message: 'Hello Vue!', } });

At the moment when you click any of the "remove" buttons, it deletes the last child, regardless of which button you clicked. How can I change my code so that it deletes the child you think it will delete, without touching the other children? (ie. clicking "Remove child 2" will leave just child 1 and 3 on the screen)

Fiddle: https://jsfiddle.net/wgr3sxqr/6/

I'm trying to do something like this, do not know how to describe in technical term, can't seem to find a solution for this.

<div id="app"> <input type="text" v-model="model1" /> </div> <div> <div id="model2">ABCDEFG</div> <input type="text" /> </div> <script> new Vue({ el: '#app', data: {'model1': 'value'}, ... ... ... }); </script>

How can i add model2 element into my #app data? I do not want to wrap my model2 inside of #app because it is a partial, and is shared throughout the application. Is there a way i can inject it on a particular page when it is needed?

I'm new to Vue.js, so wonder how this can be done in Vue instead jQuery?

The socket.io and jQuery will append a <li> each time when someone has typed something on the browser.

<!doctype html> <html> <head> <title>Socket.IO chat</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font: 13px Helvetica, Arial; } form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; } form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; } form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; } #messages { list-style-type: none; margin: 0; padding: 0; } #messages li { padding: 5px 10px; } #messages li:nth-child(odd) { background: #eee; } </style> </head> <script src="/socket.io/socket.io.js"></script> <script src="https://code.jquery.com/jquery-1.11.1.js"></script> <script> $(function () { var socket = io(); $('form').submit(function(){ socket.emit('chat message', $('#m').val()); $('#m').val(''); return false; }); socket.on('chat message', function(msg){ $('#messages').append($('<li>').text(msg)); }); }); </script> <body> <ul id="messages"></ul> <form action=""> <input id="m" autocomplete="off" /><button>Send</button> </form> </body> </html>

How is this done in Vue?

I tried:

$(function () { var socket = io(); $('form').submit(function(){ socket.emit('chat message', $('#m').val()); $('#m').val(''); return false; }); var app = new Vue({ el: '#app', data: { message: "Hello World" }, created: function() { socket.on('chat message', function(data) { this.message = data.message; }.bind(this)); } }); });

in my new HTML:

<form action=""> <input id="m" autocomplete="off" /><button>Send</button> <span id="app">{{ message }}</span> </form>

It does not work obviously.

Any ideas?

İs that possible to set some rules for disable or enable case sensitive searchable v-select

<v-select label="name" taggable v-model="selectedAgency" :options="agencyList" :on-change="onAgencyChange" placeholder="Agency"/>"></v-select>

Official page: https://sagalbot.github.io/vue-select/

Hello i am trying to fetch details of task when clicked on task name the get api should take task name as parameter and return the task details i am unable to pass the parameter in my api

This is my VueJs component:

<template> <div> <gmap-map ref="map" :center="center" @click="captureClickedLocation" :zoom="10"> </gmap-map> </div> </template>

How to get the reference to the current map object here, in order to use it with a google.maps.drawing.DrawingManager to display custom overlays, for example ?

Example code would be sth like this: var drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.MARKER, drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [ google.maps.drawing.OverlayType.CIRCLE, google.maps.drawing.OverlayType.POLYGON, google.maps.drawing.OverlayType.RECTANGLE ] }, markerOptions: { icon: 'images/beachflag.png' }); drawingManager.setMap(map);

How to get the reference to the gmap-map's map object? or, what would be the value for map in the last line ?

Project written in vue.js, how long would it take to build it with Cordova to have functional mobile app? I am really on tight schedule, so any advice would be appreciated

I have used vue-hotel-date-picker its working fine. the issue is when component rendered it does not show my placeholder value and not perform disabled dates on calender although the format of disabling dates is correct. same for placeholder.I debug it using Vue chrome extension for debugging it shows that my component has the respective data but it does not reflect on view

Here is an image when debugging

plugin link https://github.com/krystalcampioni/vue-hotel-datepicker

I don't know how to figure out and solve this problem , any help would be appreciated