要实现的功能如下图：

@乘风mf

这是主界面

这是给用户选择工具或食材的界面

功能描述：工具清单下面的加号，点击后会弹出一个层，可以选择一些工具，并把选择的显示在工具清单的下面，食材清单同样。

下面的姓名、工具、食材对应给一个人分配的任务，工具对应上面工具清单，食材对应上面的食材清单。
用户可以添加多个，现在要做成可以给一个用户选择多个工具或食材，选好后，如下：

现在是要，怎么判断，给一个人选择某个工具或食材后，这个工具或食材，别人就选不了了，就是从可选的列表里消失了。
并且还要判断至少给你一人分配了任务，那就把生成图片的按钮变为可点击的，点击后生成一张图，上面写的是任务列表，如：

李建：准备烤炉工具，准备点火枪工具，准备xxx工具，购买羊肉食材，购买xx食材
陈洁仪：准备点火枪，购买土豆

如果有多个人依次列出

Html 代码如下：

    

        

            
工具清单
            

                

                    

                        

                            
                            
                        
                    
                
                
            
        

        

            
食材清单
            

                

                    

                        

                            
                            
                        
                    
                
                
            
        

        

            

                

                    
姓名
                    
工具
                    
食材
                
            
            

                

                    

                    

                        
                        选择工具
                    
                    

                        
                        选择食材
                    
                
            
            

                

                    

                
                

                    

                        新增一栏
                    
                
            
        

        


        

            生成图片
            生成图片
        

        
        

            

                

                    

                    

                        
                            选择工具
                            {{tool.name}}
                        
                    
                    

                        
                            选择食材
                            {{food.name}}
                        
                    
                
            
        
    

    
    

        

        

            

                
            
            

                
            
            
工具清单
        
        

            

                

                    {{tool.name}}
                    ✔
                
            
        
        
    


    
    

        

        

            

                
            
            

                
            
            
食材清单
        
        

            

                

                    {{food.name}}
                    ✔
                
            
        
        
    

vuejs 代码如下：

var vuedata = {
            generatePic: false, // 判断是否生成可以生成图片了
            username: '', // 某一个用户的用户名
            tasktool: '', // 对应的选择的工具
            taskfood: '', // 对应选择的食材
            tools: [{'name':'烤炉', 'selected': false, 'owend': false}, {'name':'点火枪', 'selected': false, 'owend': false}], 
            foods: [{'name':'土豆', 'selected': false, 'owend': false}, {'name':'肉', 'selected': false, 'owend': false}],
            owends: [{'user': '', 'tool': [], 'food': []}] // 新的想法，用来存储已分配的用户对应的工具和食材，好用来做已分配的用户预览列表
        };

        var vm = new Vue({
            el: '#vueel',
            data: vuedata,
            methods: {
                toggleSelected: function (data) {
                    data.selected = !data.selected;
                },
                toggleOwned: function (data) {
                    data.owned = !data.owned;
                    // data.owner = data.owner ? data.owner : data.name;
                    console.log(data);
                },
                checkTaskComplete: function (event) {
                    if (event.target.value) {
                        this.generatePic = true;
                    } else {
                        this.generatePic = false;
                    }
                },
                generateImg: function (event) {

                    if (event.target.href) {
                        window.open(event.target.href);
                        return;
                    };

                    if (this.generatePic) {
                        var formdata = $('form#taskform').serialize();
                        var $generateimg = $('#generateimg');
                        $.ajax({
                            
                            }
                        });
                        // console.log('ok');
                    }
                }
            },
            computed: {
                generatePic: function () {
                    return this.username && (this.tasktool || this.taskfood);
                }
            },
            filters: {
                selected: function (datas) {
                    return datas.filter(function (data) {
                        return data.selected;
                    })
                },
                unselected: function (datas) {
                    return datas.filter(function (data) {
                        return !data.selected;
                    })
                },
                owned: function (datas) {
                    return datas.filter(function (data) {
                        return (data.selected && data.owned);
                    })
                },
                unowned: function (datas) {
                    return datas.filter(function (data) {
                        return (data.selected && !data.owned);
                    })
                }
            }
        });