vue-component

问题 I am working with vuex (2.1.1) and get things working within vue single file components. However to avoid too much cruft in my vue single file component I moved some functions to a utils.js module which I import into the vue-file. In this utils.js I would like to read the vuex state. How can I do that? As it seems approaching the state with getters etc is presuming you are working from within a vue component, or not? I tried to import state from '../store/modules/myvuexmodule' and then refer

问题 My component vue is like this : <template> <select class="form-control" v-model="selected" :required @change="changeLocation"> <option :selected>Choose Province</option> <option v-for="option in options" v-bind:value="option.id" >{{ option.name }}</option> </select> </template> I use this : <option :selected>Choose Province</option> to selected But whene executed, on the gulp watch exist error The error like this : ERROR in ./~/vue-loader/lib/template-compiler.js?id=data-v-53777228!./~/vue

问题 I have a List component where I fetch my date from db/blogs.json : created() { fetch('http://localhost:3000/blogs') .then(response => { return response.json(); }) .then(data => { this.blogs = data; }) }, In my BlogDetail.vue I have: <script> export default { data: () => { return { blogId:this.$route.params.id } }, computed: { blog() { return this.blogs.find( blog => blog.id === this.blogId ) } } } </script> But how do I get the blogs data in this component, which I fetched in the List

问题 We're trying to convert a simple SFC to use the new Vue CompositionAPI. This code works flawless: export default { data() { return { miniState: true } }, methods: { setMiniState(state) { if (this.$q.screen.width > 1023) { this.miniState = false; } else if (state !== void 0) { this.miniState = state === true } else { this.miniState = true } }, }, watch: { '$q.screen.width'() { this.setMiniState() } } }; Converting this to the new CompostionAPI looks like this: export default defineComponent({

问题 In Vue JS, I'm unable to watch for changes to an array when changes are made within an array element's (child's) computed Property. I've boiled down the issue in a sample JSFiddle I wrote, so the example may not make sense logically but it does show my issue. https://jsfiddle.net/trush44/9dvL0jrw/latest/ I have a parent component that holds an array of colors. Each color is rendered using a child component. The child component has a computed Property called 'IsSelected'. When the 'IsSelected'

问题 I can successfully add a class on mouseover with Vue. But I want to remove the class when the mouse leaves the element. What is the idiomatic way of handling this in Vue? <template> <div id="navigation"> <div class="nav-container"> <nav> <router-link to="/" class="home">Ping Party</router-link> <div class="navigation-actions"> <router-link to="/sign_in" v-if="!isLoggedIn" class="sign_in">Sign In</router-link> <router-link to="/sign_up" v-if="!isLoggedIn" @mouseover.native="mouseOver" class=

问题 I'm in the process of rewriting some older code, and using Vue as the replacement. It's all going great apart from changing one table that is templated using handlebars. Using handlebars nested {{each}} I can work down through the nested data structure while displaying the relevant data in table rows: e.g. using handlebars: https://jsfiddle.net/6dsruo40/1/ I cant figure out how to do the same using Vue with v-for etc. Fiddle with as mush as I have: https://jsfiddle.net/cj7go6bv/ I don't know

问题 I made a BlogList.vue component which list all the blog teasers. I made a search box in the BlogList.vue component: <input type="text" placeholder="Enter key word" v-model="search"> With a computed property I build the search filter based on what the user types in the search field: computed: { getfilteredData() { return this.experiences.filter(experience => experience.name.toLowerCase().includes( this.search.toLowerCase() ) ) } }, This all works fine. But I like to move the search box to a

问题 I made a BlogList.vue component which list all the blog teasers. I made a search box in the BlogList.vue component: <input type="text" placeholder="Enter key word" v-model="search"> With a computed property I build the search filter based on what the user types in the search field: computed: { getfilteredData() { return this.experiences.filter(experience => experience.name.toLowerCase().includes( this.search.toLowerCase() ) ) } }, This all works fine. But I like to move the search box to a

问题 I'm using the VuetifyJs for VueJS and I'm trying to display checkbox in table format from an array of objects. Desired Output shown below : When 'All Users' is checked all the checkboxes should be checked. I created a row layout and divided this row into two flex boxes so I have the structure of row with two columns. I loop using 'v-for' and for every row display the value of the current index and the next index. But the last entry is repeated the next time the loop is iterated. The closest I