Toggle each element in array does not work

@lbecket I really appreciate your help and your answers, this is my first time doing something like this and I don't know how to manage this data from the backend. That's why I was trying to do it from the front end because this would be a very easy function if everything was written as hard code, I mean if I had set the static fields.

I tried to add an option in computed that changes `isHidden = false or ture' but without the results I expected. So if you can please help me to do this correctly?

I am removing from the v-if code that I have placed together with v-for, while in the backend I have the function that you advised me from the other therad

note: I cant use this method

$queryResults = Lead::select('field_1', 'field_2')->get();

beacouse i dont know what field i have on db, they change sometime , this is the reason i am trying to do this thing on frontend

@Leon012 No worries; this can definitely be confusing initially. Below is a vue component and a controller that will get this working for you. You'll obviously have to modify the query if you don't have a Lead model or if you require additional filters, but this should get you started. Also note that you need to define a fields object in your component with an initial state for the visibility of each field. I included an alias property in case the database field name is not what you want to display in the table header.

Vue.js

<template>	
	<div>
		<button 
			class="btn btn-info dropdown dropdown-toggle" 
			type="button" 
			id="setVisibility" 
			data-mdb-toggle="dropdown" 
			aria-expanded="false" 
		>
   			TABLE FIELD MANAGEMENT 
		</button>

		<ul 
			class="dropdown-menu prevent-close py-1 px-2" 
			aria-labelledby="setVisibility"
		>
			<li>
				<div class="layout-header pt-2 text-center">
					<h6>Hide/Show</h6>
				</div>

				<div 
					v-for="(field, i) in fields" 
					:key="i" 
					class="form-check form-switch"
				>
					<input 
						v-model="field.visible"
						class="form-check-input" 
						type="checkbox" 
						id="isHidden"
						@change="getData()"
					>
					<label 
						class="form-check-label" 
						for="isHidden"
					>
						{{ field.name }}
					</label>
				</div>
			</li>
		</ul>

		<table>
			<tr>
				<th 
					v-for="(header, i) in headers" 
					:key="i" 
					scope="col"
				>
					{{ header }}
				</th>
			</tr>

			<tr
				v-for="(lead, i) in leads"
				:key="i"
			>
				<td
					v-for="(field, j) in lead"
					:key="j"
				>
					{{ field }}
				</td>
			</tr>
		</table>


	</div>
</template>

<script>
	export default{
		data() {
			return {
				leads: [],
				headers: [],
				fields: [
					{name: 'first_name', alias: 'First Name', visible: true},
					{name: 'last_name', alias: 'Last Name', visible: true},
					{name: 'email', alias: 'Email', visible: false},
				]
			}
		},

		methods: {
			getData() {
				axios.post('/getLeads', {fields: this.fields}).then(response => {
					this.leads = response.data;

					this.headers = this.fields.map(item => {
						if (item.visible) {
							return item.alias;
						}
					});

				});
			},
		},

		mounted() {
			this.getData();
		}
	}
</script>

SomeController.php

public function getLeads(Request $request)
    {
        $fields = collect($request->fields)
            ->where('visible', true)
            ->pluck('name')
            ->implode(',');
            
        if ($fields != "") {
            return Lead::selectRaw($fields)->get();
        }

        return [];
    }

@lbecket I tryed this method and i see it works.

you need to define a fields object in your component with an initial state for the visibility of each field

But as i told you i really dont know what field are on table beacouse they need to change, I dont want to hard code each field.

FOR EXAMPLE

In a db.table i know i have a first name last name and email and if i use this code manually it works

fields: [
                {name: 'first_name', alias: 'First Name', visible: true},
                {name: 'last_name', alias: 'Last Name', visible: true},
                {name: 'email', alias: 'Email', visible: false},
            ],

But what if i have a form on view where i can add new field on this table. Then the field i will created will not added on fields[] array. Or in case i will clone a table from another db2.table, maybe there is a way to fill the fields dynamically?