无法使用'in'运算符在vue.js中未定义的位置搜索'xxxxx'

Question

我正在尝试创建将添加记录的模式形式。我能够显示数据中的默认值，但是当我尝试修改字段时，每当尝试在输入框中键入更改时，都会收到以下错误。

*vue.min.js:6 TypeError: Cannot use 'in' operator to search for 'fullname' in undefined
    at a.ke [as $set] (vue.min.js:6)
    at input (eval at Ya (vue.min.js:1), <anonymous>:3:2182)
    at He (vue.min.js:6)
    at HTMLInputElement.n (vue.min.js:6)
    at HTMLInputElement.Yr.o._wrapper (vue.min.js:6)*

在下面给出的内容中，我添加了我要创建的组件的代码：请提供任何帮助。

var bus = new Vue();

Vue.component('leagues_add', {

	props:	{
			show: Boolean,
			is_admin: Boolean,
			
		},

	data: function () {
			return {
				newLeague: {"fullname":"a", "notes":"b", "group_image_path": "c"} // remember to always enclose the fieldnames in doublequotes
			}
		},

	methods: {
			    closeModal() {
				   this.show = false;
				},
				showModal() {
							this.show = true;
				},
				addLeague() {
				event.preventDefault();

				var formData = this.toFormData(this.newLeague);

				axios.get("http://"+ window.location.hostname +"/db/leagues/index.php?action=create").then(function(response){

				if (response.data.error) {
					app.errorMessage = response.data.message;
				} else {
					app.leagues = response.data.leagues;
				}

			    });
				},
				toFormData(obj) {
					var fd = new FormData();
					for (var i in obj) {
						fd.append(i, obj[i]);
					}
					return fd;
				},

			}
	,
	template:  
	`
	<!-- Add new Leage -->

	<div>	
        <div class="text-center pb-3" >
		<button type="button" class="btn btn-outline-primary bg-success text-white" @click="showModal"><b class="" style="">Add League</b></button>
	</div>

	<transition name="modal">	
		<div id="overlay" v-show="this.show">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title">Add League</h5>
						<button type="button" class="close" @click="closeModal"><span aria-hidden="true">×</span></button>
					</div>
					<div class="modal-body">
						<form action="#" method="POST">
							<div class="form-group">
								<input type="text" v-model="this.newLeague.fullname" class="form-control form-control-md" placeholder="Name of League">
							</div>
							<div class="form-group">
								<textarea v-model="this.newLeague.notes" rows="3" cols="100%" name="notes" class="form-control form-control-md" placeholder="Describe this league">
								</textarea>
							</div>
							<div class="form-group form-inline ">
								<div class="col-12 p-0">
									<input type="url" v-model="this.newLeague.group_image_path" class="col-5 pull-left form-control form-control-md" placeholder="Image URL">
												&nbsp;
								    <button class="col-4 btn btn-primary btn-md">Image</button>
								</div>
							</div>
							<div class="form-group">
								<button class="btn btn-info btn-block btn-md" @click="closeModal();addLeague();">Add this league</button>
							</div>
						</form>
					</div>
				</div>
			</div>			
		</div>
	</transition>
<div>
	
	`

});

<div class="row">
     <div class="col-md-12">LEAGUES SECTION</div>
</div>
<div class="row mt-2">      
    <div class="col-md-12">
       <leagues_add :show="true" />
    </div>
</div>

     

Answer 1

问题在这里：

v-model="this.newLeague.fullname"

无法将this.和v-model一起使用。相反，它应该是：

v-model="newLeague.fullname"

您还应该在模板中删除对this的所有其他引用。在许多情况下，它们是无害的，但有时，例如在v-model中，它们会引起问题。

下面完整的例子。请注意，在编辑文本时，第一个输入是如何无法正常工作的。

new Vue({
  el: '#app1',
  
  data () {
    return { newLeague: { fullname: 'League 1' } }
  }
})

new Vue({
  el: '#app2',
  
  data () {
    return { newLeague: { fullname: 'League 1' } }
  }
})

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

<div id="app1">
  <input type="text" v-model="this.newLeague.fullname">
  {{ newLeague.fullname }}
</div>

<div id="app2">
  <input type="text" v-model="newLeague.fullname">
  {{ newLeague.fullname }}
</div>