Question

我有一个带有一些输入和复选框组的创建新表单。每当我检查任何一个选项时，所有输入数据都会被重置。请检查下面的代码。我不希望这样重置输入。有人可以为我指出我错了吗？我曾在谷歌上搜索过此内容，但是大多数帖子都涉及到如何在选中复选框后重置表单。

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复选框时，将其他输入重新设置为数据对象中的值。

使用Vue js选中复选框后输入数据已重置

1 个答案: