:class在条件参数更改时崩溃

时间:2019-02-04 14:30:23

标签: vue.js vuejs2

我有一个遍历数组/对象的计算属性。该属性贯穿用户输入以查找我设置的字符数限制,然后绑定警告类。该数组包含两个级别:嵌套在主数组中的第一层数组代表用户在上一步中输入的关键字。然后,在该数组中,存在用于该关键字的特定操作的对象。因此,“活动”输入字段对应于特定的关键字(“对象数组”)。

第一次运行时效果很好,但是当我更改active关键字时,某些内容将变为“未定义”。这是与此操作相关的代码。

注意** this.options只是一个数组:[k1,k2,k3] this.newAd是一个嵌套有包含对象的数组的数组。

<div class="control">
                          <div id="newAd-Preview" class="select">
                            <select v-model="activeKeyword" @change.once="restOfAds()" @change="hideInput2()">
                              <option v-for="option in options">
                                {{option}}
                              </option>
                            </select>
                          </div>
                        </div>

   <div class="field">
      <div class="control is-expanded">
           <input type="text" class="input size19" :class="{'is-danger' : charCheck[keywordIndex].includes('path2')}" v-model="key.path2" placeholder="path2"
              </div>
                  </div>

data:{
  newAds: [
   [{
      h1: '',
      path2
     },
     {
      h1: '',
      path2
     }
    ],
     [
      {
      h1: '',
      path2
     }
     ]
    ]
   ]
  },
computed:{
charCheck (){
  var arr = this.warning;

  for(var z = 0; z < this.newAds.length; z++){
    for(var i = 0; i < this.newAds[z].length; i++){
      if(this.newAds[z][i]['boolean'] === true){
        for(var key in this.newAds[z][i]){
          if(key !== 'boolean' && key !== 'id'){
            var length = this.newAds[z][i][key].replace(/_keyword_/g, this.options[z]).length;
            if( key === 'headline1' || key === 'headline2' || key === 'headline3'){
              if(length > 30){
                this.warning[z][i].push(key)
              }
            } else if( key == 'desc1' || key == 'desc2'){
              if(length > 90){
               this.warning[z][i].push(key)
              }
            } else if( key == 'path1' || key == 'path2'){
              if(length > 15){
                if(!this.warning[z][i].includes(key)){
                this.warning[z][i].push(key)
                }
              }
            }
          }
        }
      }
    }
  }
  return arr[this.keywordIndex];
},
 keywordIndex (){
  var activeKeyword = this.options.indexOf(this.activeKeyword)
  Vue.set(this.activeAd, 0, activeKeyword)
  return this.activeAd[0]
}
}

0 个答案:

没有答案