vue-component

问题 I am able to register a custom vue.js component with // register Vue.component('my-component', { template: '<div class="my-class">A custom component!</div>' }) Also see https://vuejs.org/v2/guide/components.html How can I include css classes for my component? I would expect something like Vue.component('my-component', { template: '<div class="my-class">A custom component!</div>', css: '#... my css stylesheet...' }) but there does not seem to be a css option. I know that I could a) define all

问题 I am very new to Vue js and I am now trying to output all the users in a table by fetching them with an ajax call. I get the users with no issue but then when I try to set the data.user with the new data I get an error saying the property or method users is not defined. This is my user list components: <template> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="panel panel-default"> <div class="panel-heading">List of users</div> <div class="panel

问题 I'm creating a small timer Vue component. A user needs to be able to start and stop that timer. Here's my component thus far: <template> <div> <a class="u-link-white" href="#" @click="toggleTimer"> {{ time }} </a> </div> </template> <script> export default { props: ['order'], data() { return { time: this.order.time_to_complete, isRunning: false, } }, methods: { toggleTimer() { var interval = setInterval(this.incrementTime, 1000); if (this.isRunning) { //debugger clearInterval(interval);

问题 I have created a component like this: <template> <span class="my-icon"> <img :src="iSrc" :alt="iname"/> </span> </template> <script> export default { props: ['iname'], computed: { iSrc() { return require('../../../assets/images/' + this.iname + '.png') } } } </script> Using it inside a page like this: <template> <div> <h3>Share it:</h3> <social-sharing inline-template network-tag="a"> <div class="my-icons"> <network network="facebook" class="fb-icon"> <icon name="fb" /> </network> </div> <

问题 I am struggling for this to work. I need to access the selected value in the ChooseLangComponent from the FormComponent. Is there any direct way to do this or we have to pass it from the parent component (act like middle man)? I already tried with $emit on ChooseLangComponent and v-on:.. on FormComponent but didn't work. ChooseLangComponent: <template lang="html"> <div class="choose-lang"> <select v-model="selected"> <option v-for="lang in langs" v-bind:value="lang.value">{{lang.text}}<

问题 I'm new to VueJS. I'm trying to create a form with simple Save and Cancel functionality. When binding the model to form fields they get updated immediately as the inputs are changed, but I don't want that tight binding. Instead, I want to be able to save and submit when the "Save" button is pressed and revert the changes when the "Cancel" button is pressed. What's the suggested Vue way of doing this? It would also be ideal if we can show the server save status and indicate it on the form if

问题 I am working with a mid size project utilizing Vuejs as the front-end. The options I am exploring to encapsulate / separate the common methods which may be used in many components include mixins approach and plugin approach. Mixin Approach I have to write an import statement in each of the component (file) where I want to use the mixin methods. Does this increase the final file size as the mixin will be imported at multiple places? I can use this within the mixin methods. Plugin Approach I

问题 Could you please tell me how to share data between components in VUE js (while creating list).I have two components list components and add todo component .I want to add items in list when user click on add button .But issue is input field present in different component and list is present in different component here is my code https://plnkr.co/edit/bjsVWU6lrWdp2a2CjamQ?p=preview // Code goes here var MyComponent = Vue.extend({ template: '#todo-template', props: ['items'] }); var AddTODO =

问题 I want to make datetimepicker like this : https://vuetifyjs.com/en/getting-started/consulting-and-support. If you click "2 Hour Consulting Session", it will display datetimepicker like this : https://ibb.co/kHrbHTG. I want to make like that. But I don't find the component datetimepicker in the documentation. The docs : https://vuetifyjs.com/en/components/date-pickers Based on my analysis, it uses datepicker modal. not the datepimepicker. The timepicker is only customized using the outline

问题 I'm trying to use a data coming from a prop with v-model, the following code works, but with a warning. <template> <div> <b-form-input v-model="value" @change="postPost()"></b-form-input> </div> </template> <script> import axios from 'axios'; export default { props: { value: String }, methods: { postPost() { axios.put('/trajectory/inclination', { body: this.value }) .then(response => { }) .catch(e => { this.errors.push(e) }) } } } </script> The warning says: "Avoid mutating a prop directly