vue-component

问题 I have a add-user.vue component. It is my template for adding a new user and editing a existing user. So on page load I check if route has a id , if so I load a user from a state array to edit it. My issue is that user is undefined because the state array users is empty. How can I ensure that my user object isn't undefined. It does load sometimes but on refresh it doesn't. I thought I had it covered but nope. This is my setup. What am I missing here? Store state: { users: [] }, getters: {

问题 I know the solution is update the prop data like this : this.selectedContinent = "" But I want to use another solution After I read some reference, the solution is : this.$forceUpdate() I try it, but it does not work Demo and full code like this : https://jsfiddle.net/Lgxrcc5p/13/ You can click button test to try it I need a solution other than update the property data 回答1: You have to assign a key to your component. When you want to re-render a component, you just update the key. More info

问题 I have a v-for loop that is going to spit out multiple rows of inputs that I would like to save each separate row to an array object dynamically. v-for: <table class="table m-0"> <tbody> <tr v-for="fund in defaultFunds"> <td> {{fund.name}} <b-input v-model="newEntries[fund.id]['id']" :value="fund.id" name="entryFund" type="text" class="d-none" :key="fund.id" /> </td> <td> <b-input v-model="newEntries[fund.id]['amount']" name="newFundAmount" id="newFundAmount" type="text" placeholder="Amount"

问题 I have the following vue component: <template> <div class ="container bordered"> <div class="row"> <div class="col-md-12"> <CommitChart :data="chartOptions"></Commitchart> </div> </div> </div> </template> <script> import CommitChart from './CommitChart'; export default { data() { return { chartOptions: { labels: ['pizza', 'lasagne', 'Cheese'], datasets: [{ label: '# of Votes', data: [12, 19, 3], backgroundColor: [ 'rgba(10, 158, 193, 1)', 'rgba(116, 139, 153, 1)', 'rgba(43, 94, 162, 1)', ],

问题 I am using Vue and suddenly some of the computed css using vuetify is not working. The way I declare an object is personal_info : {} and in my template, I could just do personal_info.name and other more in every v-model of text input. I have no errors but suddenly the vuetify has a class called input-group--dirty that will elevate the label of the text input whenever it's not empty. But suddenly, it's not working. It looks like this: As you can see, the text and label are overlapping. The

问题 As from the Vue Docs: In Vue.js, every Vue instance is a ViewModel. I am a little confused about that after reading so many articles on the design pattern like MVC, MVP, and MVVM. We all know that in the Vue instance or Vue component (which is also a Vue instance), we have the <template> , which use HTML-based Syntax. Is the part not the View in MVVM? And there are data() , computed in Vue component. Are they not the Model in MVVM? Below is the structure of a Vue SFC, which I divide into

问题 I follow this tutorial : https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication It to passing data from a component to other component See my case below. I try like that My view is like this : <div class="row"> <div class="col-md-3"> <search-filter-view ...></search-filter-view> </div> <div class="col-md-9"> <search-result-view ...></search-result-view> </div> </div> My search-filter-view component is like this : <script> export default{ props:[...], data(){ return{ ... } }

问题 I know how to remove a list item from a Vue instance. However, when list items are passed to Vue components, how to remove a list item while keeping the components in sync with the list data? Here is the use case. Consider an online forum with a Markdown editor. We have a Vue instance whose data are a list of saved comments fetched from a server. These comments are supposed to be written in Markdowns. To facilitate edits and previews, we also have a list of components. Each component contains

问题 I have a v-data-table and I'm trying to add pagination to it. I've followed the example docs here I can't see what I'm doing wrong. When my component is created it makes a call to my backend to populate a list of items. Then this is passed to the data table. I also have a search bar and if I enter anything in it the page numbers pop up then. HTML <v-data-table :headers="headers" :items="incidents" :search="search" :pagination.sync="pagination" hide-actions class="elevation-1" item-key=

问题 I'm fairly knew to Vue and the whole v-bind thing is throwing me for a loop... Basically, I'm trying to achieve this syntax, but with Vue's v-bind, since I can't use a variable in an inline CSS style: <div class="card" style="background-color: {{school.color}}"> Here's my Vue syntax, which I've followed from their documentation, but it's still throwing an error and I can't figure out why? Obviously, it has to be something simple, I just don't fully understand the intricacies of Vue yet! <div