vue-component

问题 i added multiselect component which looks like this View <multiselect :options="books" :selected="selectedBook" :show-labels="false" placeholder="Choose your book" label="name"> <span slot="noResult">No books were found</span> </multiselect> Script <script> export default { data() { return { books: [], selectedBook: null, } }, created() { this.getBooks(); this.getFav(); }, methods: { getBooks() { this.$http .get('/books/') .then( function(response) { this.books = response.json(); } ); },

问题 What I'm trying to do is seemingly simple, but I can't seem to figure it out. Basically, I have 2 files: A PHP file with the following: ... <user-panel v-if="user.id && loaded" v-bind:user="user" v-bind:name="theUserName"></user-panel> ... A .Vue component file with the following (that gets compiled into another file): <template> <span id="userPanel" class="d-flex align-items-center"> <a href="#" role="button" class="user-dropdown-toggle"> <div class="logged-in d-flex align-items-center">

问题 I am trying to watch and wait until Vue router guard will get final value from Vuex however it throws [vuex] store.watch only accepts a function Here is the code: const isAdmin = _.get(store, 'getters.user/isAdmin', undefined) if (to.matched.some(record => record.meta.isAdmin)) { if (isAdmin === undefined) { const watcher = store.watch(isAdmin, isAdmin => { watcher() // stop watching if (!isAdmin) next({ path: '/not-available' }) }) } else if (serv.isAuth() && !isAdmin) { next({ path: '/not

问题 I am trying to watch and wait until Vue router guard will get final value from Vuex however it throws [vuex] store.watch only accepts a function Here is the code: const isAdmin = _.get(store, 'getters.user/isAdmin', undefined) if (to.matched.some(record => record.meta.isAdmin)) { if (isAdmin === undefined) { const watcher = store.watch(isAdmin, isAdmin => { watcher() // stop watching if (!isAdmin) next({ path: '/not-available' }) }) } else if (serv.isAuth() && !isAdmin) { next({ path: '/not

问题 I have in my main component one custom component and I need to fire a custom event on click, I tried it in this way: <child-component @click="fireCustomEvent"></child-component> This does not work and I tried to solve this problem with adding @click.native <child-component @click.native="fireCustomEvent"></child-component> With .native it works but it fires the event every time if I click inside my "child-component". Can I avoid somehow to fire this event again if I click inside "child

问题 I've just started working with Vue.js and learning it through some online code snippet and tutorials. I'm trying to implement internationalization support for my vue project, but I'm getting error in web-console. Here are my code snippets main.js import { createApp } from 'vue'; import App from './App.vue'; import VueI18n from 'vue-i18n' import router from './router/index' function loadLocaleMessages () { const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i) const

问题 I've just started working with Vue.js and learning it through some online code snippet and tutorials. I'm trying to implement internationalization support for my vue project, but I'm getting error in web-console. Here are my code snippets main.js import { createApp } from 'vue'; import App from './App.vue'; import VueI18n from 'vue-i18n' import router from './router/index' function loadLocaleMessages () { const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i) const

问题 Is there a reliable way to check if an object is a Vue.js component? 回答1: You can use instanceof, as following code: var isVueComp = vuecomp instanceof Vue If it isVueComp is true, it is a Vue.js componeny otherwise not. You can also use vuecomp.prototype.constructor, which will return reference to the Object constructor function that created the instance object. Check this fiddle. 回答2: Like Saurabh wrote, instanceof is probably the best way to be sure. However, in case you don't want to

问题 I want to add count down timer to my vue component. I have found a script which is written in normal JavaScript. this is my JavaScript file. var upgradeTime = 7200; var seconds = upgradeTime; function timer() { var days = Math.floor(seconds/24/60/60); var hoursLeft = Math.floor((seconds) - (days*86400)); var hours = Math.floor(hoursLeft/3600); var minutesLeft = Math.floor((hoursLeft) - (hours*3600)); var minutes = Math.floor(minutesLeft/60); var remainingSeconds = seconds % 60; if

问题 Using plain HTML/JS, it is possible to view the JavaScript File objects of selected files for an input element like so: <input type="file" id="input" multiple onchange="handleFiles(this.files)"> However, when converting it to the 'Vue' way it doesn't seem to work as intend and simply returns undefined instead of returning an Array of File objects. This is how it looks in my Vue template: <input type="file" id="file" class="custom-file-input" v-on:change="previewFiles(this.files)" multiple>