Javascript 如何通过Vuejs中的代码调用computed属性？

我正在使用Vuejs进行模板和数据绑定。这是我的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>

开始选择
末端选择
全选
去除



{{Name}}

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

var message=document.getElementById（“消息”）；
可变项目=[
{Id:1，名称：“苹果”}，
{Id:2，名称：“橙色”}，
{Id:3，名称：“香蕉”}，
{Id:4，名字：“芒果”}
];
风险值数据={
清单：项目，
selectedList:[]，
选择模式：false
}
var vue=新的vue({
el:“项目”，
数据：数据，
方法：{
selectAll:function（）{
如果（！this.selectMode）{
this.selectMode=true；
}
for（var i=0；i0）{
var index=this.selectedList.pop（）；
本列表拼接（索引1）；
长度--；
}
}
},
组成部分：{
“列表项”：{
模板：“#模板”，
计算：{
选定：{
get:function（）{
返回此项。$parent
.所选列表
.indexOf（此.$索引）>0；
},
设置：函数（值）{
显示（this.Name++（value？“选中”）：“取消选中”）+”在索引处：“+this.index”）；
如果（值）{
这是$parent
.所选列表
.$添加（此.$索引）；
}
否则{
这是$parent
.所选列表
.$remove（此.$index）；
}
}
}
}
}
}
});
功能展示（餐厅）{
message.innerHTML=mess；
setTimeout（函数（）{
message.innerHTML=“”；
}, 5000);
}

Vuejs将模板与列表正式绑定，项目按预期在

标记中列出。问题是计算属性：

已选择

。单击复选框时会触发此属性的setter，但是，如果该属性是在代码中设置的，则不会调用setter

点击“开始选择”按钮时，每个项目的复选框都可见。当用户单击复选框时，将调用computed

selected

属性的setter。但是，如果按“全选”按钮，将

selected

属性设置为

true

，则复选框可见，并且已被适当选中，但未触发

selected

属性的setter，这是意外的。为什么这不起作用？要么我遗漏了什么，要么这是Vuejs中的一个bug

这里有一个链接到fiddle:。这是你可以尝试的几件事

运行>单击开始选择>勾选复选框（setter触发）>Div中的消息，“删除”将删除所选项目

运行>单击全选（全选）>按移除>Div“无需移除”中的意外错误，这不应该发生

---

非常感谢您的帮助。

您似乎忘记添加这一行：

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

selectAll:function（）{
如果（！this.selectMode）{
this.selectMode=true；
}
for（var i=0；i

谢谢杜威。我的原始代码中确实有这一行。但是，我似乎误解了Vuejs中的计算属性。我已经解决了这个问题。但我还是把你的帖子作为答案。