mardi 26 janvier 2021

Can't select chechbox with v-model in VueJS

I have a checkbox as a feature filter for a real estate agency site.

From the database comes the list of categories with their respective characteristics:

public function get_categories(Request $request)
{

    $categories = Category::with('features')->get();

    return response()->json([
        'validation' => true,
        'categories' => $categories
    ]);

}

In the Vue template, I have an accordion with UIKit.

I have one accordion header per category that I walk through using a v-for

Then inside the body of the accordion I have the checkboxes that correspond to the characteristics that belong to that category

<li 
    v-for="category in categories" 
    :key="category.id">
    
    <a 
        href="#" 
        class="uk-accordion-title">
        
    </a>

    <div class="uk-accordion-content">
        
        <div uk-grid>
            
            <div 
                class="uk-width-1-1 uk-margin-small"
                v-for="feature in category.features"
                :key="feature.id">
                
                <label>
                    
                    <input 
                        :id="'feature_' + feature.id"
                        class="uk-checkbox"
                        type="checkbox"
                        name="features" 
                        :value="feature.id"
                        v-model="features"
                        @change="filterUpdate"> <!-- ID hacer que este sea venga de la BD -->
                    
                        &nbsp; 

                </label>

            </div>

        </div>
        
    </div>

</li>

To load the categories of course I have a method that is responsible for making the request when creating the component

layoutLoadCategories() {

    axios.get('api/layout/get/categories').then( res => {

        this.categories = res.data.categories;

    });

},

The problem is that when I try to click on a checkbox, nothing happens. Not selected enter image description here




Aucun commentaire:

Enregistrer un commentaire