Vue.js

问题 I expect that currentSelectionViewContent will be re-computed each time when selectedOptionsIndexes has changed. Really, sometimes it works, sometimes - not. import { Component, Prop, Vue, Watch } from "vue-property-decorator"; @Component({ template }) export class SelectField extends Vue { private onNewOptionSelected(newOption: SelectField.Option, indexInArray: number): void { console.log("~~~~~~~~~~~~~~~"); console.log(JSON.stringify(this.selectedOptionsIndexes, null, 2)); this

问题 Let's suppose I have a Vuetify list with 2 v-list-group, each one containing a v-list-tile. Here is a simplified pseudo-code: - Group1 - Item 1 :to='/item1' - Group2 - Item 2 :to='/item2' My list works fine : if I click on "Item1", vue-router goes to "/item1". Conversely, when I go to some route '/item1' (by typing the URL for example) and Group1 is closed in the list, is it possible to make Group1 to automatically open in the list? Do I have to watch route and use v-list-group.value to set

问题 I am frontend developer so for the first time I got my hands on vue and graphql, I don’t know how exactly to deal with this error: Missing getMovies attribute on result {movies: Array(20)} Here is my code, and I can see the data is fetched successfully in the response on dev tools in chrome: {"data":{"movies":[{"__typename":"Movie","id":11,"overview": Here is the code: <template> <div class="hello"> <ul> <li v-for="movie in movies" :key="movie.id">{{movie.title}}</li> </ul> </div> </template>

问题 I am frontend developer so for the first time I got my hands on vue and graphql, I don’t know how exactly to deal with this error: Missing getMovies attribute on result {movies: Array(20)} Here is my code, and I can see the data is fetched successfully in the response on dev tools in chrome: {"data":{"movies":[{"__typename":"Movie","id":11,"overview": Here is the code: <template> <div class="hello"> <ul> <li v-for="movie in movies" :key="movie.id">{{movie.title}}</li> </ul> </div> </template>

问题 I have a Vuejs component with Vuetify and pug. .moreQuestion__wrapper v-expansion-panel.moreQuestion__wrapper-panel v-expansion-panel-content(v-for="(question, i) in questions" :key="i" expand-icon="arrow_drop_down") <template v-slot:header> .moreQuestion__wrapper-slot {{ question }} </template> v-card v-card-text.moreQuestion__wrapper-text {{ content }} What the main problem - I've to override padding-right for v-expansion-panel__header. What the main problem - I've to override padding-right

问题 Here's my problem: I have a v-for loop on a component. The v-for loop is based on an array filtered by a search term entered in an input and returned by a computed. The child component displays some data based on a copy of past props because I need to modify them. The filtering works well but the content of the child components doesn't update correctly, being based on a copy of the props. Here is a minimalist example: https://codesandbox.io/s/friendly-engelbart-8iu4u?file=/src/App.vue You can

问题 Let me restate my question. I have a vue.js app that uploads a json file to a bucket in my firebase storage. I need to download the file to use in my app but when I try to download a json file from firebase storage I get a "Uncaught (in promise) undefined" error. What I would like to do is download the file back into an object to use in my app Here is my code to download and read the file: const storage = firebase.storage() const storageRef = storage.ref() const objectRef = storageRef.child(

问题 The default style for the p tag on my page has some bottom margin. My component uses p tags, and accordingly, the p tags in my component text show the corresponding bottom margin. How can I override/define new css style for the p tags in my component. I define my component like this: Vue.component ('activity-component', { props: { customer_id:{}, is_admin:{}, isAdmin:{}, isKitsActionplan:{}, .... template: `<div class="row msDashboard-box" style="cursor:default;padding-top:12px; padding

问题 The default style for the p tag on my page has some bottom margin. My component uses p tags, and accordingly, the p tags in my component text show the corresponding bottom margin. How can I override/define new css style for the p tags in my component. I define my component like this: Vue.component ('activity-component', { props: { customer_id:{}, is_admin:{}, isAdmin:{}, isKitsActionplan:{}, .... template: `<div class="row msDashboard-box" style="cursor:default;padding-top:12px; padding

问题 I'm not sure if this can be done, but I would like to format some dynamically created columns based on a property. If the item does not have that property, I would like it to fall back to the default behavior. Below is an example of what I'm trying to do (though the syntax is incorrect since you can't do item.type === foo in the template <v-data-table :item="items" ... > <template #[`item.type === 'foo'`]="{ item } "> // Do a special format for any items that have a type of foo </template> <