Using refs in laravel blade to pre-check checkboxes

Question

I'm trying to use refs in order to take data from my laravel blade, in each row of a foreach loop, and pre-check checkboxes is the values match a checkbox. In this example, if a row in the loop has $result->site of intra and $result->category of catalog, I would want the intra and catalog checkboxes on that row to be checked.

I'm using refs because I had to do something similar for other data in the rows but I don't know exactly how to apply it to matching the blade value to the id or value of a checkbox and make it checked.

What am I missing here?

@foreach($getResults as $k => $result)

    //$result->site and $result->category hold the value I need to match in order to pre-select a checkbox

    <div slot="site" >
        <input category="checkbox" id='direct' value='direct'   ref="existingsiteNames" data-md-icheck  />
        <label>Direct</label><br>
        <input category="checkbox" id='intra' value='intra'  ref="existingsiteNames" data-md-icheck  />
        <label>Intra</label><br>
    </div>

    <div slot="category" >
        <input category="checkbox" id='marketing' value='marketing' ref="existingcategoryNames" data-md-icheck  />
        <label>Marketing</label><br>
        <input category="checkbox" id='catalog' value='catalog' ref="existingcategoryNames" data-md-icheck  />
        <label>Catalog</label><br>
    </div>

    <div slot="footer">
      <button class="modal-save-button" @click="updateHandler">
        Save
      </button>
    </div>
@endforeach

new Vue({
    el:'#app',
    data: { 
        showGroupModal: false,
        showAddModal: false,
        existingcategoryNames: [],
        existingsiteNames: [],
    },
    methods: {
        updateHandler(event) {
            this.showGroupModal = false;
            this.updateGroupDetails(event);
        },
        updateGroupDetails: function(event){

            let data = {
                site: this.$refs.existingsiteNames,
                category: this.$refs.existingcategoryNames,
            };

            axios.post('/update', data)
            .then((response) => {
            })
            .catch(function (error) {
            })
            .finally(function () {
            });
        },
    }
})

Answer 1

If I understand your question correctly, you want to check checkboxes based on a condition. Here's an example took from my own code:

<input {{ $something->isAwesome ?: "checked" }} type="checkbox" >

In this example, we check if $something is awesome, and if it is we print the string "checked", making the checkbox checked. If this is not what you wanted to accomplish tell me and i will update answer.