Question

我在模板内使用v-for来显示计算属性的列表。但是，即使刷新后也可以使用，但是当我第一次进入页面时，我看不到列出的项目。如果我为我的联系人，我将无法过滤。

所以我的数据和计算方法如下：

export default {
    data() {
      return {
       contacts: this.$store.getters.loadedContacts,
       search: ""
      };
    },
computed: {
  filterContacts(contacts) {
    return this.contacts.filter(contact => {
      return contact.name.toLowerCase().match(this.search.toLowerCase());
    });
  }   
};

我在HTML中这样调用它（filterContacts）：

<v-list two-line v-if="contacts">
  <template v-for="(contact, index) in filterContacts">

  <v-list-tile-content>
      <v-list-tile-title>{{ contact.name }}</v-list-tile-title>
        <v-list-tile-action-text>{{ contact.position }}</v-list-tile-action-text>
  </v-list-tile-content>  

  </template>
</v-list>

所以实际的问题是：为什么需要刷新页面才能查看for循环的结果？
如果我不调用filterContacs，则无法使用我的过滤器。

有人建议如何同时解决过滤和v-for循环吗？

如果这是新手，谢谢！任何帮助都非常感激

Answer 1

在创建时设置组件的数据。存储区中的吸气剂可能还没有返回任何数据。

您可以用this.contacts安全地替换计算中的this.$store.getters.loadedContacts。

您可以选择的其他选项（也许更优雅）是使用vuex的mapGetter帮助器。它反应性地将vuex吸气剂映射到组件的计算属性（此处更多信息：https://vuex.vuejs.org/guide/getters.html#the-mapgetters-helper）。

使用mapGetters，您将：

...mapGetters({
  contacts: 'loadedContacts'
})

然后仅从数据声明中删除联系人。

Answer 2

谢谢！我实际上观察了你的话。确实，用new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//label[text()='Number of GPUs']//following::md-select-value[@class='md-select-value' and starts-with(@id, 'select_value_label')][1]/span/div[@class='md-text ng-binding']"))).click();代替this.contacts确实解决了我的问题。我还从data（）中删除了“联系人”。

谢谢！

来自“计算”的V-For不显示

2 个答案: