Vue.js

how to compile time check strongly typed props in vue templates?

由 浪子不回头ぞ 提交于 2021-02-08 05:33:02
问题 Using Vue with Typescript makes it possible to specify types for props: Strongly typing props of vue components using composition api and typescript typing system However, as far as I can see these props are only checked at runtime. Here's a simple example component. It has two props a , and b . One is a number and the other a string. Additionally b has a validator, it is only valid if it's equal to hi <template> <p>{{a}}</p> </template> <script> import {defineComponent} from 'vue'; export

how to compile time check strongly typed props in vue templates?

由 孤人 提交于 2021-02-08 05:32:28
问题 Using Vue with Typescript makes it possible to specify types for props: Strongly typing props of vue components using composition api and typescript typing system However, as far as I can see these props are only checked at runtime. Here's a simple example component. It has two props a , and b . One is a number and the other a string. Additionally b has a validator, it is only valid if it's equal to hi <template> <p>{{a}}</p> </template> <script> import {defineComponent} from 'vue'; export

权限控制（vue）

由 自闭症网瘾萝莉.ら 提交于 2021-02-08 05:29:40
权限控制（vue） 经常会遇到，角色权限控制问题，若是页面控制，倒好说，可如果是当前页面部分可见不可见，这就有些麻烦，如果加上条件就更加苛刻。之前只是简单的 v-if 进行控制，如今想试试指令（网上一直有这些操作方式） 参考 参考了 vue-element-admin -- 指令 应用场景 权限控制 dom隐藏（不推荐） 直接从dom节点删除 依据传入的数据动态进行修改 代码 需求：需要实现一个依据动态参数进行修改的模块 test.vue template <div class="test-height"> <!-- 指令调用，status是动态参数 --> <h1 v-permission="{ role: ['so'], status }">test</h1> </div> js import permission from '@/directives/permission' export default { ... directives: { permission }, data () { return { status: false } }, mounted () { // 动态修改参数 setTimeout(() => { this.status = !this.status }, 1000) } } permission.js import store from '@

How to trigger only one event 'change' or 'click'

由 我的梦境 提交于 2021-02-08 05:10:20
问题 I have a number input tag on which I have two event listeners 'on-click' and 'on-change'. When I am click on arrow it triggers both. I would like to have one whichever triggers first without removing any of the event listeners. On clicking rapidly change event doesn't trigger until it looses focus from input tag(If I keep only change event). If I keep only click event then I won't be able to capture change event. <input type="number" @click="function()" @change="function()" /> 回答1: Use

vuejs - computed is not working with props

由 ☆樱花仙子☆ 提交于 2021-02-08 04:48:42
问题 I'm using props to update my site content in child component. This is basically working like this: <child-component> :updatedArray="updatedArray" </child-component> then in the child component: <template> {{updatedArray}} <div>{{computedArray}}</div> </template> <script> props: ['updatedArray'], ... computed: { computedArray() { if(this.updatedArray.item == "item one") {return "item one"} else {return "other item"} } } </script> Now this code should work in any case when I update updatedArray

How to override Bootstrap variables in Vue workflow ( Vanilla Bootstrap )?

由 こ雲淡風輕ζ 提交于 2021-02-08 04:39:46
问题 The officially recommended way to customize / theme bootstrap is by overriding the bootstrap variables using sass. But how do I do this, or rather, how do I add this part of the process into the Vue webpack workflow ? Googling led to try editing the vue.config.js file to add scss loader into webpack but I am unable to find the required file. This is the directory structure I have used vue-cli v3.4 to setup the project. I am using vanilla bootstrap and not the bootstrap-vue components. 回答1:

Vue.js removes jQuery event handlers

由 非 Y 不嫁゛ 提交于 2021-02-08 03:42:43
问题 So i have made an accordion/tabs using jQuery, i use jquery .click method on li elements to turn pages/tabs. Now i wanted to integrate Vue.js to display the JSON data i got from jquery on the accordion pages. But when i add .vue class on the accordion and el: '.vue' , the jquery .click events do not trigger at all, now the tabs wont turn pages. Maybe i shouldn't use Vue with Jquery, but i find jQuery is easier to do a simple task like switching between tabs. PS: im new to Vue 回答1: The event

How to test for the existance of a bootstrap vue component in unit tests with jest?

由 孤者浪人 提交于 2021-02-08 02:36:12
问题 So I have some code that has a b-form-input component and I am testing whether that component renders. I am using wrapper.find({name: "b-form-input"}).exists() to determine whether that bootstrap vue component exists. However this function continually returns false when I know that the component is rendering. Could I have some help on how to do this correctly? 回答1: Looking at the bootstrap-vue source code, it looks like the name of the element is BFormInput and not b-form-input (it was

vue socket.io connection attempt returning “No 'Access-Control-Allow-Origin' header is present” error even when origins have been set

由 拥有回忆 提交于 2021-02-08 02:12:25
问题 I've been trying to debug this for a couple of days now, I've had experience with sockets on 1 other app but it was on the same domain, I didn't think I'd have this much trouble with a cross domain vue.js app though I have been debugging this myself to my best efforts and have tried basically everything I can think of. In the node.js server I have set origins with let io = require('socket.io')(http, {origins: '*:* agora.dev:*'}) and then I listen for connections with io.on('connection',
订阅 Vue.js