mostafalaravel
8 months ago
17
2
Vue

how to use v-for with v-modal

Posted 8 months ago by mostafalaravel

Hello ,

here my template for table

                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest"><input class=" rounded py-2 px-3 text-grey-darker " type="text" placeholder="group" v-model="actionFilterContent.group" v-on:keyup.13="actionFilter()"></th>
                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest"><input class=" rounded py-2 px-3 text-grey-darker " type="text" placeholder="status"  v-model="actionFilterContent.status" v-on:keyup.13="actionFilter()"></th>
                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest"><input class=" rounded py-2 px-3 text-grey-darker " type="text" placeholder="action_name"></th>
                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest"><input class=" rounded py-2 px-3 text-grey-darker " type="text" placeholder="action_number"></th>
                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest"><input class=" rounded py-2 px-3 text-grey-darker " type="text" placeholder="action_po_box"></th>
                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest"><input class=" rounded py-2 px-3 text-grey-darker " type="text" placeholder="nofab_description"></th>
                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest"><input class=" rounded py-2 px-3 text-grey-darker " type="text" placeholder="brand"></th>
                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest"><input class=" rounded py-2 px-3 text-grey-darker " type="text" placeholder="action_description_nl"></th>
                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest"><input class=" rounded py-2 px-3 text-grey-darker " type="text" placeholder="action_description_fr"></th>
                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest"><input class=" rounded py-2 px-3 text-grey-darker " type="text" placeholder="action_description_en"></th>
                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest"><input class=" rounded py-2 px-3 text-grey-darker " type="text" placeholder="action_type"></th>
                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest"><input class=" rounded py-2 px-3 text-grey-darker " type="text" placeholder="is_cashback"></th>
                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest"><input class=" rounded py-2 px-3 text-grey-darker " type="text" placeholder="is_expedition"></th>
                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest"><input class=" rounded py-2 px-3 text-grey-darker " type="text" placeholder="startdate"></th>
                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest"><input class=" rounded py-2 px-3 text-grey-darker " type="text" placeholder="enddate"></th>
                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest"><input class=" rounded py-2 px-3 text-grey-darker " type="text" placeholder="extentiondate"></th>

the data ()

        data() {
            return {
                msg: ' from msg variable',
                actionFilterContent : {
                    "group": "",
                    "status": "",
                    "action_name": "",
                    "action_number": "",
                    "action_po_box": "",
                    "nofab_description": "",
                    "brand": "",
                    "action_description_nl": "",
                    "action_description_fr": "",
                    "action_description_en": "",
                    "action_type": "",
                    "is_cashback": "",
                    "is_expedition": "",
                    "startdate": "",
                    "enddate": "",
                    "extentiondate": ""
                },
                actionsList: [],
            }
        },

How to use for loop to prevent repeating the same lines in the template ? (all cols are in actionFilterContent )

thanks

Please sign in or create an account to participate in this conversation.