Входные данные сбрасываются после того, как флажок установлен при использовании Vue JS

Question

У меня есть новая форма создания с некоторыми входными данными и группой флажков.Всякий раз, когда я проверяю любой из параметров, все входные данные будут сброшены.Пожалуйста, проверьте код ниже.Я не хочу, чтобы мой вход был сброшен, как это.Может ли кто-нибудь указать мне, где я был не прав?Я сделал Google об этом, но большинство сообщений о том, как они могут сбросить форму, когда флажок установлен.

new Vue({
  el: '#linktable',
  data () {
      return {
        info:[
      { name: 'Category1', value: '1' },
      { name: 'Category2', value: '2' },
      { name: 'Category3', value: '3' }
       ],
       
        checkName: [],
        ChannelName:'',
        Description:'',
        URL: '',

        
      }
    },
 })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<form autocomplete="off" id="linktable">
                <div class="form-group form-material">
                  <label for="inputText" class="form-control-label">Name</label>
                    <input input type="text" class="form-control" placeholder="Input Product Name" :value="ChannelName" id="AddNewChannelName"/>
                </div>
                <div class="form-group form-material">
                  <label for="inputText" class="form-control-label">Description</label>
                  <input type="text" class="form-control" placeholder="Input Description" :value="Description" id="AddNewDescription"/>
                </div>
                <div class="form-group form-material">
                 
                    <label class="form-control-label">Category</label>
                    <div v-for="items in info"  >
                        <input type="checkbox"  :value="items.value"  v-model="checkName" >
                        <label >{{items.name}}</label>
                    </div>
                    <span>Checked names: {{ checkName }}</span>
                 
                </div> 
                </form>

Answer 1

Вам необходимо удалить привязки :value и изменить их на v-model на ваших входах.Примерно так:

<input input type="text" class="form-control" placeholder="Input Product Name" v-model="ChannelName" id="AddNewChannelName"/>
<input type="text" class="form-control" placeholder="Input Description" v-model="Description" id="AddNewDescription"/>

Ваша проблема заключалась в том, что вы меняли значения своих входов обратно на ''.Когда вы щелкнули по флажку Vue, установите для остальных входов значения в вашем объекте данных.