vue-component

问题 I am using vuejs CLI version 3 and am building my library using this target in the package.json vue-cli-service build --report-json --target lib --name components src/appup-components.js This library uses lot of other external libraries like bootstrap-vue, axios and handlebars to name a few. My test program imports this library using npm install. The library building is painfully slow while building and it takes about 2 mins. Then starting the app server takes another 20-30 secs. The

问题 Just starting Vue.js and webpack. I'm trying to add vue-chartjs functionality to my project. I'm receiving the following error: Uncaught TypeError: _vueChartjs.Line.extend is not a function at Object.defineProperty.value (..\..\CommodityChart.vue:5) at __webpack_require__ (bootstrap 7040a42393b737f78245:659) at fn (bootstrap 7040a42393b737f78245:85) at Object.<anonymous> (CommodityChart.vue:3) at __webpack_require__ (bootstrap 7040a42393b737f78245:659) at fn (bootstrap 7040a42393b737f78245:85

问题 I have two component My first component like this : <template> <div> ... <form-radio id="gender" name="gender" :data="genderData" v-model="gender">Gender</form-radio> ... <button type="submit" class="btn btn-primary" @click="submit">Submit</button> </div> </template> <script> export default { data() { return { gender: null, genderData: [ {id: 1, label: 'Men', value:1}, {id: 2, label: 'Women', value:2} ], } }, methods: { submit() { console.log('submit profile') console.log(this.gender) } } } <

问题 I have two component My first component (parent component) like this : <template> <div> ... <form-input id="name" name="name" v-model="name">Name</form-input> <form-input id="birth-date" name="birth_date" type="date" v-model="birthDate">Date of Birth</form-input> <form-input id="avatar" name="avatar" type="file" v-on:triggerChange="onFileChange($event)">Avatar</form-input> <form-input id="mobile-number" name="mobile_number" type="number" v-model="mobileNumber">Mobile Number</form-input> ... <

问题 I'm making a list of tools. I'm trying to pass the full tool data object from the parent component (the tool list) to each child component (the tool items), using single file templates. In the child component, I get this error: Property or method "..." is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. Where ... is any property of the tool data object, for example title or description . Here's my setup: Tools.vue

问题 I'm using Vue-CLI and getting this error. It's found in the <comment> component. When the CommentForm's submitComment() method fires and adds the comment object to selfComments to be rendered out, the error occurs. It might be because they reference each other or something, but I'm not sure. I've attempted to include only relevant information: Edit: I think it's related to this: https://forum.vuejs.org/t/how-to-have-indirectly-self-nested-components-in-vue-js-2/1931 CommentForm.vue <template>

问题 I'm using Vue.js with TypeScript and the vue-property-decorator package. In theory I can do something like this, according to the documentation: import { Component, Inject, Provide, Vue } from 'vue-property-decorator' const s = Symbol('baz') @Component export class MyComponent extends Vue { @Provide() foo = 'foo' @Provide('bar') baz = 'bar' @Inject() foo: string @Inject('bar') bar: string @Inject(s) baz: string } However, what if I want to use @Provide and @Inject on a class that is not a

问题 I am using vue carousel https://ssense.github.io/vue-carousel/api/ It woks well but I need to resetthe carousel I can see there is a value of current page and I think setting this to 0 would work as a reset. However these seems to be no exposed method to allow me to do this. Can I set it from the parent? 回答1: If you want to set a data property on a child component, you can set a ref attribute on that child's tag and then access the child instance via this.$refs . In your case, you could add a

问题 This might be a stupid question but what the hell. I am using the vue-cli webpack-simple template, in the webpack config of this project I find the following: output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'build.js' }, No file is being built though. When running the webpack server I can access the file through the browser though. Is the build.js file only available when the webpack development server is running? Is this what defines runtime vs standalone ?

问题 For example: <component v-model='foo' :is='boo' ...> . foo 's value stays the same during input. I'm trying to solve the issue for quite a long time. I've checked lots of questions and threads but none of those helped me. HTML doesn't work: <component :is="field.component" :key="key" :name="field.name" v-for="(field, key) in integration_data" v-model="field.value" > </component> HTML works fine: <input :key="key" :name="field.name" v-for="(field, key) in integration_data" v-model="field.value