vue-component | 易学教程

Using custom theming in Vuetify and pass color variables to components

阅读更多关于 Using custom theming in Vuetify and pass color variables to components

In my index.js file I have manually override the Vuetify theme object with my company's color: Vue.use(Vuetify, { theme: { primary: '#377ef9', secondary: '#1b3e70', accent: '#ff643d', error: '#ff643d' ... } Now, I can use these colors from my templates like so: <my-text-field name="input text" label="text" value="text text text text..." type="text" color="primary"> </my-text-field> What I'm after is using the primary or any other variable in the theme object defined above, inside my template style: <script> import { VTextField } from 'vuetify' export default { extends: VTextField } </script>

Search Box and Checkbox filter with Vue

阅读更多关于 Search Box and Checkbox filter with Vue

问题 I am trying to build filter system with Vue. Updated Filters working, but all the functions computed are separeted functions. So How can I make those in one function and use it. export default { data() { return { estates: [], search: '', regions:['関西','関東','京橋'], checkedRegions:[] } }, created(){ axios.get('/ajax').then((response) => { this.estates = response.data; }); }, computed: { one: function() { var result = this.estates.filter((estate) => estate.building_name.match(this.search) ); if

Passing props dynamically to dynamic component in VueJS

阅读更多关于 Passing props dynamically to dynamic component in VueJS

I've a dynamic view: <div id="myview"> <div :is="currentComponent"></div> </div> with an associated Vue instance: new Vue ({ data: function () { return { currentComponent: 'myComponent', } }, }).$mount('#myview'); This allows me to change my component dynamically. In my case, I have three different components: myComponent , myComponent1 , and myComponent2 . And I switch between them like this: Vue.component('myComponent', { template: "<button @click=\"$parent.currentComponent = 'myComponent1'\"></button>" } Now, I'd like to pass props to myComponent1 . How can I pass these props when I change

[Vue warn]: Property or method is not defined on the instance but referenced during render

阅读更多关于 [Vue warn]: Property or method is not defined on the instance but referenced during render

VueJs 2.0 - how to listen for `props` changes

阅读更多关于 VueJs 2.0 - how to listen for `props` changes

In the VueJs 2.0 docs I can't find any hooks that would listen on props changes. Does VueJs have such hooks like onPropsUpdated() or similar? Update As @wostex suggested, I tried to watch my property but nothing changed. Then I realized that I've got a special case: <template> <child :my-prop="myProp"></child> </template> <script> export default { props: ['myProp'] } </script> I am passing myProp that the parent component receives to the child component. Then the watch: {myProp: ...} is not working. You can watch props to execute some code upon props changes: new Vue({ el: '#app', data: { text

Best approach when replacing jQuery with VueJS 2 in multi-page existing .NET MVC application

阅读更多关于 Best approach when replacing jQuery with VueJS 2 in multi-page existing .NET MVC application

I am very new in VueJS I have multi-page ASP.NET MVC app where I want to use VueJS (components, 2-way binding, validation, CRUD operations) Currently using jQuery for DOM manipulation, Ajax requests etc How should I approach this? I am getting way too much variations in thoughts from different posts (online) Could anyone please guide me and give me some pointers to get started? Some step by step doc will be great that shows how to do this with a hello world page (MVC View) with vuejs single file component and bundling The bundling seems complicated process. But I would love to use LESS in my

In vue.js component, how to use props in css?

阅读更多关于 In vue.js component, how to use props in css?

问题 I'm new to vue.js. Here is my problem: In a *.vue file like this: <template> <div id="a"> </div> </template> <script> export default { name: 'SquareButton', props: ['color'] } </script> <style scoped> #a { background-color: ? } <style> How can I use the props color in background-color: (where is a ? now). Thanks. 回答1: You don't. You use a computed property and there you use the prop to return the style of the div, like this: <template> <div id="a" :style="style" @mouseover="mouseOver()"> <

Set default value to option select menu

阅读更多关于 Set default value to option select menu

问题 I want to bind a custom attribute to an option select menu. The <option> tag would simply have an attribute of selected="selected" <template> <div> <select> <option v-for="" v-bind:selected="[condition ? selected : notSelected]" value="">{{ resource.xprm_name }}</option> </select> </div> </template> data: { selected: "selected", notSelected: "" } This does not work, but if I change v-bind:selected to v-bind:class then it receives the appropriate class, so the logic is working, but not with

Watching computed properties

阅读更多关于 Watching computed properties

问题 I have a component with the following hash { computed: { isUserID: { get: function(){ return this.userId? } } } Should I be watching isUserID or userId for changes? Can you watch computed properties? 回答1: Yes, you can setup watcher on computed property, see the fiddle. Following is the code to set watch on computed property: const demo = new Vue({ el: '#demo', data() { return { age: '' }; }, computed: { doubleAge() { return 2 * this.age; } }, watch: { doubleAge(newValue) { alert(`yes,

Apply global variable to Vuejs

阅读更多关于 Apply global variable to Vuejs

问题 I have a javascript variable which I want to pass globally to Vue components upon instantiation thus either each registered component has it as a property or it can be accessed globally. Note:: I need to set this global variable for vuejs as a READ ONLY property 回答1: You can use a Global Mixin to affect every Vue instance. You can add data to this mixin, making a value/values available to all vue components. To make that value Read Only, you can use the method described in this stackoveflow