[英]Vue.js Modal Dialog doesn't show value
I have a modal dialog that should get filled automatically with values.我有一个模式对话框,应该自动填充值。 It looks like this:它看起来像这样:
As you can see in the console, listCategory
has the value Social (Comment)
, but it doesn't appear in the modal dialog and I don't know why.正如您在控制台中看到的, listCategory
的值为Social (Comment)
,但它没有出现在模式对话框中,我不知道为什么。
It only has a value if I write this:如果我写这个,它只有一个值:
return {
commentData: {
comment: "",
customDate: ""
},
selectedCategory: "Social (Comment)",
lang: {
default: "en"
}
};
I'm not too familiar with Vue.js which is why I want to know how one can assign listCategory
to selectedCategory
.我对 Vue.js 不太熟悉,这就是为什么我想知道如何将listCategory
分配给selectedCategory
。
This doesn't work:这不起作用:
selectedCategory: listCategory,
Nor does this:这也不是:
selectedCategory: this.listCategory,
Here is the code:这是代码:
export default {
props: ["text"],
components: { DatePicker },
data: function() {
var listCategory;
var listComment;
var listDate;
let siteUrl = 'https://thesite.sharepoint.com/sites/Playercard/';
let clientContext = new SP.ClientContext(siteUrl);
let oList = clientContext.get_web().get_lists().getByTitle('Comment');
let camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\'ID\'/>' +
'<Value Type=\'Number\'>100</Value></Eq></Where></Query></View>');
var collListItem = oList.getItems(camlQuery);
clientContext.load(collListItem);
console.log("clientContext loaded!");
// First we much execute the query to retrieve the items
clientContext.executeQueryAsync(()=> {
// Now colListItem is a collection, we must iterate through it
var listItemEnumerator = collListItem.getEnumerator();
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
listDate = oListItem.get_item('Date');
listCategory = oListItem.get_item('Category');
listComment = oListItem.get_item('Comment');
}
console.log("listDate: " + listDate);
console.log("listCategory " + listCategory);
console.log("listComment: " + listComment);
this.commentData.customDate = listDate;
this.commentData.selectedCategory = listCategory;
this.commentData.comment = listComment;
clientContext.executeQueryAsync(
() => console.log('Item(s) edited')),
() => console.log('Failed to edit item(s)');
},
()=>console.log('Failed to retrieve items'));
return {
commentData: {
comment: "",
customDate: ""
},
selectedCategory: "",
lang: {
default: "en"
}
};
},
Here's the relevant part of the template:这是模板的相关部分:
<div class="row">
<div class="d-inline col-lg-4 col-md-4 col-sm-4" padding="0px">
Category
<font color="red">*</font>
</div>
<div class="d-inline col-lg-8 col-md-8 col-sm-8" padding="0px">
<select v-model="selectedCategory">
<option>Social (Comment)</option>
<option>Sport (Comment)</option>
<option>School (Comment)</option>
<option>Others (Comment)</option>
</select>
</div>
</div>
error is in line this.commentData.selectedCategory = listCategory;
错误在this.commentData.selectedCategory = listCategory;
replace it with this.selectedCategory = listCategory;
将其替换为this.selectedCategory = listCategory;
You have an issue here:你在这里有一个问题:
console.log("listCategory " + listCategory);
console.log("listComment: " + listComment);
this.commentData.customDate = listDate;
this.commentData.selectedCategory = listCategory; -----------> Your commentData dict does not have selectCategory as a key
this.commentData.comment = listComment;
Change it to this:将其更改为:
console.log("listCategory " + listCategory);
console.log("listComment: " + listComment);
this.commentData.customDate = listDate;
this.selectedCategory = listCategory;
this.commentData.comment = listComment;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.