I get the following error when I run the code below. 'Field or property "Title" does not exist. undefined'
Anyone know why that is? The Title field does exist.
I'm also using Vue.js
<head>
<script type="text/javascript" src="_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="_layouts/15/sp.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.6/vue.min.js"></script>
</head>
<body>
<div id="app">
{{ test }}
<table width="100%" border="1">
<tr>
<td>Department of Veterans Affairs</td>
<td></td>
<td>Memorandum</td>
</tr>
<tr>
<td colspan="2">Date:</td>
<td></td>
</tr>
<tr>
<td colspan="2">From:</td>
<td></td>
</tr>
<tr>
<td colspan="2">Subj:</td>
<td></td>
</tr>
<tr>
<td colspan="2">To:</td>
<td></td>
</tr>
<tr>
<td colspan="3">In accordance with....</td>
</tr>
<tr>
<td colspan="3">
<table border="1" width="100%">
<tr>
<td colspan="2">1.</td>
<td>This memorandum has been prepared .....to support:</td>
</tr>
<tr>
<td colspan="3">
<textarea rows="4" cols="150" v-model="guidance1">
</textarea>
</td>
</tr>
<tr>
<td colspan="2">2.</td>
<td>This memorandum has been prepared .....to support:</td>
</tr>
<tr>
<td colspan="3">
<textarea rows="4" cols="150" v-model="guidance2">
</textarea>
</td>
</tr>
<tr>
<td colspan="2">3.</td>
<td>This memorandum has been prepared .....to support:</td>
</tr>
<tr>
<td colspan="3">
<textarea rows="4" cols="150" v-model="guidance3">
</textarea>
</td>
</tr>
<tr>
<td colspan="2">4.</td>
<td>This memorandum has been prepared .....to support:</td>
</tr>
<tr>
<td colspan="3">
<textarea rows="4" cols="150" v-model="guidance4">
</textarea>
</td>
</tr>
<tr>
<td colspan="2">5.</td>
<td>This memorandum has been prepared .....to support:</td>
</tr>
<tr>
<td colspan="3">
<textarea rows="4" cols="150" v-model="guidance5">
</textarea>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3">Supervisory Review: ______Approved ______Denied</td>
</tr>
<tr>
<td colspan="3">Signature:__________________________________<br />*For completion by Chief or Assistant Director</td>
</tr>
<tr>
<td colspan="3">Final Approval: ______Approved ______Denied</td>
</tr>
<tr>
<td colspan="3">Signature:__________________________________<br />*For completion by Chief or Assistant Director</td>
</tr>
<tr>
<td colspan="3"><button value="Save" @click.prevent="submitForm">Submit</button> <button type="button">Print</button></td>
</tr>
</table>
</div>
</body>
<script type="text/javascript" src="/demo/webparts/pdf/travelMemo_2.js"></script>
new Vue({
el:"#app",
data: {
Title: '',
from: '',
Subj:'',
To: '',
guidance1:'',
guidance2:'',
guidance3:'',
guidance4:'',
guidance5:'',
test: 'Hello World'
},
methods: {
submitForm: function() {
alert("HELLO");
var clientContext = new SP.ClientContext();
var oList = clientContext.get_web().get_lists().getByTitle('Travel Request Memos');
var itemCreateInfo = new SP.ListItemCreationInformation();
var oListItem = oList.addItem(itemCreateInfo);
oListItem.set_item('Title', 'Title field');
oListItem.set_item('From', 'from field');
oListItem.set_item('Subj', 'subject field');
oListItem.set_item('To', 'to field');
oListItem.set_item('Guidance1', this.guidance1);
oListItem.set_item('Guidance2', this.guidance2);
oListItem.set_item('Guidance3', this.guidance3);
oListItem.set_item('Guidance4', this.guidance4);
oListItem.set_item('Guidance5', this.guidance5);
clientContext.load(oListItem);
clientContext.executeQueryAsync(this.onAddSucceeded, this.onAddFailed);
},
onAddSucceeded: function(){
alert("Item added");
},
onAddFailed: function(sender, args) {
alert(args.get_message() + '\n' + args.get_stackTrace());
}
}
})