Question

我有迭代的JSON文件。

它有下一个结构：

{
"id": 4, "question": "Select one color", "answers": 
 [
    {"id": 1, "answer" : "Green", "isSelected" : false}, 
    {"id": 2, "answer": "Red", "isSelected" : false}, 
    {"id": 3, "answer": "Blue", "isSelected" : false},
    {"id": 3, "answer": "White", "isSelected" : false}
 ],
    "MaxAllowedChoice" : 2
}

如果达到MaxAllowedChoice，我需要启用/禁用所有其他项目（复选框）。

我正在使用下一个代码进行迭代：

      processOneQuestion: function (question)
      {
        var isSelectedCount = 0;

        for(var answer of question.answers) // just calculation
        {
          if(answer.isSelected)
          {
            isSelectedCount++;

          }
          console.log("isSelectedCount --> ", isSelectedCount);

        }

        for(var answer of question.answers) // Enabling/Disabling
        {

            if(isSelectedCount >= question.MaxAllowedChoice)
            {
              console.log("isSelectedCount : " + isSelectedCount + " | question.MaxAllowedChoice: " + question.MaxAllowedChoice);
              if(!answer.isSelected) // disable unselected
              {
                answer.isDisabled = true;
                console.log("answer.isDisabled = true");
              }

            }

            if(isSelectedCount !== question.MaxAllowedChoice ) // if MaxAllowedChoice less then isSelectedCount set iterated iterated answers isDisabled to false
            {
               if(!answer.isSelected) // disable unselected
               {
                answer.isDisabled = false;
                console.log("I hope that answer.isDisabled = false was added")

               }
            }
         }   

      }

HTML code：

        <div v-for="firstLevelAnswer in question.answers">                
      <label v-if="!question.isRadioButton"><span class="firstLevelAnswer"><input type="checkbox" class="big-checkbox" :disabled="firstLevelAnswer.isDisabled" v-model="firstLevelAnswer.isSelected" />{{firstLevelAnswer.answer}}</span></label> 
      <label v-if="question.isRadioButton"><span class="firstLevelAnswer"><input type="radio" class="big-checkbox" name="myvalue"/>{{firstLevelAnswer.answer}}</span></label>
      <span v-if="firstLevelAnswer.isTextInput"><input type="text"/></span>
           |  firstLevelAnswer.isSelected: {{firstLevelAnswer.isSelected}} 
           +>|  <span>{{firstLevelAnswer.isDisabled}}</span>

只有在我添加到JSON密钥时才能正常工作："isDisabled" : false如： {"id": 3, "answer": "White", "isSelected" : false, "isDisabled" : false}

但我希望在JS dinamicaly中添加"isDisabled" : false属性。

但是我无法理解我做错了什么以及为什么项目没有禁用。 http://img.ctrlv.in/img/16/03/12/56e47dd115d82.png

看起来属性已添加，但不影响

我已经填充了因为在启动时此属性不存在后添加它会导致问题。这有可能吗？

Answer 1

我会遵循这个逻辑。每当我选择一个选项时，我会检查是否达到了允许的最大限制。

checkDisabled: function() {
  var selectedCount = 0;
  for (var i = 0; i <= this.question.answers.length; i++) {
    if (this.question.answers[i].isSelected == true)
      selectedCount++;
  }

  (selectedCount >= this.question.MaxAllowedChoice) ? return true : return false;
}

然后在HTML中使用此方法来禁用或启用该字段。

无法理解为什么来自JS的属性不会影响

1 个答案: