0

I'm new to Vue js and want to see if this proper coding practice. I am using v-for to loop through the objects but am not sure if this an antipattern. The first object is what i'd like to use to build the header colum. The next object(s) would be the item information. To clarify i am not sure if looping through an object this way is bad practice. I am looping through the first item to use the values as an index so that i can create rows for property in each object. 

        <thead>
              <tr >
                <th v-for="comparison in cartComparisons" class="flex-1 bg-gray-200 border-b border-white">
                  <a v-if="comparison.model.link" :href="comparison.model.link | ''">
                    {{comparison.model.name}}
                  </a>
                  <template v-else>{{comparison.model.name}}</template >
                </th>
              </tr>
            </thead>
            <tbody >
              <template v-for='(comparison,key,index) in cartComparisons[0]'>
                <tr v-if="index !== 0">
                     <td v-for="comparison in cartComparisons">
                        {{comparison[key]}}
                     </td>
                </tr>
              </template>
            </tbody>

    <script>
        export default{
            props:{
                product: Object,
            },

            data () {
                return {
                    cartComparisons: [ 
                      {
                        model: {
                          name: "Model", 
                        },  
                        price: 'Our Price', 
                        frame: 'Frame', 
                        frameTreatment: 'Frame Treatment', 
                        loadCapacity: 'Load Capacity',
                        folding: 'Folding', 
                        wheels: 'Wheels', 
                        straps: 'Straps', 
                        kickstand: 'Kickstand', 
                        padding: 'Padding', 
                        hardware: 'Hardware',
                        storageBag: 'Storage Bag',
                      },
                      {
                        model: {
                          name: "bike", 
                        }, 
                        price: "$45.95", 
                        frame: "Aluminum", 
                        frameTreatment: "Treated", 
                        loadCapacity: "65lbs",
                        folding: "Yes", 
                        wheels: '7"', 
                        straps: "3 Included", 
                        kickstand: "Single Leg", 
                        padding: "Rubber", 
                        hardware: "Stainless Steel",
                        storageBag: "Bag included",
                      },
                   ],
                };
            },

        };
    </script>
Matt U
  • 4,970
  • 9
  • 28
user12545869
  • 1
  • 1
  • Hi! It might help if you add to your answer exactly what part of your code you are worried might be an anti-pattern. Is it the fact that you are looping over the same array twice? – gburning Dec 16 '19 at 14:06
  • Thanks i added some clarification above – user12545869 Dec 16 '19 at 14:19
  • Looks a bit odd. You are looping the first object but skipping the first property. You shouldnt be looping an object in this way because they do not have an explicit order (arrays do). So if your backend somehow decides to define your object in a different order (which shouldnt make a difference with good coding), your vue app will loop it differently. – Flame Dec 16 '19 at 15:07
  • Thanks for the help. That makes a lot sense, i'll stay away from coding like this! – user12545869 Dec 16 '19 at 17:17
  • @Flame Not saying I disagree, but these days the order is the insertion order. https://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order – Cody Ｇ Dec 16 '19 at 18:26
  • @CodyＧyes you're right, but you shouldnt assume any order on an object, thats always the best thing to do – Flame Dec 17 '19 at 22:00

0 Answers0