Vue.js

Vue-router on apache, SPA in sub-directory, can only access pages by redirect

馋奶兔 提交于 2020-12-28 07:49:23
问题 So I have a Vue app for a client set up on an apache dev server. I am doing this to match the production environment. The app is in a subdirectory and I set the 'base' option on vue-router to match. If I navigate to my virtual host root it redirects properly, however navigating to the same address by typing the address in gives a 404. Here is my router code: const routes = [ {path: '/', redirect: '/london' }, {path: '/:city', component: homeView} ] const router = new VueRouter ({ mode:

海康威视使用FFmpeg+Nginx-rmtp进行按需推流(web端播放)

懵懂的女人 提交于 2020-12-28 01:21:09
海康威视使用FFmpeg+Nginx-rmtp进行按需推流 1.简介 很多朋友不太理解海康威视的官方sdk的使用方法博主也是,因为官方提供的是C/S版的,提供的web开发包,对浏览器的兼容性也是极差,还有一种办法是使用ffmpeg进行视频推流, 但是缺陷也是比较明显的,同时推三到四个流出来的视频也是相当卡顿对服务器资源消耗极大 所以博主另辟稀路,可不可以进行按需推流(傻瓜式监控视频对接) (点击视频先关流再推流做到按需播放)呢? 主要思路: 利用FFmpeg推流软件进行视频RTSP转RTMP流 再利用video-player播放rtmp流, 点击播放时,判断ffmpeg进程是否存在,存在则获取进程的pid号 利用进程号关闭进程以达到关流的的效果 RTSP格式详见 https://blog.csdn.net/zhouyongku/article/details/45073443?ops_request_misc=%25257B FFmpeg推流命令 ffmpeg - i "rtsp://USERNAME:PASSWORD@IP:PROT/Streaming/Channels/<通道ID>" - b 4096k - f flv - r 25 - s 1920x1080 - an "rtmp: / / 127 . 0 . 0 . 1:1935 / live / 自定义名称 JAVA

Styling not applied to vue web component during development

寵の児 提交于 2020-12-27 08:33:36
问题 While developing a Vue web component, the style is not applied to the web component, but added to the head of the document. This means that the style is ignored in the shadow DOM. Here is how I wrap the web component in main.js: import Vue from 'vue'; import wrap from '@vue/web-component-wrapper'; import MyWebComponent from './components/MyWebComponent'; const WrappedElement = wrap(Vue, MyWebComponent); window.customElements.define('my-web-component', WrappedElement); Again, any CSS rules

Best way to define common constants in Vue.js? [closed]

徘徊边缘 提交于 2020-12-27 07:59:16
问题 Closed . This question is opinion-based. It is not currently accepting answers. Want to improve this question? Update the question so it can be answered with facts and citations by editing this post. Closed 3 years ago . Improve this question I'm developing a couple of Vue apps using single file components. I find quite a few of my components require common config information, for example an object containing delivery methods which I might define like this: const DeliveryMethods = { DELIVERY:

Best way to define common constants in Vue.js? [closed]

丶灬走出姿态 提交于 2020-12-27 07:58:52
问题 Closed . This question is opinion-based. It is not currently accepting answers. Want to improve this question? Update the question so it can be answered with facts and citations by editing this post. Closed 3 years ago . Improve this question I'm developing a couple of Vue apps using single file components. I find quite a few of my components require common config information, for example an object containing delivery methods which I might define like this: const DeliveryMethods = { DELIVERY:

How can I use the event @select to select some text from a paragraph in Vue.js?

为君一笑 提交于 2020-12-27 06:27:06
问题 I'm using Vue.js with Nuxt in SSR, I would like when I highlight some text to get this text and perform an action on it. I found a way to do that with some text in <input> but I would like here to be able to @select some text from a paragraph and not from an input. here is how I did using <input> : <template> <div> <input @select="testFunction2()" value="TEXTE TO SELECT"> </div> </template> mounted() { window.addEventListener('select',this.testFunction2,innerHTML) }, methods:{ testFunction2

Shopify cart update not working with axios

删除回忆录丶 提交于 2020-12-27 06:16:36
问题 I am trying to permanently remove product items from my cart, but the function i created only only removes the data from the DOM and upon browser resfresh, reappears. Here is what i have done so far. HTML with JS click function in the cart.liquid file <a @click="removeFromCart(item)" class="product-remove">remove</a> removeFromCart function in my CartForm.js file removeFromCart(item){ let productInfo = this.cart.items.reduce( (accumulator, target) => ({ ...accumulator, [target.variant_id]:

Shopify cart update not working with axios

蹲街弑〆低调 提交于 2020-12-27 06:16:01
问题 I am trying to permanently remove product items from my cart, but the function i created only only removes the data from the DOM and upon browser resfresh, reappears. Here is what i have done so far. HTML with JS click function in the cart.liquid file <a @click="removeFromCart(item)" class="product-remove">remove</a> removeFromCart function in my CartForm.js file removeFromCart(item){ let productInfo = this.cart.items.reduce( (accumulator, target) => ({ ...accumulator, [target.variant_id]:

Shopify cart update not working with axios

假装没事ソ 提交于 2020-12-27 06:15:42
问题 I am trying to permanently remove product items from my cart, but the function i created only only removes the data from the DOM and upon browser resfresh, reappears. Here is what i have done so far. HTML with JS click function in the cart.liquid file <a @click="removeFromCart(item)" class="product-remove">remove</a> removeFromCart function in my CartForm.js file removeFromCart(item){ let productInfo = this.cart.items.reduce( (accumulator, target) => ({ ...accumulator, [target.variant_id]:

vue对象数组数据变化,页面不渲染

柔情痞子 提交于 2020-12-27 04:53:13
长按识别下方二维码,即可"关注"公众号 每天 晚上 ,干货准时奉上! 很多时候,我们习惯于这样操作数组和对象: data () { // data数据 return { arr: [ 1 , 2 , 3 ], obj:{ a: 1 , b: 2 } }; }, // 数据更新 数组视图不更新 this .arr[ 0 ] = 'OBKoro1' ; this .arr.length = 1 ; console.log(arr); // ['OBKoro1']; // 数据更新 对象视图不更新 this .obj.c = 'OBKoro1' ; delete this .obj.a; console.log(obj); // {b:2,c:'OBKoro1'} 由于js的限制,Vue 不能检测以上数组的变动,以及对象的添加/删除,很多人会因为像上面这样操作,出现视图没有更新的问题。 解决方式: this.$set(你要改变的数组/对象,你要改变的位置/key,你要改成什么value) this.$set(this.arr, 0, "OBKoro1"); // 改变数组 this.$set(this.obj, "c", "OBKoro1"); // 改变对象 2.数组原生方法触发视图更新     vue可以监听到数组原生方法导致的数据数据变化    splice()、 push()