vuejs2

Vue.js proper random ordering of v-for loop

由 房东的猫 提交于 2021-01-27 21:54:10
问题 Have a list that i want to output in random order. I achieved this with computed property: <div id="app"> <ul> <li v-for="list in randomList" > {{ list.text }} </li> </ul> </div> <script> var vm = new Vue({ el:'#app', data:{ lists:[ {text:'js',value:'one'}, {text:'css',value:'two'}, {text:'html',value:'three'} ] }, computed: { randomList: function(){ return this.lists.sort(function(){return 0.5 - Math.random()}); } } }); </script> But if i have more than one list i that want to simplify this

Vue v-for with v-if

由 流过昼夜 提交于 2021-01-27 20:23:42
问题 I found some inconsistency in the Vue documentation. If someone clarify this please. Looking at v-for-with-v-if it says it could be useful to do it. Which in my case I am in that exact situation. But now eslint is complaining. So I looked at the style guide and its telling me to avoid this. So there is some clear contradiction. Question : Is it really that bad that you should avoid it? My Opinion : I don't see it as bad . I have quite a few use cases where this is useful. 回答1: Way 1: all

How can I dynamically wrap a substring with a component in Vue.js?

由 断了今生、忘了曾经 提交于 2021-01-27 19:39:00
问题 What am I trying to do Given a string from a user input, I am attempting to render this string with particular substrings wrapped in a component. In my particular case the substring being matched is a date that matches a regex pattern and the component that is supposed to wrap it is a chip from Vuetify. What I have done Above is a screenshot of what I have achieved so far. The input of the textarea is rendered below it with certain substrings wrapped in the chip component from Vuetify. The

Failed to mount component: template or render function not defined. Component fails to import

由 瘦欲@ 提交于 2021-01-27 19:30:20
问题 I am trying to replicate the vue tutorial example (found here: https://v3.vuejs.org/guide/component-basics.html#passing-data-to-child-components-with-props ), but with no success. Below is my code. I have a view called TA.vue, that i would like to import the component into and render. Any ideas what I am doing wrong? TA.vue (the view): <template id="front"> <b-container style="margin-top: 9rem;"> <b-row> <div id="blog-posts-events-demo" class="demo"> <div> <blog_post v-for="post in posts"

Failed to mount component: template or render function not defined. Component fails to import

由 痞子三分冷 提交于 2021-01-27 19:04:12
问题 I am trying to replicate the vue tutorial example (found here: https://v3.vuejs.org/guide/component-basics.html#passing-data-to-child-components-with-props ), but with no success. Below is my code. I have a view called TA.vue, that i would like to import the component into and render. Any ideas what I am doing wrong? TA.vue (the view): <template id="front"> <b-container style="margin-top: 9rem;"> <b-row> <div id="blog-posts-events-demo" class="demo"> <div> <blog_post v-for="post in posts"

How to get http refere in vuejs?

由 元气小坏坏 提交于 2021-01-27 18:24:56
问题 I would like to get from which page a user came from in my page. Currently, I would like to get this info in my created() or mounted() pages. Using this.$router or this.$route but none of them contain this info. I know in the navigation guards, we can use this : router.beforeEach((to, from, next) => { }) to know where the page is comming from, but I don't want to use router.beforeEach because that is in found inside my main.js but where I want to get the referer is in my components page,

Importing p5 into a Vue app

由 感情迁移 提交于 2021-01-27 13:14:12
问题 I added the p5 library into the dom like so... <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>App</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.10/p5.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.10/addons/p5.dom.js"></script> </head> <body> <div id="app"></div> <script src="/dist/build.js"></script> </body> </html> So technically I should be able to grab it via window variable within my Vue code... <template> <div

Vue js - pass data within two components in the same level

由 假装没事ソ 提交于 2021-01-27 12:55:23
问题 I have data that I need to pass from one component1 to another component2 . I don't use vuex or router . Components tree: -Parent --Component1 --Component2 From first component1 I make ajax request, retrieving info and pushing to data. board: [1,2,3,4,5] And I need access that retrieved data in component2 Can I do It without vuex or router ? Thank you :) 回答1: You could emit an event to parent from component1 having as parameters the updated board and in the parent one receive that and pass it

Vue JS provide/inject and Props

由 本秂侑毒 提交于 2021-01-27 12:24:13
问题 When should provide/inject be used compared to props. In my opinion props make component more meaningful. Provide/inject makes components tightly coupled. What are the use cases where using provide/inject is a better approach. Please advice Thanks 回答1: Here are some differences that helped me choose in many situations props are reactive and provide / inject is not. props can only be used on direct child components. From docs: Provide / inject are used together to allow an ancestor component

Renderless Vue Component in TypeScript

由 谁都会走 提交于 2021-01-27 08:51:31
问题 I have a renderless component in JavaScript that I am trying to convert to TypeScript. I'm running into errors declaring the render function in a Vue.extend -ed component: (method) ComponentOptions<Vue, unknown, unknown, unknown, never[], Record<never, any>>.render?(createElement: CreateElement, hack: RenderContext<Record<never, any>>): VNode No overload matches this call. The last overload gave the following error. Argument of type '{ render(): void; }' is not assignable to parameter of type
订阅 vuejs2