vue 使用计算函数从 JSON 过滤值

Question

如何过滤我的 JSON 数据数组：

这是我的标记：

  <div v-if="vacciCounter">
        <b-card no-body class="mb-2" v-for="(stateObject, state) in filteredList" v-bind:key="state">

            <div style="margin:10px 10px 10px 10px;">
                <h5>{{ state }}</h5>

这是我的功能：

  computed: {
        filteredList() {
            if (this.vacciResults.length > 0) {  
                return this.vacciResults.filter(entry => {
                    return entry.state.toLowerCase().includes(this.searchstring.toLowerCase())

                });
            } 
        },
      
        getStates() {
         return this.vacciResults; // assuming that you have stored the response in a variable called 'output' defined in the data section
           }    

这是我获取 JSON 数据的 API 函数：vacciResults 正在获取状态。

fetch(vacciURL, {
        method: 'get',
        headers: {

        }

        }).then(res => res.json())
        .then(res => {

            this.status = '';
            this.searchBtnDisabled = false;
            

            this.vacciCounter = res.vaccinated;
            this.vacciResults = res.states;

Answer 1

这里的问题是

this.vacciResults 是一个对象，您在计算属性中尝试对其进行数组操作

下面是修改后的计算属性

     computed: {
            filteredList() {
    //********* changes added below ***********
                if (this.searchString !== '' && Object.keys(this.vacciResults).length > 0) { 
                      let filterObject = {};           
                      Object.keys(this.vacciResults).forEach(state => {
                          if(state === this.searchString.toLowerCase()) filterObject[state] = this.vacciResults[state];
                      });
                  return filterObject;
                 }
             return this.vacciResults;              
            },
          
            getStates() {
             return this.vacciResults; // assuming that you have stored the res.states in a variable called 'vacciResults' defined in the data section
             }  
      }