使用 laravel 和 vue js 从 mysql 数据库中检查带有逗号分隔值的复选框

Posted 2023-03-14

【中文标题】使用 laravel 和 vue js 从 mysql 数据库中检查带有逗号分隔值的复选框

【英文标题】：Checked checkboxes with comma separated values from mysql database using laravel and vue js

【发布时间】：2021-02-07 23:35:13

【问题描述】：

我正在尝试使用来自 Laravel vue js 中的数据库的值检查复选框。我已经以值分隔格式将所选项目添加到数据库中。现在我想通过将添加的值绑定到适当的复选框来编辑它们。

这是部分代码

            SelectRestaurant:function(id)
                   

                        var _this = this;
                        this.RestaurantObject.id =  id;
                        var input = this.RestaurantObject;
                        axios.post('getRestaurant', input).then(function(response)
                        _this.RestaurantObject = response.data;


                    ).catch(function(error)
                        alert('Could not load record. Please try again');

                    )

                 ,

<label>Select Restaurant Types</label>
        <!--<select name="type_id" id="type_id" class="form-control text-small" v-model='form.type_id' multiple>
                                            <option value="0" selected="" disabled="">Select Restaurant Types</option>
                        <option v-for='t in types' :value='t.id'>@ t.type_name </option>
                                            </select>-->




                                          <ul>
        <li v-for="t in types" style="display: inline-block; list-style:none; padding:7px">
          <input type="checkbox" :value="t.id" v-model="RestaurantObject.type_id">

          <label :for="t.id">@ t.type_name </label>
        </li>



   </ul>


Vue js codes

<!-- begin snippet: js hide: false console: true babel: false -->

【参考方案1】：

您可以尝试提供您的 Vuejs 数据对象吗？同时，你可以做

<li v-for="t in types" style="display: inline-block; list-style:none; padding:7px">
  <input type="checkbox" :value="t.id" v-model="RestaurantObject.type_id" :checked="types.includes('RestaurantObject.type_id')">
  <label :for="t.id">@ t.type_name </label>
</li>

【讨论】：

嗨，斯蒂芬奇迹。我尝试了您提供的答案，但出现此错误：includes is not a function。

我更新了评论。你能再试一次吗？ @Emmanuel