未将道具分配给 Vue 中的 data() 属性

Question

我正在创建一个 Vue 组件，它应该根据用户动态选择的过滤器刷新餐厅。

因此，我必须在我的 Vue 组件的 data() 函数中更新 filteredRestaurants。 然而，一开始，当 Vue 组件被渲染时，它会从 "restaurants" 属性中获取餐厅信息。

我尝试将"restaurants" 插入filteredRestaurants 数据属性以将其设置为默认值。不幸的是，商店不会显示在高处，好像 "restaurants" 属性是在 filteredRestaurants 被赋值之后插入的。

我的问题是，我怎样才能将 "restaurants" 属性放入 filteredRestaurants 以便以后在用户更改过滤器时重新渲染 Vue 组件。

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

唯一可行的方法是，当我将 filteredRestaurants 作为返回 "restaurants" 的函数时，我在 Vue 模板中调用它：

filteredRestaurants(){
  return this.restaurants
}

任何帮助表示赞赏。

Answer 1

如果我正确理解您的问题，您正在寻找computed property：

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

这将在this.restaurants 的值发生变化时更新。