vue-component

问题 I want to store input-value from App.vue, and use it in another component. How can I do it? I don't need the show the value in the template, I just need the value inside other components function. In JS I could just use a global var, but how can I achieve it in Vue? App.vue: <template> <div id='app'> <!-- App.vue has search bar --> <b-form-input @keydown='search' v-model='input'></b-form-input> <div> <!-- Here's my other components --> <router-view /> </div> </div> </template> <script> export

问题 I am going to create a layout like 'header sidebar main-content sidebar footer ' with flexbox by Vuejs. I created separate .vue files for each part of the layout , I mean something like a sidebar.vue and a header.vue and so on .... And I am going use them in App.vue file like : <template> <div id="app"> <app-header ></app-header> <app-sidebar></app-sidebar> <app-content></app-content> <app-sidebar></app-sidebar> <app-footer></app-footer> </div> </template> <script> import header from ".

问题 Hi I'm trying to pass a value to a child component as props and trying to use this value in child's created hook but it's not getting set. See example below, <!-- Parent component --> <template> <div> <details :customer_id = this.customer_id :foo = "bar" /> </div> </template> <script> import CustomerDetail from './CustomerDetails'; export default { name: 'Customer', data: function() { return { customer_id: '', } components: { 'detail': CustomerDetail }, created: function() { var id = this.

问题 When and why Render function will re-render vue component. May be some one know some Rules and Demands to data? 回答1: I think you are looking for this: Reactivity in Depth - https://vuejs.org/v2/guide/reactivity.html If you are more of a visual person... then the lifecycle diagram might be easier to understand - https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram Basically any time a reactive data property changes... Vue will re-render the component. 来源： https://stackoverflow.com

问题 I am using v-text-filed and in that, I am using textarea. I want to change the default height of textarea and make it small. Is it possible to do this? <v-text-field name="input-1" label="Label Text" textarea ></v-text-field> 回答1: add rows property <v-text-field name="input-1" label="Label Text" textarea rows="2" ></v-text-field> 来源： https://stackoverflow.com/questions/48706964/v-text-field-textarea-default-height-change

问题 i am appending a child component in Vue programmatically as seen below: var ComponentClass = Vue.extend(FormulaGeneratorConstant) //create instance from FormulaGeneratorConstant component this.constants.push('variable1'); var constant = new ComponentClass({ propsData: { value: this.constants[this.constants.length - 1] } }); constant.$mount(); this.$refs.droppableContainer.$el.appendChild(constant.$el) but right now i can only pass props in this code. i would like to know how to implement v

问题 I am working with existed Database which every table columns are containing white space. As result as VueJS api, I got the data key with white-space as below: data = { Course Trained:"82", Course trained 2:null, Delivery Channel:"IA2DC1", End Date:"2017-05-06", Full Name:"9", ID:"1", Intervention:"IA2", Number of sessions:"5", Start Date:"2017-05-02", Training Orginisation:"2", } My problem is when I tried to use 'v-model' => 'Course Trained' , the whole page compiled an error. How can I deal

问题 How to refer URL into Vue.Template link. Template is longer and all operations are going to include to mounted/methods. Vue.component('button-counter', { data: function () { return { count: 0 } }, template: './views/templatebutton.html' //how to refer URL here. }) 回答1: You could read the local HTML file as a string, and then load the result into the template field. With a module loader (such as Webpack), you would use require() to import the HTML file: // Foo.js Vue.component('button-counter'

问题 Hi there I saw posts talking about this, but is not easy for me understand what I have to do to share data between components, I don't want to use event bus so can you tell me how to use props?? Component A: <template> <div> <div class="container"> <fileForm></fileForm> //<--- THE COMPONENT B </div> </div> </div> </template> <script> export default { name: "DashBoard", data() { return { user: {}, }; }, methods: { checkIfImLoggedIn() { } }, onComplete() { }, }, mounted() { this

问题 Problem I have a BaseFormControl component which accepts id prop. It sets id prop value as both for attribute value on <label> element and id attribute value on a given input. As I want BaseFormControl to be a generic component re-usable with various input types, I pass the input as a slot. The code for the component below: <script> export default { props: { id: { type: String, required: true } } }; </script> <template> <div> <label :for="id"> <slot name="label" /> </label> <slot name="input"