Vue.js

How to use template scope in vue jsx?

若如初见. 提交于 2021-02-06 10:48:12
问题 I define a simple child component(testSlot.vue) like this: <template> <section> <div>this is title</div> <slot text="hello from child slot"></slot> </section> </template> <script> export default {} </script> and we can use it in html template like this <test-slot> <template scope="props"> <div> {{props.text}}</div> <div> this is real body</div> </template> </test-slot> but how can I use it in jsx ? 回答1: After read the doc three times , I can answer the question myself now O(∩_∩)O . <test-slot

How to unit testing with jest in vue composition api component?

假装没事ソ 提交于 2021-02-06 10:13:04
问题 I'm writing a unit test with jest, for my composition API component in vue.js. But I can't access to functions in composition API's setup(). Indicator.vue <template> <div class="d-flex flex-column justify-content-center align-content-center"> <ul class="indicator-menu d-flex justify-content-center"> <li v-for="step in steps" :key="step"> <a href="#" @click="updateValue(step)" :class="activeClass(step, current)"> </a> </li> </ul> <div class="indicator-caption d-flex justify-content-center">

How to unit testing with jest in vue composition api component?

有些话、适合烂在心里 提交于 2021-02-06 10:11:45
问题 I'm writing a unit test with jest, for my composition API component in vue.js. But I can't access to functions in composition API's setup(). Indicator.vue <template> <div class="d-flex flex-column justify-content-center align-content-center"> <ul class="indicator-menu d-flex justify-content-center"> <li v-for="step in steps" :key="step"> <a href="#" @click="updateValue(step)" :class="activeClass(step, current)"> </a> </li> </ul> <div class="indicator-caption d-flex justify-content-center">

How to unit testing with jest in vue composition api component?

别说谁变了你拦得住时间么 提交于 2021-02-06 10:09:54
问题 I'm writing a unit test with jest, for my composition API component in vue.js. But I can't access to functions in composition API's setup(). Indicator.vue <template> <div class="d-flex flex-column justify-content-center align-content-center"> <ul class="indicator-menu d-flex justify-content-center"> <li v-for="step in steps" :key="step"> <a href="#" @click="updateValue(step)" :class="activeClass(step, current)"> </a> </li> </ul> <div class="indicator-caption d-flex justify-content-center">

新年牛牛牛 2021 年关注这几个高质量公众号

穿精又带淫゛_ 提交于 2021-02-06 08:01:43
2021 年了,前端技术日新月异,发展迅速,前端公众号是不是感觉越来越多了? 在着辞旧迎新之际,这里盘点几个前端开发工程师 2021 年必须关注的优质公众号,希望对你有所帮助。 大家可以像我一样,利用碎片时间阅读这些公众号的文章,真的有收获! code秘密花园 一个优质的前端号,作者ConardLi,掘金六级作者,博文百万阅读量。长期分享前端基础、框架、node、算法、面试相关优质文章和资源。 👀 扫一扫关注大佬 👀 前端技术优选 前端技术优选为你精选业界前端好文,专注前端及node领域,欢迎关注。 👀 扫一扫关注大佬 👀 前端宇宙 掘金LV6作者,曾输出多篇千赞好文!此外,小编还是个爱摄影爱旅游的程序员,前端进阶的路上,与君同行。 👀 扫一扫关注大佬 👀 前端试炼 18年毕业,工作1年半后跳槽进入大厂,目前是一名高级前端工程师,负责团队基础建设。他善于总结、热于分享,在社区经常能见到他的身影。公众号每日一篇前端优质文章,快关注! 👀 扫一扫关注大佬 👀 前端迷 专注于vue/react/常见前端面试/最新web前端技术的分享;致力于算法以数据结构及前端底层原理、源码技术研究探讨;独具匠心,用心去打造一个一流的前端交流社区。 👀 扫一扫关注大佬 👀 技术漫谈 掘金优秀作者,专注于从规范的角度讲解 JS 知识点,图解重难点。这也是「现代 JavaScript 教程」官方公众号

'v-slot' directive doesn't support any modifier

浪尽此生 提交于 2021-02-06 05:53:04
问题 I am using vuetify's datatable, i this we have different slots with some props for example below <template #header.data-table-select="{ on, props }"> <v-simple-checkbox color="purple" v-bind="props" v-on="on"></v-simple-checkbox> </template> I am also using vue's eslint plugin to check for any errors/bad code / or any violation , but if i use above code snippet in my file it gives me error 'v-slot' directive doesn't support any modifier as per this docs it is right https://eslint.vuejs.org

'v-slot' directive doesn't support any modifier

独自空忆成欢 提交于 2021-02-06 05:50:41
问题 I am using vuetify's datatable, i this we have different slots with some props for example below <template #header.data-table-select="{ on, props }"> <v-simple-checkbox color="purple" v-bind="props" v-on="on"></v-simple-checkbox> </template> I am also using vue's eslint plugin to check for any errors/bad code / or any violation , but if i use above code snippet in my file it gives me error 'v-slot' directive doesn't support any modifier as per this docs it is right https://eslint.vuejs.org

'v-slot' directive doesn't support any modifier

ε祈祈猫儿з 提交于 2021-02-06 05:50:23
问题 I am using vuetify's datatable, i this we have different slots with some props for example below <template #header.data-table-select="{ on, props }"> <v-simple-checkbox color="purple" v-bind="props" v-on="on"></v-simple-checkbox> </template> I am also using vue's eslint plugin to check for any errors/bad code / or any violation , but if i use above code snippet in my file it gives me error 'v-slot' directive doesn't support any modifier as per this docs it is right https://eslint.vuejs.org

Vue Router History Mode with PWA in Offline Mode

不想你离开。 提交于 2021-02-06 03:53:44
问题 To get history mode working with Vue-Router you need to return the contents of your main page when trying to access a route that doesn't exist. For example when you visit mypwa.com/route1 your server checks if there is a resource at route1 and if there isn't, it returns the contents that is found at mypwa.com/ (but without redirecting you). This is great and works when you're online, but it requires your server to do the actual re-routing. If you have a PWA that's meant to work offline, you

Vue Router History Mode with PWA in Offline Mode

我们两清 提交于 2021-02-06 03:42:36
问题 To get history mode working with Vue-Router you need to return the contents of your main page when trying to access a route that doesn't exist. For example when you visit mypwa.com/route1 your server checks if there is a resource at route1 and if there isn't, it returns the contents that is found at mypwa.com/ (but without redirecting you). This is great and works when you're online, but it requires your server to do the actual re-routing. If you have a PWA that's meant to work offline, you