Vue内のdata（）属性にプロットが割り当てられていません

Question

Vueコンポーネントを作成しています。ユーザーが動的に選択したフィルタに応じてレストランを更新する必要があります。

そのため、私のVueコンポーネントのdata()機能のfilteredRestaurantsを更新する必要があります。 しかし、最初に、Vueコンポーネントがレンダリングされると、"restaurants"プロップからレストラン情報が取得されます。

filteredRestaurantsデータ属性に"restaurants"を挿入して、デフォルト値として設定しようとしました。不幸にして、filteredRestaurantsにその値が割り当てられた後に"restaurants"小道具が挿入されたかのように、店舗は背の高いところに表示されませんでした。

"restaurants"小道具をfilteredRestaurantsに登録するにはどうすればいいですか。後でユーザーがフィルタを変更したときにVueコンポーネントを再レンダリングすることができます。私は"restaurants"を返された機能としてfilteredRestaurantsを持っていたとき

<template lang="html"> 
    <div class="test"> 
    <Filters></Filters> 
    <div> 
    <ul class="o-list c-stores"> 
     <Result v-bind:total="restaurants.length" v-bind:open="isOpen" v-on:toggle="toggleRestaurantList"></Result> 
     <li v-for="(restaurant, index) in restaurants" class="c-stores__location" :class="{'first': isFirst(index), 'last': isLast(index, restaurants)}"> 
     <Location :index="index" :store="restaurant" :link="() => setCurrentRestaurant(restaurant)"></Location> 
     </li> 
    </ul> 
    </div> 
    </div> 
</template> 

<script> 
import eventHub from './../../event-hubs/storefinder' 
import Location from './Location' 
import Filters from './Filters' 
import Result from './Result' 

export default { 
    props: ["restaurants", "isOpen", "currentSearch"], 
    data() { 
    return { 
     attributes : [], 
    // Here I am assigning the prop 
     filteredRestaurants : this.restaurants 
    } 
    }, 
    head: { 
    title: function() { 
     return { 
     inner: this.$t('storefinder.overview') 
     } 
    }, 
    meta: function functionName() { 
     return [{ 
      name: 'og:title', 
      content: this.$t('storefinder.overview') + ' - ' + this.$t('storefinder.name'), 
      id: "og-title" 
     }, 
     { 
      name: 'description', 
      content: this.$t('storefinder.description'), 
      id: "meta-description" 
     }, 
     { 
      name: 'og:description', 
      content: this.$t('storefinder.description'), 
      id: "og-description" 
     }, 
     ] 
    } 
    }, 
    components: { 
    Location, 
    Filters, 
    Result 
    }, 
    methods: { 
    toggleRestaurantList() { 
     eventHub.$emit('showRestaurantList'); 
    }, 
    setCurrentRestaurant(restaurant) { 
     this.trackRestaurantSelect(restaurant.publicNameSlug); 
     this.$router.push({ 
     name: "store", 
     params: { 
      restaurant: restaurant.publicNameSlug 
     } 
     }); 
    }, 
    trackRestaurantSelect(restaurantName) { 
     dataLayer.push({ 
     'event': 'GAEvent', 
     'eventCategory': 'restaurants', 
     'eventAction': 'clickResult', 
     'eventLabel': restaurantName, 
     'eventValue': undefined, 
     'searchTerm': this.currentSearch && this.currentSearch.toLowerCase(), 
     'amountSearchResults': 1 
     }); 
    }, 
    created() { 
     eventHub.$on('addFilterTheRestaurants', (attribute) => this.attributes.push(attribute)); 
     eventHub.$on('removeFilterTheRestaurants', (attribute) => this.attributes = this.attributes.filter(item => item !== attribute)); 
    }, 
    isLast: function (idx, list) { 
     return idx === list.length - 1; 
    }, 
    isFirst: function (idx) { 
     return idx === 0; 
    }, 
    } 
} 
</script> 

これは働いていた唯一の方法だった、と私はVueのテンプレート内でそれを呼んだ：

filteredRestaurants(){ 
    return this.restaurants 
} 

すべてのヘルプは高く評価しました。

Answer 1

私が正しくあなたの質問を理解していれば、あなたはcomputed propertyを探しています：

computed: { 
    filteredRestaurants() { 
    return this.restaurants; 
    } 
} 

これはthis.restaurants変更のたび値が更新されます。