vue-component

问题 I am trying to search or filter through 3 fields firstname, lastname and email in my Vue.js 2 application. I understand that Vue 2 does not come with a built in filter method unlike in Vue 1, hence I created a custom method which is only able to filter through just one field. How do I extend this to multiple fields? I have tried something like this filterBy(list, value1, value2, value3) but it does not work. This is my code <template> <div class="customers container"> <input class="form

问题 Suppose I have a functional component: <template functional> <div>Some functional component</div> </template> Now I render this component in some parent with classes: <parent> <some-child class="new-class"></some-child> </parent> Resultant DOM doesn't have new-class applied to the Functional child component. Now as I understand, Vue-loader compiles Functional component against render function context as explained here. That means classes won't be directly applied and merge intelligently.

问题 I'm new to vue js. I'm just creating a simple project where I just include vuejs through CDN. not using node/npm or cli. I keep all my html markup in single html which looks messy as it grows. I tried to split html to views and want to include it by something analogous to ng-include of angularJs I have worked in angular previously where there is ng-include to load external html files. I'm looking for something similar to that in vue. the whole point is to split my html files into more

问题 I have a tricky requirement. I want to read the configuration (ex, id, api etc) by making a API call. Then i want to save this values globally so that my all Vue components can read this. I have seen mixin. But it looks like it is for generalized functionality and i have to import that mixin in my component. How can i do this only once and save that values for all my components directly? I think this example is looks like suitable for my requinment but i am not able to understand that is this

问题 I have following kind of code: <div> <compA /> <compB /> </div> How do I make sure that first compA is rendered only after it compB is rendered. Why I want is I have some dependency on few elements of compA , and style of compB depends on presence of those elements. Why in details : I have some complex UI design, where one box will become fixed when you scroll. SO It will not go above the screen when you scroll, it will be fixed once you start scrolling and it start touching the header. So I

问题 I have following kind of code: <div> <compA /> <compB /> </div> How do I make sure that first compA is rendered only after it compB is rendered. Why I want is I have some dependency on few elements of compA , and style of compB depends on presence of those elements. Why in details : I have some complex UI design, where one box will become fixed when you scroll. SO It will not go above the screen when you scroll, it will be fixed once you start scrolling and it start touching the header. So I

问题 Let's say I want to create a contact form. In this contact form, a user can have multiple addresses. I would think that this is a perfect opportunity to use a Vue Component so that I don't have to create redundant address form fields. I would then be able to use this component in different areas of a website, say on edit, create, etc.... How would I go about creating a form component that a parent can use and have values from that form get added to an addresses array? Also, I would like to be

问题 The question may sound basic, but I am unable to figure out how to do it in VueJS I have the following in html <script> var config = {'cols':4,'color':'red'} </script> <div id="app"> <mycomponent :config="config"></mycomponent> </div> var app = new Vue({ el: '#app', data: { // config: config // I do not want to pass this } }) Following is the use case: I know this isn't working because config variable in the component is looking for app.config I do not want to pass it as data{ config:config }

问题 Is there a way to simplify this code? The button should also change the localValue of the child. Vue.component('my-input', { template: ` <div> <b>My Input:</b> <br> localValue: {{ localValue }} <br> <input v-model="localValue"> </div> `, props: ['value'], data() { return { localValue: this.value } }, watch: { value () { this.localValue = this.value }, localValue () { this.$emit('input', this.localValue) } } }) new Vue({ el: '#app', data: () => ({ parentValue: 'Inital value' }), methods: {

问题 I got below TypeScript error when tried to use side component (outside of project directory): TS2345: Argument of type '{ template: string; components: { SimpleCheckbox: typeof SimpleCheckbox; }; }' is not assignable to parameter of type 'VueClass<Vue>'. Object literal may only specify known properties, and 'template' does not exist in type 'VueClass<Vue>'. My WebStorm IDE did not detect this error; in was outputted in console when I ran Webpack with TypeScript loader. The error occurs in: