vuejs2

问题 How can we file input detect change on SAME file input in Vue Js <input ref="imageUploader" type="file" @change="uploadImageFile"> 回答1: We can add @click event and then clear the value of the file input <template> .... <input ref="imageUploader" type="file" accept=".jpg, .jpeg" @click="resetImageUploader" @change="uploadImageFile"> .... </template> <script> export default { methods: { resetImageUploader() { this.$refs.imageUploader.value = ''; }, uploadImageFile() { .... } } } </script> 来源：

问题 I am implementing unit test for a file that contain window.location.href and I need to check it. My jest version is 22.0.4 . Everything is fine when I run my test on node version >=10 But I get this error when I run it on v8.9.3 console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29 Error: Not implemented: navigation (except hash changes) I have no idea about it. I have searched on many page to find out the solution or any hint about this to figure out what happened here. [UPDATE] -

问题 I am running ESLint and I am currently running into the following ESLint error: error 'state' is already declared in the upper scope no-shadow const state = { date: '', show: false }; const getters = { date: state => state.date, show: state => state.show }; const mutations = { updateDate(state, payload) { state.date = payload.date; }, showDatePicker(state) { state.show = true; } }; export default { state, getters, mutations }; What would be the best way to fix this? 回答1: The best way to fix

问题 I'm working in a project with vue 2. I need to know in which case the performance is better: Use v-if or v-show?. I have a long list and each item's list has a form hidden that I need show and hide to click a button that has each item list. What is better a toggle class of v-show or add and remove the form with v-if? 回答1: tl;dr Assuming the question is strictly about performance: v-show : expensive initial load, cheap toggling, v-if : cheap initial load, expensive toggling. Evan You provided

问题 I would like to lazy-load a specific element of ElementUI in a Vue component. I tried this: import { Tree } from /* webpackChunkName : "element-ui" */ 'element-ui'; Vue.component(Tree.name, Tree); Vue.use(Tree); And this: { components: { 'el-tree': () => import(/* webpackChunkName : "element-ui" */ "element-ui").then(({Tree}) => Tree) } } But in both cases, the element-ui.js chunk file is not created, and the full library is inserted into the main.js file instead. How do I dynamically import

问题 I would like to lazy-load a specific element of ElementUI in a Vue component. I tried this: import { Tree } from /* webpackChunkName : "element-ui" */ 'element-ui'; Vue.component(Tree.name, Tree); Vue.use(Tree); And this: { components: { 'el-tree': () => import(/* webpackChunkName : "element-ui" */ "element-ui").then(({Tree}) => Tree) } } But in both cases, the element-ui.js chunk file is not created, and the full library is inserted into the main.js file instead. How do I dynamically import

问题 I would like to lazy-load a specific element of ElementUI in a Vue component. I tried this: import { Tree } from /* webpackChunkName : "element-ui" */ 'element-ui'; Vue.component(Tree.name, Tree); Vue.use(Tree); And this: { components: { 'el-tree': () => import(/* webpackChunkName : "element-ui" */ "element-ui").then(({Tree}) => Tree) } } But in both cases, the element-ui.js chunk file is not created, and the full library is inserted into the main.js file instead. How do I dynamically import

问题 While developing a Vue web component, the style is not applied to the web component, but added to the head of the document. This means that the style is ignored in the shadow DOM. Here is how I wrap the web component in main.js: import Vue from 'vue'; import wrap from '@vue/web-component-wrapper'; import MyWebComponent from './components/MyWebComponent'; const WrappedElement = wrap(Vue, MyWebComponent); window.customElements.define('my-web-component', WrappedElement); Again, any CSS rules

问题 Listen for custom events for the bus in component b. However, after dispatching events in component a, it accesses component b. the listening function of component b is executed, but msg of data function is not updated Please don't say Vuex . The relevant code is based on Vue CLi3 Here code: Component A: <template> <div> Component A <button @click="sendMsg">pushB</button> </div> </template> <script> import bus from './bus' export default { methods: { sendMsg() { bus.$emit('send', 'hello

问题 When I create a script as typescript (lang="ts") I get an error stating "Cannot find module './components/Navigation' or its corresponding type declarations (Vetur 2307).". I realized that this only happens when I set the lang as ts, which is what I need to build my Vue application. app.vue <template> <Navigation /> </template> <script lang="ts"> import Navigation from './components/Navigation'; // This is where I get the error message export default { name: 'app', components: { Navigation, }