Question

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

因此我必须更新Vue组件的filteredRestaurants功能中的data()。但是，首先，当渲染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的值发生变化，就会更新。

道具未被分配到Vue中的data（）属性

1 个答案: