Question

我正在构建按键命令资源，并在此过程中给VueJS一个旋转。我是新手，但正在逐渐掌握事物（慢慢地...）。

我希望能够以全局搜索形式在命令部分中搜索定义为动作的关键命令（请参见下面的数据示例）。我想搜索所有动作，以仅显示那些符合搜索条件的动作。

我的HTML如下：

<div id="commands">

  <input v-model="searchQuery" />

  <div class="commands-section" v-for="item in sectionsSearched" 
:key="item.id">

    <h3>{{ item.section }}</h3>

    <div class="commands-row" v-for="command in item.command" :key="command.action"> 
          {{ command.action }}
    </div>

  </div>
</div>

我的主要Vue实例如下：

import Vue from 'vue/dist/vue.esm'
import { commands } from  './data.js'

document.addEventListener('DOMContentLoaded', () => {

  const element = document.getElementById("commands")

  if (element != null) {

  const app = new Vue({
    el: element,
    data: {
      searchQuery: '',
      commands: commands
    },
    computed: {
      sectionsSearched() {
        var self = this;
        return this.commands.filter((c) => {
          return c.command.filter((item) => {
            console.log(item.action)
            return item.action.indexOf(self.searchQuery) > -1;
           });
          });
        },
      }
    });
  }
});

最后是data.js

中的数据结构

const commands = [
  {
     section: "first section",
     command: [
       { action: '1' },
       { action: '2' },
       { action: '3' },
     ],
  },
  {
     section: "second section",
     command: [
       { action: 'A' },
       { action: 'B' },
       { action: 'C' },
     ]
  },  
]

export { commands };

我能够使用您在称为console.log(item.action)的计算方法中看到的sectionsSearched代码段来输出命令。

我在浏览器中没有看到任何错误，并且数据正确呈现。

我无法，但是可以通过实时搜索进行过滤。我几乎肯定这是我的数据结构+计算方法的结合。任何人都可以对我在这里做错的事情有所了解吗？

理想情况下，我希望按原样保留数据，因为将其切开很重要。

我是Rails的新手，欢迎任何反馈。

谢谢！

编辑

我在下面尝试了建议的解决方案，但在我通过的任何查询中始终获得undefined。该功能似乎在大多数情况下适用于以下情况：

 sectionsSearched() {
      return this.commands.filter((c) => {
        return c.command.filter((item) => {
          return item.action.indexOf(this.searchQuery) > -1;
         }).length > 0;
      });
    },

可惜实际上什么也没回来。我努力地挠头。

Answer 1

您的sectionsSearched中存在一个问题，因为它正在返回正义命令的数组。

看到这个

sectionsSearched() {
  return this.commands.reduce((r, e) => {
    const command = e.command.filter(item => item.action.indexOf(this.searchQuery) > -1);
    const section = e.section;
    r.push({
      section,
      command
    });
  }, []);
}

Answer 2

const commands = [
  {
     section: "first section",
     command: [
       { action: '1' },
       { action: '2' },
       { action: '3' },
     ],
  },
  {
     section: "second section",
     command: [
       { action: 'A' },
       { action: 'B' },
       { action: 'C' },
     ]
  },  
]

const element = document.getElementById("commands")

  if (element != null) {

  const app = new Vue({
    el: element,
    data: {
      searchQuery: '',
      commands: commands
    },
    computed: {
      sectionsSearched() {
        var self = this;
        return this.commands.filter((c) => {
        
         // the code below return an array, not a boolean
         // make this.commands.filter() not work
         
         // return c.command.filter((item) => {
         //   return item.action.indexOf(self.searchQuery) > -1;
         //  });
         
         // to find whether there has command action equal to searchQuery
          return c.command.find(item => item.action === self.searchQuery);
         });
        },
      }
    });
  }

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="commands">

  <input v-model="searchQuery" />

  <div class="commands-section" v-for="item in sectionsSearched" 
:key="item.id">

    <h3>{{ item.section }}</h3>

    <div class="commands-row" v-for="command in item.command" :key="command.action"> 
          {{ command.action }}
    </div>

  </div>
</div>

这如您所愿吗？

Answer 3

sectionsSearched() {
    return this.commands.filter((c) => {
      return c.command.filter((item) => {
        return item.action.indexOf(this.searchQuery) > -1;
       }).length > 0;
    });
    },
  }

因为过滤器将始终返回一个数组（无论是否为空），该数组的值始终为true。

Vue JS嵌套循环搜索未返回结果

3 个答案: