Vue 计算属性没有像我预期的那样重新计算

Question

我正在尝试创建一个通用搜索组件，该组件带有一个事件，该事件与搜索字符串一起发送回父级，以便父级实际上可以过滤结果。

使用下面的代码，当this.searchCriteria 的值发生变化时，为什么computed.filteredDocuments 不会重新计算？如何调整我的代码以便在调用updatedSearchString 时重新计算？

父组件

<template>
  <search :searchCriteria="searchCriteria" @searchString="updatedSearchString" />
  <div v-for="(doc, index) in filteredDocuments" v-bind:key="index">
    <div>{{doc.filename}}</div>
  </div>
</template>

<script>
import store from '../store/index'
import { mapState } from 'vuex'
// import _ from 'lodash'
import Search from '../components/search'

export default {
  name: 'Parent',
  components: {
    Search: Search
  },
  data () {
    return {
      searchCriteria: ''
    }
  },
  computed: {
    ...mapState({
      documents: state => state.documents.items
    }),
    filteredDocuments () {
      console.log('in computed')
      return _(this.documents)
        .filter(this.applySearchFilter)
        .value()
    }
  },
  methods: {
    updatedSearchString (searchString) {
      this.searchCriteria = searchString <-- I WOULD HAVE EXPECTED BY UPDATING THIS IT WOULD TRIGGER COMPUTED.FILTEREDDOCUMENTS TO RECOMPUTE
    }
  },
  applySearchFilter (doc) {
    console.log('in applySearchFilter')
    // If no search criteria return everything
    if (this.searchCriteria === null) {
      return true
    }

    if (doc.filename.toLowerCase().includes(this.searchCriteria.toLowerCase())) {
      return true
    }
    return false
  }
}
</script>

子组件

<template>
  <div>
    <q-search v-model="search" placeholder="Search" />
  </div>
</template>

<script>
export default {
  name: 'Search',
  props: {
    searchCriteria: { type: String, required: true }
  },
  data () {
    return {
      search: null
    }
  },
  mounted () {
    this.search = this.searchCriteria // Clone
  },
  watch: {
    search: function (newVal, oldVal) {
      // If no search criteria return everything
      if (!newVal) {
        this.clearSearch()
      }

      this.$emit('searchString', newVal) <-- THIS EMITS THE SEARCH VALUE TO THE PARENT
    }
  }
}
</script>

Answer 1

我将您的示例代码转换为 sn-p 时遇到了一些驼峰式大小写/kebab 大小写问题：HTML 不区分大小写，因此事件应该是 kebab-case，而不是 camelCase。此示例按预期过滤。

new Vue({
  el: '#app',
  data: {
    searchCriteria: '',
    documents: [{
        filename: 'FirstFile'
      },
      {
        filename: 'SecondFile'
      },
      {
        filename: 'LastOne'
      }

    ]
  },
  methods: {
    updatedSearchString(searchString) {
      this.searchCriteria = searchString
    },
    applySearchFilter(doc) {
      console.log('in applySearchFilter')
      // If no search criteria return everything
      if (this.searchCriteria === null) {
        return true
      }

      if (doc.filename.toLowerCase().includes(this.searchCriteria.toLowerCase())) {
        return true
      }
      return false
    }
  },
  computed: {
    filteredDocuments() {
      console.log('in computed')
      return this.documents
        .filter(this.applySearchFilter)
    }
  },
  components: {
    search: {
      template: '#child-template',
      props: {
        searchCriteria: {
          type: String,
          required: true
        }
      },
      computed: {
        search: {
          get() {
            return this.searchCriteria;
          },
          set(value) {
            this.$emit('search-string', value);
          }
        }
      }
    }
  }
});

<link href="https://unpkg.com/quasar-extras@latest/material-icons/material-icons.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/quasar-framework@latest/dist/umd/quasar.mat.min.css">
<script src="https://unpkg.com/quasar-framework@latest/dist/umd/quasar.mat.umd.min.js"></script>
<div id="app">
  <search :search-criteria="searchCriteria" @search-string="updatedSearchString"></search>
  <div v-for="(doc, index) in filteredDocuments" v-bind:key="index">
    <div>{{doc.filename}}</div>
  </div>
</div>

<template id="child-template">
  <div>
    <q-search v-model="search" placeholder="Search" />
  </div>
</template>