不明白为什么来自 JS 的属性不影响

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 代码：

        <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 中添加 "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 中使用此方法来禁用或启用该字段。