Posts

Showing posts with the label vuejs2

switch camera using MediaDevices.getUserMedia() in vuejs 2

switch camera using MediaDevices.getUserMedia() in vuejs 2 I'm trying to develop a website where i can switch camera from chrome in mobile devices. Current im using vuejs 2 framework and using MediaDevices.getUserMedia() to take image. From here i understand how am i gonna use my code. Individually both of front and back camera working. But where im trying to switch between then its not working. Here is my code: <template> <div class="container" id="scanIdCardPage"> <div class="scanIdCardDiv"> <div class="scanCardContainer" v-show="afterTakingPhoto"> <video ref="video" id="video" :style="{width: divWidth}" autoplay></video> <canvas ref="canvas" id="canvas" width="320" height="240" style="display: none;"></canvas> </div...

Vue App ID causing issues with existing page 'addEventListener'

Vue App ID causing issues with existing page 'addEventListener' Got a couple of issues on my html form page after adding Vue.js. After adding the Vue ID to the form, the addEventListener seems to stop working which prevents any form submissions from the page. <form name="myform" id="deliveryservice"> <select v-model="search"> <option disabled="disabled" value="">JSON Dayslots</option> <option v-for="item in items" v-bind:value="item.slot"> {{ item.shortcode }} {{ item.slot }} </option> </select> <select v-model="servicev" required> <option selected disabled hidden>Please Select</option> <option value="standard">Standard</option> <option va...

How to update a Vue component props object from outside?

How to update a Vue component props object from outside? I need to update the props object of a Vue component from outside Vue. I have a solution which seems to work but I get a warning that I want to get rid of. props I create a Vue compoent like this: this.vm = return new Vue({ render: h => h(component, { props: propsData, }) }).$mount(el); Then in a function I update the props from outside Vue as follows this.updateProps = function (props) { const children = this.vm.$children; const firstChild = children && children[0]; if (!firstChild) { return; } _.each(_.keys(firstChild.$props || {}), (key, i) => { firstChild.$props[key] = props[key]; }); } This works, but I get the this warning message: [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's ...