vuejs2

问题 I created a simple app using some Vue components and a Bootstrap component (carousel). I compile my assets using Laravel Mix. When I put the compiled app.js between the head tags, my Vue components do not work ( Cannot find element: #app ). When I put the app.js just before the </body> tag, my carousel (the indicators) does not work ... I also tried with the defer attribute, but no success. Do I have to split my JavaScript-files to make both work? Edit: When I put my asset just before the <

问题 I have created login page. router intercepting the request and validates the user is authenticated or not . store is maintaining the user is logged in or not. while debugging i am getting in auth.js "store is not defined" I also tried relative path instead of @ in imports. router code snippet import auth from '@/services/auth'; ... router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requiresAuth)) { if (!auth.loggedIn()) { next({ path: '/login', }); } else { next

问题 may anyone help. Is it possible to show some DOM element when route pat changes. Code <div> <router-link v-if="$router.history.current['path'] !=='user/config'" class="btn btn-fill btn-default" tag="button" to="/user/config">Change Config </router-link> </div> It works, but only when refreshing a page, how to listen to event of $router.history.current['path] changed? Full component code: <template> <card class="card-user"> <img slot="image" src="https://ununsplash.imgix.net/photo

问题 I'm trying to use Vuex as shown in the application structure documentation. However, $store isn't showing in Vue dev tools and returning undefined in my code. I've used the shopping cart example as a reference. import Vue from 'vue/dist/vue'; import store from './store'; import router from './router'; const app = new Vue({ el: '#app', store, router, computed: { loading() { return this.$store.state.application.loading.active; } } }); In store/index.js (following the example layout) I have:

问题 Recently i migrated our vue.js2.x project to typescript, and based on evan-you's comment in this issue: https://github.com/vuejs/rfcs/pull/17#issuecomment-494242121 The Class API proposal is being dropped. so i'm using regular option based version of vue.js which it faced me with alot of type problems. I want to know is vuejs2.x composition api fully compatibile with typescript? and should i use it to solve all the problem? what is the best practice to do here in this situation? 回答1: I'm

问题 Let's say I have CountrySelect and CitySelect , where in CountrySelect are listed all countries and in CitySelect are only listed those cities of currently selected country... What would the proper way to pass newly selected country. As I have read in vuejs documentation: In Vue, the parent-child component relationship can be summarized as props down, events up. The parent passes data down to the child via props, and the child sends messages to the parent via events. Let’s see how they work

问题 I am trying to push data from a v-text-field onto a json file. When i tried it on Postman it worked so I'm guessing the error is coming from the client side product.vue <v-container> <v-row> <v-col> <v-text-field label="440" v-model="onetext" ></v-text-field> <v-text-field label="Card Type" v-model="twotext" ></v-text-field> <v-text-field label="Card Type" v-model="threetext" ></v-text-field> <v-text-field label="Card Type" v-model="fourtext" ></v-text-field> <v-text-field label="Card Type" v

问题 I would like to create a Vuetify table with nested data. The problem is that v-slot:item doesn't seem to work with nested data. This is my code: https://codepen.io/blakex/pen/XWKWjaE <v-data-table :headers="headers" :items="desserts"> <template v-slot:item.calories="{ item }"> <td>Slot works: {{ item.calories }}</td> </template> <template v-slot:item.nested.nestedCalories="{ item }"> <td>Nested slot works: {{ item.nested.nestedCalories }}</td> </template> </v-data-table> data () { return {

问题 I would like to create a Vuetify table with nested data. The problem is that v-slot:item doesn't seem to work with nested data. This is my code: https://codepen.io/blakex/pen/XWKWjaE <v-data-table :headers="headers" :items="desserts"> <template v-slot:item.calories="{ item }"> <td>Slot works: {{ item.calories }}</td> </template> <template v-slot:item.nested.nestedCalories="{ item }"> <td>Nested slot works: {{ item.nested.nestedCalories }}</td> </template> </v-data-table> data () { return {

问题 I need to create a validation that prevent the user from inputting numeric inputs on a textbox. I found some solution using a native javascript but it is not working on my side. On my text box I have this trigger v-on:keyup="preventNumericInput($event)"> And on my Vue I created a function on my class preventNumericInput($event) { console.log($event.keyCode); //will display the keyCode value console.log($event.key); //will show the key value var keyCode = ($event.keyCode ? $event.keyCode :