classic 场景:我想显示一个列表,但当它为空时,我想显示"无数据".
做一些我认为简单的事情有点复杂,这让我觉得我可能做错了.
这是我目前的解决方案.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>
<div id="element">
<div v-if="empty">No item in inventory</div>
<div v-for="(index, item) in inventory">
{{item.key}}<button onclick="remove('{{index}}')">remove</button>
</div>
</div>
<script type="text/javascript">
"use strict";
var vm;
$(function() {
vm = new Vue({
el: '#element',
data: {
inventory: {"id1" : {"key" : "val1"}, "id2" : {"key" : "val2"}},
empty: false
},
watch: {
inventory: function() {
vm.empty = $.isEmptyObject(vm.inventory);
}
}
});
});
function remove(key) {
Vue.delete(vm.inventory, key);
}
</script>
还有比这更好的解决方案吗?