[Vuejs]-SelectKinds is not a function

by

0👍

✅

By default, computed detects internal properties and returns calculated results.

To set the value on computed, you must use setter.
https://v2.vuejs.org/v2/guide/computed.html#Computed-Setter

Please refer to the code below.

export default {
  data () {
    return  {
      selectedKinds: []
    }
  },
  computed: {
    selectKinds: {
      set (item) {
        let obj = item
 
        for (let key in obj) {
           if((key == 'workclothes') || (key == 'siz')) {
             this.selectedKinds.push(obj[key])
           }
        }
      },
      get () {
        return this.selectedKinds
      }
    }
  }
}

0👍

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>

Leave a comment