如何通过Vuejs中的代码调用computed属性
How can I invoke computed property through code in Vuejs?
我使用vejs模板和数据绑定。这是我的HTML:
<div id="message"></div>
<div id="items">
<div v-show="list.length > 0">
<button v-on="click: selectMode = true"
v-show="!selectMode">Start Selection</button>
<button v-on="click: selectMode = false"
v-show="selectMode">End Selection</button>
<button v-on="click: selectAll">Select All</button>
<button v-on="click: remove">Remove</button>
</div>
<ul>
<list-item v-repeat="list"></list-item>
</ul>
</div>
<script type="text/html" id="template">
<li>
<input type="checkbox" v-show="$parent.selectMode"
v-model="selected" name="checkbox" value="{{Id}}" />
<label>{{Name}}</label>
</li>
</script>
和JS:
var message = document.getElementById("message");
var items = [
{ Id: 1, Name: "Apple" },
{ Id: 2, Name: "Orange" },
{ Id: 3, Name: "Banana" },
{ Id: 4, Name: "Mango" }
];
var data = {
list: items,
selectedList: [],
selectMode: false
}
var vue = new Vue({
el: "#items",
data: data,
methods: {
selectAll: function(){
if(!this.selectMode){
this.selectMode = true;
}
for(var i = 0; i < this.list.length; i++){
this.list[i].$set("selected", true);
}
},
remove: function(){
var length = this.selectedList.length;
if(length === 0){
show("Nothing to remove");
return;
}
while(length > 0){
var index = this.selectedList.pop();
this.list.splice(index, 1);
length--;
}
}
},
components:{
'list-item': {
template: "#template",
computed: {
selected: {
get: function(){
return this.$parent
.selectedList
.indexOf(this.$index) > 0;
},
set: function(value){
show(this.Name + " " + (value ? "Selected" : "Deselected") + " at index: " + this.$index);
if(value){
this.$parent
.selectedList
.$add(this.$index);
}
else{
this.$parent
.selectedList
.$remove(this.$index);
}
}
}
}
}
}
});
function show(mess){
message.innerHTML = mess;
setTimeout(function(){
message.innerHTML = "";
}, 5000);
}
Vuejs适当地将模板与list绑定,并且项目按预期在<li>
标记中列出。问题是计算性质:selected
。当单击复选框时触发此属性的setter,但是,如果在代码中设置了该属性,则不会调用setter。
当点击"开始选择"按钮时,每个项目都可以看到复选框。当用户单击复选框时,调用计算selected
属性的setter。但是,如果您按下"全选"按钮,将selected
属性设置为true
,则可以看到复选框,并且它们被适当选中,但selected
属性的setter未被触发,这是意外的。为什么这不起作用?要么我错过了什么,要么这是Vuejs的一个bug。
这里有一个小提琴的链接:http://jsfiddle.net/dreamakshay/c76rwugz/5/。以下是一些你可以尝试的方法。
运行>点击开始选择>勾选复选框(触发setter)> Div中的消息,"删除"将删除所选项目。
运行>点击Select All (All checked)>按Remove> Div "Nothing to Remove "出现意外错误,这是不应该发生的
你好像忘了加上这一行:
selectAll: function(){
if(!this.selectMode){
this.selectMode = true;
}
for(var i = 0; i < this.list.length; i++){
this.list[i].$set("selected", true);
this.selectedList.push(this.list[i]); // This line
}
}
相关文章:
- 如何使jQuery插件函数可调用以供独立使用,而不在集合上操作
- D3在一个调用中绘制不同的SVG形状,没有可见性
- 如何从Java/scala调用js美化程序
- 如何调用这个匿名 JavaScript 函数
- 如何从模块链中调用函数.导出到节点中
- 我需要从php调用javascript或jquery
- Chrome开发工具(如何知道我在调用哪个javascript对象)
- 单击按钮后如何逐个调用分区,上一个分区将隐藏
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- Twitter Bootstrap typeahead:使用“this”获取上下文/调用元素
- node.js:setInterval()正在跳过调用
- 如何在单击复选框后调用控制器方法
- 如何在JQuery函数中定义一个值,然后调用另一个函数并使用该值
- 使用Google Visualization动态调用构造函数
- 如何在webView,Android中从@JavascriptInterface方法调用Javascript
- 是否可以将一个函数输入连接到另一个函数调用的文本
- 调用函数内部的函数
- 函数未在Object.keys或Object.getOwnPropertyNames下列出,但可以调用
- 从 ko.computed 语句中的视图模型调用视图模型时遇到问题
- 如何通过Vuejs中的代码调用computed属性