Могу ли я сравнить два массива, используя вычисляемое свойство в Vue JS?

Question

Мне очень жаль, если я не объяснил это ясно. Я хочу создать удобство редактирования как Airbnb. У меня есть массив "Amenity" с идентификатором, именем. Затем я загрузил все удобства для house_id = 2 в массив под названием house_aabilities. То, что я хочу, - это когда флажок в записи house_aferences с amenites_id совпадает с идентификатором из «Удобства». Чего я хочу достичь: [1]: https://postimg.cc/bGhvGGSP

Я пытался использовать свойство computed, но пока не получилось. Он всегда возвращал "[Vue warn]: Ошибка при рендеринге:" Ошибка типа: Невозможно прочитать свойство 'длина' из неопределенного "

<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

Я думаю, что проблема в контексте, this внутри функции map не ссылается на экземпляр 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;    
            }
        })
    }
},

Answer 2

Ваша проблема в том, что свойство 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 в шаблон, чтобы убедиться, что у вас нет ошибки рендеринга.