Question

我可以在 Vue js 中使用计算属性比较两个数组吗？

2019-06-05

1683

vue.js vuejs2 computed-properties

如果我没有解释清楚，我很抱歉。我想创建一个像 Airbnb 一样的编辑便利设施。我有带有 id、name 的“Amenity”数组。然后我将 house_id = 2 的所有便利设施加载到名为“house_amenities”的数组中。我想要的是当 house_amenities 中 amenites_id 与“Amenities”中的 id 匹配的记录时，复选框将被勾选。我想要实现的目标：[1]： https://postimg.cc/bGhvGGSP

我尝试使用计算属性，但还没有成功。它总是返回“[Vue warn]: 渲染时出错: “TypeError: 无法读取未定义的属性‘length’”

<table class= "table table-striped" style="overflow-y: scroll">
    <thead>
        <tr>
        <th>ID</th>
        <th>Amenities</th>
        <th>
            <span class="checkbox-custom checkbox-primary" style="padding:0px;margin:0px">
            <input class="selectable-item" type="checkbox">
            <label></label>
            </span>
        </th>
        </tr>
    </thead>
    <tbody v-for = "(amenity,index) in amenitiesLst">
        <tr v-for="(items,index) in houseAmenitiesLst>
            <td>{{index+1}}</td>
            <td>{{amenity.name}}</td>
            <td>
                <input class="selectable-item" type="checkbox" value="check[index]"  >
            </td>


        </tr>
    </tbody>
</table>

这里是 vue 代码:

computed: {
    checked: function(){
        this.amenitiesLst.map(function(item){
            for(var i = 0; i < this.houseAmenitiesLst.length; i++)
            {
                if(item.id == this.houseAmenitiesLst[i].amenities_id)
                    return true;
                else 
                    return false;    
            }
        })
    }
},

Answer 1

您的问题是， computed 属性在函数中的 amenitiesList 中有任何值之前就已执行，只需添加一个检查，以便仅在启动时执行，如下所示：

checked: function(){
if(this.amenitiesLst){
        this.amenitiesLst.map(function(item){
            for(var i = 0; i < this.houseAmenitiesLst.length; i++)
            {
                if(item.id == this.houseAmenitiesLst[i].amenities_id)
                    return true;
                else 
                    return false;    
            }
        })
    }
return
    }

每次依赖项发生变化时都会执行计算属性，因此，一旦初始化 amentiesList ，它就会返回您的值。您可能还需要在模板上放置一个 v-if，以确保没有渲染错误。

Answer 2

我认为问题出在上下文上， map 函数内的 this 并未引用 Vue 实例，因此未定义 houseAmenitiesLst

尝试使用：

computed: {
    checked: function(){
        this.amenitiesLst.map((item) => {
            for(var i = 0; i < this.houseAmenitiesLst.length; i++)
            {
                if(item.id == this.houseAmenitiesLst[i].amenities_id)
                    return true;
                else 
                    return false;    
            }
        })
    }
},