javascript - selectKinds 不是函数

Question

我是 Vue.js 的新手。我正在尝试这样使用v-for：

<tbody v-for="item in handbookSiz.Items" :key="item.company_department_id">
    <tr>
       <td class="label" colspan="9">
          <div class="tbody__icon">
             <i class="fa fa-caret-down"></i>
          </div>
          <div class="tbody__text">
              Plot №{{ item.company_department_id }}
          </div>
      </td>
  </tr>
  <tr class="dropdown">
     <td colspan="9">
        <table>
             <tbody v-for="kind in selectKinds(item.kind_title)" :key="kind.siz_id">
                 ...
             </tbody>
       </table>

item.kind_title是包含另一个对象的对象。我需要从中选择一些对象。为此，我selectKinds在以下computed部分编写了函数：

selectKinds (item) {
    let obj = item
    let selectedKinds = []

    for(let key in obj) {
       if((key == 'workclothes') || (key == 'siz')) {
          selectedKinds.push(obj[key])
       }
    }

    return selectedKinds
}

这就是我的computed部分的外观：

computed: {
        filterData () {
            const query = this.plot
            let filteredData = []
            let obj = this.handbookWorkers.Items

            for(let key in obj) {
                let el = obj[key]

                if(el.company_department_id.indexOf(query) != -1) {
                    filteredData.push(el)
                }
            }

            return filteredData
        },
        selectKinds (item) {
            let obj = item
            let selectedKinds = []

            for(let key in obj) {
                if((key == 'workclothes') || (key == 'siz')) {
                    selectedKinds.push(obj[key])
                }
            }

            return selectedKinds
        }
    }

我在控制台中收到错误“selectKinds 不是函数”。

为什么会这样？我究竟做错了什么？

标签： javascripthtmlvue.js

Answer 1

new Vue({
  el: "#app",
  data: {
    items: [{
        company_department_id: 1,
        kind_title: {
          siz_id: 11,
          workclothes: 'asd',
          siz: 'aaa'
        }
      },
      {
        company_department_id: 2,
        kind_title: {
          siz_id: 21,
          siz: 'bbb'
        }
      },
      {
        company_department_id: 3,
        kind_title: {
          siz_id: 31
        }
      }
    ]
  },
  computed: {
    newItems() {
      let list = this.items.map(v => {
        v.selectedKinds = this.selectKinds(v.kind_title)
        return v
      })
      return list
    }
  },
  methods: {
    selectKinds(item) {
      let obj = item
      let selectedKinds = []

      for (let key in obj) {
        if ((key === 'workclothes') || (key === 'siz')) {
          selectedKinds.push(obj[key])
        }
      }

      return selectedKinds
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <table>
    <tbody v-for="item in newItems" :key="item.company_department_id">
      <tr>
        <td class="label" colspan="9">
          <div class="tbody__icon">
            <i class="fa fa-caret-down"></i>
          </div>
          <div class="tbody__text">
            Plot №{{ item.company_department_id }}
          </div>
        </td>
      </tr>
      <tr class="dropdown">
        <td colspan="9">
          <table>
            <tbody>
              <tr>
                <td v-for="(kind,i) in item.selectedKinds" :key="i">{{kind}}</td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</div>