v-for

问题 I'm using Vue Js and I have a nested array like this: arrays: [ { name: 'Max', Info: [60, 75, 70, 85, 65], }, { name: 'Dave, Info: [70, 95, 60, 65, 83], }, ] I have a user profile box that displays name and info for each user. <div class="outer" v-for="(item, index) in arrays" :key="item.id" v-bind:id="item.name"> I would like to display info in template: <div class="box c" >Info<span v-for="info in item.Info">{{info}}</span></div> When I did this it showed the correct array for the correct

问题 I'm looking for something like the code below to display a list of topics from the array right under the box where user adds them. (newest on top) I know I can unshift instead of pushing to change the order topics are stored in the array but is there a way to keep the original array order and just reverse the displayed topics without triggering the "[Vue warn]: You may have an infinite update loop in a component render function."? <div class="field add-topic"> <label for="add-topic">Add a

问题 I am trying to access the index of an iteration in Vue's v-for binding. This is the object: const obj = { obj1: { some: 'data' }, obj2: { some: 'data' }, obj3: { some: 'data' } } and I'm looping over it: <li v-for="(object, index) in obj" :key="index">{{ object.some }}</li> The problem is that contrary to looping over an array the index variable in case of looping over an object like this does not hold the iteration index (e.g. 0 , 1 , 2 ) but actually holds the object name obj1 , obj2 , obj3

问题 I am trying to access the index of an iteration in Vue's v-for binding. This is the object: const obj = { obj1: { some: 'data' }, obj2: { some: 'data' }, obj3: { some: 'data' } } and I'm looping over it: <li v-for="(object, index) in obj" :key="index">{{ object.some }}</li> The problem is that contrary to looping over an array the index variable in case of looping over an object like this does not hold the iteration index (e.g. 0 , 1 , 2 ) but actually holds the object name obj1 , obj2 , obj3

问题 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 am trying to delete the current item on click, but when i run it it deletes only the last item. I'm going crazy, on another component I did the same thing and it worked...I don't know why here! This is the code, I am using various libraries... <template> <div class="hours-container"> <div class="hours" v-for="(time, index) in hour" :key="index"> <a-time-picker :default-value="moment('08:00', 'HH:mm')" format="HH:mm" :minute-step="15" :allowClear="allowClear" /> <span> to </span> <a-time

问题 I am trying to delete the current item on click, but when i run it it deletes only the last item. I'm going crazy, on another component I did the same thing and it worked...I don't know why here! This is the code, I am using various libraries... <template> <div class="hours-container"> <div class="hours" v-for="(time, index) in hour" :key="index"> <a-time-picker :default-value="moment('08:00', 'HH:mm')" format="HH:mm" :minute-step="15" :allowClear="allowClear" /> <span> to </span> <a-time

问题 I want :value to change from inputValue.start to inputValue.end automatically. So when I click on the end date it should be updated in the second text field. Likewise, if I select a date range in the second text field, the first text field should also be updated again. At the end of this question you can see the result of both cases. P.S.: I use the V-Calendar plugin for Vue.js. The vc-date-picker element is from this plugin. HTML: <v-col v-for="(dateF, date_id) in datesF" :key="date_id + 'A'

问题 Result of my query from controller date: {2020-09-24: {work_hours: 7}, 2020-09-30: {work_hours: 8}} 2020-09-24: {work_hours: 7} 2020-09-30: {work_hours: 8} This is my vue I'm trying to nested for loop but I'm getting double the result of looping <table class="table table-hover table-bordered table-sm" > <thead> <tr> <template v-for="disp in iDate.slice(1)"> <th scope="col" v-if="toWordDay(disp.date) == 'Sunday'" style="color:red">{{disp.date | forThDate}}</th> <th scope="col" v-else>{{disp

来源： https://stackoverflow.com/questions/64208173/images-cant-be-displayed-with-v-bind-in-v-for-loop