鍍金池/ 問答/HTML/ vue.js 怎么能在動(dòng)態(tài)屬性加參數(shù)

vue.js 怎么能在動(dòng)態(tài)屬性加參數(shù)

需求:需要把數(shù)據(jù)規(guī)劃為a-z的26種數(shù)據(jù)。
clipboard.png

clipboard.png
這里是篩選方法,參數(shù)就是a-z 26個(gè)字母 ,
如何能實(shí)現(xiàn)以下圖操作

clipboard.png
這里會(huì)報(bào)錯(cuò),不能 in 后面應(yīng)該為動(dòng)態(tài)屬性或者變量,我該怎么操作?

回答
編輯回答
空痕

我猜你是需要過濾器:https://cn.vuejs.org/v2/guide...

2017年1月11日 01:24
編輯回答
亮瞎她

按照我的理解,應(yīng)該是要實(shí)現(xiàn)一個(gè)“indexList”的功能。
首先基本數(shù)據(jù)應(yīng)該是從后臺(tái)獲取的,大概的結(jié)構(gòu)是這樣的:

[
   { id: '123', name: 'Alis' },
   { id: '234', name: 'Adoul' },
   { id: 'r43', name: 'Aziya' },
   { id: '3f4', name: 'Beal' },
   { id: '2d4', name: 'Beatuly' },
   { id: '1f4', name: 'Babautle' }
]

完了之后,需要對(duì)這個(gè)數(shù)組改造一下,結(jié)構(gòu)大概變成這樣的:cube-ui indexList 組件

然后是組件的js部分:

export default {
  computed: {
    ...mapState(['baseFriendsList']),
    friendsListMutate() {
      const arrMutate = []
      for (let i = 65; i < 91; i++) {
        arrMutate.push({ index: String.fromCharCode(i), list: [] })
      }
      this.baseFriendsList.forEach(obj => {
        const code = obj.name.toUpperCase().charCodeAt(0)
        arrMutate[code - 65].list.push(obj)
      })
    }
  }
}

再然后是template部分:

<template>
  <div class="group" v-for="(g,id) in friendsListMutate" v-if="g.list.length">
    <h1 class="title">{{g.index}}</h1>
    <p class="item" v-for="(o,i) in g.list">{{o.name}}</p>
  </div>
</template>
2017年7月26日 12:46
編輯回答
扯機(jī)薄

謝邀!
要我的話,我不會(huì)使用參數(shù),而使用data中的屬性來作參數(shù)

data () {
    return {
      str: '' // 需要的參數(shù)
    }
},
methods: {
    // 外部事件來處理參數(shù) 
    handler (str) {
        this.str = 'xxx'
    },
    frendSortMethod () {
      const str = this.str
      ......
    } 
}
2018年5月15日 21:01
編輯回答
黑與白

這沒辦法,在一個(gè)vue組件下,動(dòng)態(tài)屬性只會(huì)對(duì)應(yīng)一個(gè)值
只能 通過 方法
frendSortMethod (str) {

....

}
另外,動(dòng)態(tài)屬性要添加 東西的話,可以當(dāng)作代理,但是和你的代碼無關(guān),你可以參考

time: {
    get () {
        return this.inputForm 
    }
    set (value) { 
        this.inputForm = value
    }
}
2017年3月22日 09:23