vue-component

问题 I am moving Vue components up in the dom if I am on mobile since I want to use positioning absolute and want to make sure I am not within a relative container. if (this.mobile) { this.$el.parentNode.removeChild(this.$el); document.getElementById('vue').appendChild(this.$el); } else { // Place the element back at it's original location. } This code is placed with a debounced resize method so it also works on resizing of the window. It works fine but when I start out on mobile and resize back

问题 I have two components, one contains another. And when I trigger event from child I can't receive it in parent. Child component this.$emit('myCustomEvent', this.data); Parent component <parent-component v-on:myCustomEvent="doSomething"></parent-component> But, when I changed event name to my-custom-event in both places it works. Vue somehow transform event names? Or what can be a problem? I read docs about component naming convention but there nothing related to event naming 回答1: It is

问题 I have been asked to make a User Registration From for "X" Website. This X website's Admin Want to manage this from field And do the Following operations: Adding Fields and validation. Sorting the fields. when the end user Open the Registration page the Fields changes as the admin edited is this doable with angular 6 or any library like such? 来源： https://stackoverflow.com/questions/53140829/adding-dynamic-from-fields-that-changes-the-fields-sorting-and-validation-at-r

问题 For example, I have import a component named <pic-upload> in the template, like <template> <pic-upload></pic-upload> </template> export default { data: () => ({ show: { content: '', recommend: false, albums: [] } }), components: { picUpload }, methods: { submit: function () { dataService.postpic(this.show).then(() => { this.$toast({ message: 'success' }) }) } } } and in the <pic-upload> component, it returns data and a method like: // pic-upload component export default { data () { return {

问题 I have app with couple components. I use Vuex to store data so I could use it in different components. Now I need to render some divs using v-for. I do as follows: VueX/Modules/shows.js const state = { shows: [ { name: 'Hard Luck', venue: 'The Venue', time: '6:00 pm' }, { name: 'Hard Luck', venue: 'The Venue', time: '6:00 pm' } ] } export default { state } Component where I need to use data: <template> <div class="dashboard__details dashboard__details--shows" v-for="show in shows"> <h3 class=

问题 When using the vue-router with .vue files, there is no documented way to pass data from one view/component to another. Let's take the following setup... main.js : import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); let routes = [ { path: '/page1', component: require('./views/Posts.vue') }, { path: '/page2', component: require('./views/EditPost.vue') } ]; let router = new VueRouter({ routes }); new Vue({ el: '#main', router }); Posts.vue : <template> <div> Posts.vue

问题 I used vue-cli to create sample project vue init webpack my-test3 , and opted for including both e2e and unit tests. Question 1: Based on documentation for template filters I tried to add new filter as such in main.js : import Vue from 'vue' import App from './App' /* eslint-disable no-new */ new Vue({ el: '#app', template: '<App/>', components: { App }, filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice

问题 I have this component: <template> <div class="modal fade modal-primary" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="ImageLabel" aria-hidden="true"> <div class="modal-dialog modal-lg animated zoomIn animated-3x"> <div class="modal-content"> <ais-index index-name="templates" app-id="BZF8JU37VR" api-key="33936dae4a732cde18cc6d77ba396b27"> <div class="modal-header"> <algolia-menu :attribute="category" :class-names="{ 'nav-item__item': 'nav-color', 'nav-item__link': 'nav-link',

问题 Is there a way to listen to a Vuex commit without watching any of the properties that are changed with the commit? Just simply finding out if a commit has happened? I have a Filter component that I want to put into a NPM package but I already have a use case where I would want to set a cookie storing the filter preferences whenever a filter is selected. Obviously it is not the responsibility of the filter component to set cookies etc. and this is something that should be optional. I guess one

问题 I have integrated intercom in my app and I need to call window.Intercom('update'); every-time my url changes. I know I could add it on mounted() but I rather not modify all my component and do it directly using the navigation guards. (Mainly to avoid to have the same code in 10 different places. At the moment I have: router.afterEach((to, from) => { eventHub.$off(); // I use this for an other things, here is not important console.log(window.location.href ) // this prints the previous url