javascript - 用vuejs写一个功能遇到的问题

要实现的功能如下图：

@乘风mf

这是主界面

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

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

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

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

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

如果有多个人依次列出

Html 代码如下：

<p id="vueel" v-cloak>
    <section id="main">
        <dl class="k-dl1">
            <dt>工具清单</dt>
            <dd>
                <ul>
                    <li v-for="tool in tools | selected">
                        <p class="con">
                            <input type="text" value="{{tool.name}}" readonly="readonly">
                            <a @click="toggleSelected(tool)" href="javascript:void(0);" class="a-removeBtn"></a>
                        </p>
                    </li>
                </ul>
                <a href="#tool-fancyBox" class="a-plus"></a>
            </dd>
        </dl>

        <dl class="k-dl1">
            <dt>食材清单</dt>
            <dd>
                <ul>
                    <li v-for="food in foods | selected">
                        <p class="con">
                            <input type="text" value="{{food.name}}" readonly="readonly">
                            <a @click="toggleSelected(food)" href="javascript:void(0);" class="a-removeBtn"></a>
                        </p>
                    </li>
                </ul>
                <a href="#food-fancyBox" class="a-plus"></a>
            </dd>
        </dl>

        <table id="tasks" class="k-tab">
            <thead>
                <tr>
                    <th width="20%">姓名</th>
                    <th width="40%">工具</th>
                    <th width="40%">食材</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(index, user) in owends">
                    <td><input @blur="checkTaskComplete" value="{{ user.user }}" type="text" name="username[]" class="task-username" id="" placeholder="输入姓名"></td>
                    <td>
                        <input v-for="tool in user.tool" type="text" value="{{tool.name}}" name="tools[]" readonly="readonly">
                        <a href="#user-tool-fancyBox" class="a-plus">选择工具</a>
                    </td>
                    <td>
                        <input v-for="food in user.food" type="text" value="{{food.name}}" name="foods[]" readonly="readonly">
                        <a href="#user-food-fancyBox" class="a-plus">选择食材</a>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3" style="height:3px;"></td>
                </tr>
                <tr>
                    <td colspan="3">
                        <a href="javascript:void(0);" class="k-plus">新增一栏</a>
                    </td>
                </tr>
            </tfoot>
        </table>

        <p class="h20"></p>

        <p class="create-pic text-center">
            <button class="btn btn-default" v-if="genterPic">生成图片</button>
            <button class="btn btn-default" disabled="disabled" v-else>生成图片</button>
        </p>

        <!-- 添加的新tr -->
        <table class="blank-tr">
            <tbody>
                <tr>
                    <td><input @blur="checkTaskComplete" type="text" name="username[]" id="" placeholder="输入姓名"></td>
                    <td>
                        <select @blur="checkTaskComplete" name="tools[]">
                            <option value="">选择工具</option>
                            <option v-for="tool in tools | selected" value="{{tool.name}}">{{tool.name}}</option>
                        </select>
                    </td>
                    <td>
                        <select @blur="checkTaskComplete" name="foods[]">
                            <option value="">选择食材</option>
                            <option v-for="food in foods | selected" value="{{food.name}}">{{food.name}}</option>
                        </select>
                    </td>
                </tr>
            </tbody>
        </table>
    </section>

    <!-- 工具清单 -->
    <p class="fancyBox" id="tool-fancyBox">
        <form action="">
        <header class="header">
            <p class="left">
                <a href="javascript:void(0);" class="a-back"></a>
            </p>
            <p class="right">
                <!-- <input type="submit" value="保存" class="fc_white mr20"> -->
            </p>
            <h1>工具清单</h1>
        </header>
        <section>
            <ul class="list-checkbox">
                <li class="modal-list" v-for="tool in tools | unselected">
                    <span>{{tool.name}}</span>
                    <a @click="toggleSelected(tool)" href="javascript:void(0);" class="pull-right">&#10004;</a>
                </li>
            </ul>
        </section>
        </form>
    </p>

    <!-- 食材清单 -->
    <p class="fancyBox" id="food-fancyBox">
        <form action="">
        <header class="header">
            <p class="left">
                <a href="javascript:void(0);" class="a-back"></a>
            </p>
            <p class="right">
                <!-- <input type="submit" value="保存" class="fc_white mr20"> -->
            </p>
            <h1>食材清单</h1>
        </header>
        <section>
            <ul class="list-checkbox">
                <li class="modal-list" v-for="food in foods | unselected">
                    <span>{{food.name}}</span>
                    <a @click="toggleSelected(food)" href="javascript:void(0);" class="pull-right">&#10004;</a>
                </li>
            </ul>
        </section>
        </form>
    </p>
</p>

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);
                    })
                }
            }
        });

巴扎黑2779일 전691

javascript - 用vuejs写一个功能遇到的问题

모든 응답(1)나는 대답할 것이다