要实现的功能如下图：
@乘风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">✔</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">✔</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);
})
}
}
});
我的想法哈。
判断的时候：