Реактивный элемент Vue-js влияет на другой элемент

#vue.js #vue-component

Вопрос:

У нас есть страница vue-js (@vue/cli 4.5.6) с многочисленными компонентами, которая в основном работает нормально. Один компонент делает что-то, чего я не понимаю: есть два радиоприемника, один вверху страницы, другой внизу. Они кажутся совершенно не связанными; вот один

     <template v-for="qSection in qSections">
    ...
      <!--- loop to output individual questions here --->
      <tr v-for = "question in qSection.questions">
        <td>
          {{ question.txt }}
          <div v-if="question.incf">
            <br/>
            <textarea rows="2" cols = "80" :name= "question.cmt" 
              v-model="question.cmt" placeholder = "Comments here"
              class="hideOnPrint"
            />

            <div class="print-only"> {{ question.cmt }} </div>
          </div>
        </td>
        <!-- okay, three more tds to hold radio box-->
        <template v-for="icnt in [1,2,3]">
        <td>
            <label v-if="question.otherAns" class="other-ans-label">
              {{ question.otherAns[icnt].txt }}
            </label><br/><br/>
            <input type = "radio" :name= "question.quesn" :value = "(icnt%3)"
              v-model="question.answer"/>
        </td>
        </template>
      </tr>
 

Вот другой

         <template v-if="section.otype1 != 'Laboratory'">
          <div class="hideOnPrint">
            <input type = "radio" :name = "section.accept" :value="1"
              v-model="section.accept"
            >
              {{acceptPhrase}}
            </input>
            <br/><br/>
            
            <input type = "radio" :name = "section.accept" :value="0"
              v-model="section.accept"
            >
              Investigation is incomplete. See comments.
            </input><br/><br/>
          </div>
        </template>
 

Итак, происходит то, что при нажатии переключателя в нижней области (только для значения=»1″) отменяется нажатие переключателя в верхней области (вопрос.ответ, в зависимости от того, что выбрано).
Согласно приложению Vue в Инструментах разработчика, данные верхней области все еще заданы: вопросы.ответ = 2, скажем. И действительно, если я установлю его равным 1 там и обратно 2, этот радиоприемник будет правильно перепроверен.

Как это происходит и что мне нужно изменить, чтобы исправить это? Или что я должен сделать, чтобы диагностировать это. Спасибо!

Я хотел бы привести рабочий пример, но не знаю, как это сделать; остальная часть страницы состоит из множества частей.

Ответ №1:

О, ничего себе: я понял свою ошибку. Это те строки в коде
:имя= «вопрос.вопрос»
и
:имя = «раздел.принять».
Они устанавливают имя радиоприемника в значение этих полей. Они оба в конечном итоге равны 1, и поэтому два радиоприемника становятся одним радиоприемником. Щелчок по одному выключает другой. Вообще не следует использовать имя; v-модель выполняет свою работу.