vue-component

问题 I'm trying to migrate the following browserify workflow into a single gulp task: package.json: "scripts": { "build": "browserify src/main.js > dist/build.js" }, ... "browserify": { "transform": [ "vueify", "babelify" ] } .babelrc file: { "presets": ["es2015"] } Since gulp-browserify is now longer maintained, I used this recipe to get the whole workflow into a single gulp task: gulp.task('build', function () { var b = browserify({ entries: './src/main.js', debug: true, transform: [vueify,

问题 I want to add maps in my app on VueJS. As it descriped in manual I wrote in HEAD: <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script> Then in App-component I did: <template> <div id="app"> <img src="./assets/logo.png"> <router-view></router-view> <div id="map" style="width: 600px; height: 400px"></div> </div> </template> <script> export default { name: 'app', created () { var map = new ymaps.Map("map", { center: [55.76, 37.64], zoom: 7 }); } } </script>

问题 I want to store html inside variable. Example: data: function() { return { my_html: '<input type="text" v-model="data"' } } And I want to receive in data the value that user enters in the field. But this connection does not work Full example: var test = new Vue({ el: '#some_id', data: function() { return { data: '', my_html: '<input type="text" v-model="data" />' } }, template: '<div> <input type="text" v-model="data" /> <input type="text" v-model="data" /> <span v-html="my_html"></span> <

问题 My routes has the following structure divided into several files: export const router = new VueRouter({ mode: 'hash', base: __dirname, saveScrollPosition: true, history: true, routes : Array.concat(userRoutes, siteRoutes) }) ... // user/routes.js export const userRoutes = [ { path: '/user', name: 'user_main', component: UserMain, meta: {authRequired: true}, children: Array.concat([ ... ], accountRoutes) } ] // account/routes.js export const accountRoutes = [ { path: 'account', name: 'user

问题 I have an component that I want to use on different pages. Well, it is working well till the first toggle. It shows like it used to, but when I click the 'Close' button, it closes, but console outputs : [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "visible" found in ---> at src/components/Snackbar.vue at src/views/Login.vue And

问题 I have a component in vue, I wish to toggle a class on the body on click. How can I do this? Would I just have to use JS to target the body and add a class? Or is there more of a vue way? For context I need to add a no scroll class to the body to prevent scrolling for an overlay menu. 回答1: I think that reactive binding to the body is generally frowned upon. See this forum response by Vue team member and the article he links to. This makes me think there is not a "vue way" to change the body's

问题 I have a component in vue, I wish to toggle a class on the body on click. How can I do this? Would I just have to use JS to target the body and add a class? Or is there more of a vue way? For context I need to add a no scroll class to the body to prevent scrolling for an overlay menu. 回答1: I think that reactive binding to the body is generally frowned upon. See this forum response by Vue team member and the article he links to. This makes me think there is not a "vue way" to change the body's

问题 I'm passing an array of image filepaths to a component. I'm wondering what would be the best way to watch a prop change in Vue.js component, if I pass a different array? I'm using bootstrap carousel, so wanna reset it to first image when array changes. In order for simplicity I reduced code example to this: Vue.component('my-images', { props: ['images'], template: ` <section> <div v-for="(image, index) in images"> {{index}} - <img :src="image"/> </div> </section> ` }); 回答1: <template> <div> {

问题 I have a vue component that shows a form populated with items from a selected item to edit. Now I don't want to have to use a second form for creating a new item. At the moment I auto populate and update the item with v-model which obviously updates the object. Am I not able to use conditional operators in this like so? <form @submit.prevent> <div class="field"> <label class="label">Job Title</label> <p class="control"> <input type="text" class="input" placeholder="Job title" v-model=

问题 I am building a Vue JS SPA, and have a Vuetify data-table inside of the v-app. I am trying to set a variable inside the watch object for the filteredItems computed property inside the data-table but I am unsure of how to access the $refs array inside the instance. I know that the data is accessible within the instance by using: this.$refs['prospectsTable'].filteredItems However the same reference name does not work within the watch object. I have tried: $refs['prospectsTable'].filteredItems: