Vue предупреждает, что свойство не установлено, даже если оно установлено

Question

У меня есть форма с входами, привязанными к моему vue экземпляру с v-моделью. Есть текстовое поле и несколько флажков. Все связанные свойства инициализируются в разделе данных в моем JS. Несмотря на это, vue предупреждает, что свойства «не определены в экземпляре, но используются во время рендеринга». Несмотря на это, страница отображается правильно с правильными инициализированными значениями. Кроме того, эти предупреждения появляются только для флажков, а не для ввода текста.

Я совершенно не понимаю, почему или даже если это проблема (все работает; это только огромное количество предупреждений, которые появляются в консоли, которая дает мне паузу)

HTML

<div id="app">
  <h2>Scan:</h2>
  <form id="formNewScan"  @submit="onNewScanSubmit">
    <div class="form-group row">
      <label class="col-form-label" for="scanName">Scan Name:</label>
      <div class="col-md-10">
        <input class="form-control col-md-10" id="scanName" type="text" placeholder="MyScan" v-model="userData.scanName"/>
      </div>
    </div>
    <hr class="my-3"/>
    <div class="form-group row">

      <input id="scanOS" type="checkbox" v-model="userData.scanOS"/>
      <label class="col-form-label" v-bind:for="scanOS" >OS Scan</label>
      <input id="scanFF" type="checkbox" v-model="userData.scanFF"/>
      <label class="col-form-label" v-bind:for="scanFF" >Firefox Scan</label>
      <input id="scanHTTPD" type="checkbox" v-model="userData.scanHTTPD"/>
      <label class="col-form-label" v-bind:for="scanHTTPD" >Apache httpd Scan</label>
      <input id="scanTC" type="checkbox" v-model="userData.scanTC"/>
      <label class="col-form-label" v-bind:for="scanTC" >Apache Tomcat Scan</label>
      <input id="scanManual" type="checkbox" v-model="userData.scanManual"/>
      <label class="col-form-label" v-bind:for="scanManual" >Grab System Info</label>
      <input id="scanSCC" type="checkbox" v-model="userData.scanSCC"/>
      <label class="col-form-label" v-bind:for="scanSCC" >SCC</label>

    </div>
  </form>
</div>
    

JS

new Vue({
  el: '#app',
  data: {
    userData: {
      scanName: "",
      scanOS: true,
      scanFF: true,
      scanHTTPD: false,
      scanTC: false,
      scanManual: false,
      scanSCC: false,
    },
  },
  methods: {
    onNewScanSubmit: function() {
        console.log("Hello")
    }
  }
})

JS Fiddle: https://jsfiddle.net/La2uv3tn/

РЕДАКТИРОВАТЬ: я скопировал и вставил свои входные данные и не изменил v-bind:for обратно на for. Теперь я также понимаю, что в предупреждении консоли конкретно указано «scanOS», а не «userData.scanOS». Думаю, это то, что я получаю, называя переменные такими же, как идентификаторы элементов ....

Answer 1

Вы связываете строки как переменные. Попробуйте заменить все вхождения v-bind:for=" на for=" в тегах меток. Так как, например, scanOS в v-bind:for="scanOS" является строкой, Vuejs не может найти переменную scanOS.