vue-component | 易学教程

Vue.js - Using parent data in component

阅读更多关于 Vue.js - Using parent data in component

How I can get access to parent's data variable (limitByNumber) in my child component Post? I tried to use prop but it doesn't work. Parent: import Post from './components/Post.vue'; new Vue ({ el: 'body', components: { Post }, data: { limitByNumber: 4 } }); Component Post: <template> <div class="Post" v-for="post in list | limitBy limitByNumber">  .... </div> </template>  <script> export default { props: ['list', 'limitByNumber'], created() { this.list = JSON.parse(this.list); } } </script> Option 1 Use this.$parent.limitByNumber from child component. So your

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 asemahle 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 answer . Here is an example: // This is a global mixin, it is applied to every vue instance Vue

Vue - access nested childs using ref

阅读更多关于 Vue - access nested childs using ref

问题 I have vue component which I use inside himself - data can have array with subelements and I use this array to render them in loop, and next level, next level etc. according to nesting level. Now I would like to run child method from parent and then - if statements are ok, also call it to child, next level etc. I use <mycomponent ref="myFirstLevelRefName" (...) ></mycomponent> and then: this.$refs.myFirstLevelRefName to call first-level childs. But what about about child nodes? I use them in

Include global functions in Vue.js

阅读更多关于 Include global functions in Vue.js

In my Vue.js application I want to have some global functions. For example a callApi() function which I can call every time I need access to my data. What is the best way to include these functions so I can access it in all my components? Should I create a file functions.js and include it in my main.js? Should I create a Mixin and include it in my main.js? Is there a better option? Justin MacArthur Your best bet would be a Plugin, which lets you add features to the global vue system. [from the vuejs Docs] MyPlugin.install = function (Vue, options) { // 1. add global method or property Vue

How to re-mount a component?

阅读更多关于 How to re-mount a component?

I have a component which is mounted as part of the DOM rendering. The skeleton of the application is <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <div id="app"> <my-component></my-component> <button>press this button to reload the component</button> </div> </body> </html> <my-component> is functional (it displays a few form inputs) and $emit data to the parent. Is there a way to re-mount it? The goal is to have a component content and setup as if it was just rendered for the first time (including a reset of the data() elements which hold its state).

Can we make vue.js application without .vue extension component and webpack?

阅读更多关于 Can we make vue.js application without .vue extension component and webpack?

Note: Can we write vue.js large application without using any compiler for code like currently i see all example use webpack now to make vue.js code compatible for browser . I want make vue.js application without webpack and without using .vue extension. Is it possible? if it is possible, can you provide a link or give sample how to use routing in that case. As we make component in .vue extension can be make component in .js extension and use application as we do in angular 1 where we can make whole app without any trans-compiler to convert the code. Can be done that in html , css , js file

How do I format currencies in a Vue component?

阅读更多关于 How do I format currencies in a Vue component?

My Vue component is like this : <template> <div> <div class="panel-group"v-for="item in list"> <div class="col-md-8"> <small> Total: <b>{{ item.total }}</b> </small> </div> </div> </div> </template> <script> export default { ... computed: { list: function() { return this.$store.state.transaction.list }, ... } } </script> The result of {{ item.total }} is 26000000 But I want format it to be like this : 26.000.000,00 In jquery or javascript, I can do it But, How to do it in vue component? UPDATE: I suggest using solution with filters, provided by @Jess. I would write method for that, and then

How can I send data from parent to child component by vuex store in vue component?

阅读更多关于 How can I send data from parent to child component by vuex store in vue component?

My parent component like this : <template> ... <search-result/> ... </template> <script> import {mapActions} from 'vuex' ... export default { ... props: ['category'], mounted() { this.updateCategory(this.category) }, methods: { ...mapActions(['updateCategory']), } } </script> My child component like this : <template> ... </template> <script> import {mapGetters} from 'vuex' ... export default { ... mounted() { console.log(this.getCategory) }, computed: { ...mapGetters(['getCategory']) }, } </script> My modules vuex to send data between components like this : import { set } from 'vue' ... //

Compile .vue file into .js file without webpack or browserify

阅读更多关于 Compile .vue file into .js file without webpack or browserify

问题 Is there any way to compile .vue file into .js file without webpack or browserify? I know the goodness of webpack or browserify but I just want the simplest way to compile the .vue file. For example, I have a single file component comp.vue complied into comp.js (the compiler should be able to compile sass and pug in .vue file) and then I can use it in my app like below: <head> <script src="vue.min.js"></script> <script src="comp.js"></script> //it may pack the whole component into variable

Linking two Vue.js components

阅读更多关于 Linking two Vue.js components

I have one single file component that is used to show data and another one that is used to edit the same data. The view has labels and paragraphs where as the edit component has inputs and textareas. Both of these components take the same data object. Is there a way that by editing the fields (bound with v-model in the edit component) the changes a reflected to the view component? For example, here's my paragraph.vue that is used to show the data <template> <div class="row"> <div class="col-xs-12"> <p>{{ text }}</p> </div> </div> </template> and here's the edit dialog <template> <div class=