how to loop on vue js

Question

im new to vue js

usually passing the variable to blade with @foreach

i have a joined table like this

so, there could be multiple ref_contract_id

i've tried with v-for, but only 4 blank rows appeared

here's my vue

<tr v-for="material in getmaterial">
<td></td>
<td>{{ material.product_name }}</td>
<td>{{ material.qty }}</td>
<td>{{ material.price }}</td>
<td>{{ material.budget }}</td>

export default {
  props: ['getmaterial'],
  data() {
    return {
      module_url: `${this.$root.base_url}/supplier-comparison`,
      forms: {
        action: {          
          quotation_no: '',
          project_code: '',
          rof_code: '',
          submit: 'Create',
        }
      },
    }
  },

The v-for directive is the proper way to iterate. What have you done to verify the value of the getmaterial prop? — chash
– chash, Commented Jul 7, 2020 at 15:20
@hmm i put getmaterial in prop because thats when im trying to check if the variable is passed without loop — double d
– double d, Commented Jul 7, 2020 at 15:26
How many records you have on this table? Also share you database query and how you are fetching data from vue js. — livreson ltc
– livreson ltc, Commented Jul 7, 2020 at 15:32

mechanicalsheep · Accepted Answer · 2020-07-07 22:15:24Z

2

Make sure 'getmaterial' has any data by consol.log(this.getmaterial) it on mount (or in a method) in the script section or adding it in the template as {{getmaterial}}.
With v-for, always use a key <tr v-for="(material, index) in getmaterial" :key="index">

V-for needs a unique key Id while iterating and index will provide the current index as an id

Hope this helps!

answered Jul 7, 2020 at 22:15

mechanicalsheep

2521 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to loop on vue js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related