Javascript Vue.js模态对话框不'；不显价值

我有一个模态对话框，应该会自动填充值。 看起来是这样的：

正如您在控制台中看到的，

listcography

具有值

Social（Comment）

，但它没有出现在模式对话框中，我不知道为什么

它只有在我写下以下内容时才有值：

return {
  commentData: {
     comment: "",
     customDate: ""
  },
  selectedCategory: "Social (Comment)",
  lang: {
      default: "en"
  }
};

我对Vue.js不太熟悉，这就是为什么我想知道如何将

列表类别

分配给

选定类别

这不起作用：

selectedCategory: listCategory,

这也不是：

selectedCategory: this.listCategory,

代码如下：

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"
                }
            };
        },

导出默认值{
道具：[“文本”]，
组件：{DatePicker}，
数据：函数（）{
var列表类别；
var-listComment；
var-listDate；
让siteUrl为空https://thesite.sharepoint.com/sites/Playercard/';
让clientContext=new SP.clientContext（siteUrl）；
让oList=clientContext.get_web（）.get_lists（）.getByTitle（'Comment'）；
设camlQuery=new SP.camlQuery（）；
camlQuery.set_viewXml（“”+
'100');
var collListItem=oList.getItems（camlQuery）；
加载（collListItem）；
log（“clientContext已加载！”）；
//首先，我们执行查询以检索项目
clientContext.executeQueryAsync（（）=>{
//现在CollitItem是一个集合，我们必须遍历它
var listItemEnumerator=collListItem.getEnumerator（）；
while（listItemEnumerator.moveNext（））{
var oListItem=listItemEnumerator.get_current（）；
listDate=oListItem.get_项目（“日期”）；
listCategory=oListItem.get_项（'Category'）；
listComment=oListItem.get_项（'Comment'）；
}
console.log（“listDate:+listDate”）；
console.log（“listCategory”+listCategory）；
log（“listComment:+listComment”）；
this.commentData.customDate=listDate；
this.commentData.selectedCategory=listCategory；
this.commentData.comment=listComment；
clientContext.executeQueryAsync(
（）=>console.log（'已编辑的项'），
（）=>console.log（'未能编辑项'）；
},
（）=>console.log（'检索项目失败'）；
返回{
评论数据：{
评论：“，
海关日期：“
},
所选类别：“”，
朗：{
默认值：“en”
}
};
},

以下是模板的相关部分：

<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>

类别
*
社会（评论）
体育（评论）
学校（评论）
其他（评论）

错误在线路中

this.commentData.selectedCategory=listCategory；

换成

this.selectedCategory=listCategory；

错误在第行

this.commentData.selectedCategory=listCategory；

换成

---

this.selectedCategory=listCategory；

您在这里遇到了一个问题：

  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;

将其更改为：

      console.log("listCategory " + listCategory);
      console.log("listComment: " + listComment);
      this.commentData.customDate = listDate;
      this.selectedCategory = listCategory;      
      this.commentData.comment = listComment;

---

这里有一个问题：

  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;

将其更改为：

      console.log("listCategory " + listCategory);
      console.log("listComment: " + listComment);
      this.commentData.customDate = listDate;
      this.selectedCategory = listCategory;      
      this.commentData.comment = listComment;

---

你使用v-select分类吗？@AbhishekKulkarni我使用v-model。编辑邮件你使用v-select分类吗？@AbhishekKulkarni我使用v-model。编辑邮件