在 laravel 刀片中使用 refs 来预先检查复选框答案

【问题标题】：Using refs in laravel blade to pre-check checkboxes在 laravel 刀片中使用 refs 来预先检查复选框
【发布时间】：2020-03-12 04:30:45
【问题描述】：

我正在尝试使用 refs 以从我的 laravel 刀片中获取数据，在 foreach 循环的每一行中，并且预检查复选框的值与复选框匹配。在此示例中，如果循环中的一行具有内部的 $result->site 和目录的 $result->category，我希望选中该行上的内部和目录复选框。

我使用 refs 是因为我必须对行中的其他数据执行类似的操作，但我不知道如何将其应用于将刀片值与复选框的 id 或值匹配并使其选中。

我在这里错过了什么？

@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 () {
            });
        },
    }
})

【问题讨论】：

您只希望这些输入在匹配时具有那些“参考”（将被检查）？
@lagbox 是的，这是正确的。复选框是可能的，但如果匹配存在，我想检查它们，并且只有在它们被选中时才有参考
@lagbox 这有意义吗？
@TomN。对不起，我仍然没有关注。因此，您想根据 $result.. 预先检查复选框。但是使用 refs 的目的是什么？一般来说，我发现通常有比使用 refs 更好的解决方案，这就是我问的原因。
我感觉这不是$refs 的用例。但任务需要澄清。你想完成什么？

标签： javascript laravel vue.js

【解决方案1】：

如果我正确理解您的问题，您希望根据条件选中复选框。这是我自己的代码中的一个示例：

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

在这个例子中，我们检查 $something 是否很棒，如果是，我们打印字符串“checked”，使复选框被选中。如果这不是您想要完成的，请告诉我，我会更新答案。

【讨论】：

【解决方案2】：

更便捷的表单渲染方式是使用 Laravel HTML Collective 库(https://laravelcollective.com/docs/6.0/html)

{!! Form::checkbox('catalog', 'catalog', $result->isExistingCategoryNames()) !!}

【讨论】：