【急】vue無(wú)法獲取外部js生成的數(shù)據(jù)，el或是dom問(wèn)題？

業(yè)務(wù)需求一個(gè)日歷頁(yè)面，就找到一個(gè)js日歷插件嘗試導(dǎo)入。日歷導(dǎo)入沒(méi)問(wèn)題，現(xiàn)在想實(shí)現(xiàn)的是點(diǎn)擊日歷然后返回選擇的日期。流程是點(diǎn)擊日歷，日歷的js響應(yīng)然后返回一個(gè)數(shù)據(jù)。插件提供了獲取選擇日期的接口，但是vue一直得不到返回的數(shù)據(jù)。個(gè)人的想法是添加el屬性來(lái)控制dom但是export default的方式不能添加el屬性，希望大神們幫忙看下怎么解決，跪謝~
【content.vue】（顯示頁(yè)面）

<template id="content">
  <div id="content" style="font-family:微軟雅黑">
    <br>{{date}}<br>{{selectdate}}
    <div>
      <div  id="container" v-on:click="aa"></div>
    </div>
  </div>
</template>

<script>
import  SimpleCalendar from '../js/simple-calendar'
import  '../css/simple-calendar.css'

export default {
  name:'content',
  data() {
    return {
      selectdate:'',
      date:''
    }
  },
  mounted:function(){
  this.$nextTick(()=>{
   var myCalendar = new SimpleCalendar('#container');
   this.selectdate=myCalendar.getSelectedDay()+1;
 })
  },
  watch:{
  },
  methods:{
    aa:function(){
      //this.selectdate=myCalendar.getSelectedDay()+1;
    }
  }
}
</script>

<style>
</style>

【simple-calendar.js】（因代碼量較多只貼出部分關(guān)鍵代碼）

var _createClass = function () {..}
var SimpleCalendar = function () {
  //構(gòu)造函數(shù)

  function SimpleCalendar(query, options) {
    _classCallCheck(this, SimpleCalendar);

    //默認(rèn)配置
    this._defaultOptions = {
      width: '500px',
      height: '500px',
      ...
            }
    };
    //容器
    this.container = document.querySelector(query);
    //構(gòu)建日歷
    this.create();
}
//功能函數(shù)
_createClass(SimpleCalendar, [{
//獲取選擇的日期
    key: 'getSelectedDay',
    value:function getSelectedDay() {
      var selectYear = this.container.querySelector('.sc-select-year').value;
      var selectMonth = this.container.querySelector('.sc-select-month').value;
      var selectDay = this.selectDay.querySelector('.day').innerHTML;
      return new Date(selectYear, selectMonth - 1 + count, selectDay);
    }   
  }, {
//點(diǎn)擊事件（默認(rèn)定位在今天，現(xiàn)在點(diǎn)擊另外一天）
     key: 'updateEvent',
    value: function updateEvent() {
    var daysElement = this.arrayfrom(this.container.querySelectorAll('.sc-item'));
      var container = this.container;
      var calendar = this;
      daysElement.forEach(function (v, i) {
      //鼠標(biāo)點(diǎn)擊
        v.onclick = function () {
          calendar.selectDay = v;
      //其他判定
      var pre = container.querySelector('.sc-selected');
      if (pre) pre.classList.remove('sc-selected');
      this.classList.add('sc-selected');
      if (typeof calendar._options.onSelect === 'function') {
        calendar._options.onSelect(calendar.getSelectedDay());
      }
      //關(guān)鍵點(diǎn)：傳遞數(shù)據(jù)------------此處向vue傳遞數(shù)據(jù)，但是拿不到
      content.date = calendar.getSelectedDay()+1;
      //更新選擇的日期數(shù)據(jù)
      ...
      ...

}

        };
        ...
    }    
  }])

之前做過(guò)一個(gè)簡(jiǎn)易的demo引入這個(gè)日歷是可以拿到傳遞回來(lái)的數(shù)據(jù)的，如下
【index.html】（另外一個(gè)項(xiàng)目）

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/simple-calendar.css">
        <script type="text/javascript" src="js/simple-calendar.js"></script>
        <script src="js/vue.min.js"></script>
    </head>
    <body>
        <div id="content">
            <div id = "container"></div>
{{date}}
        </div>
 <script>
        var app = new Vue({
            el:'#app',
            data: {
                city:'',
                date: new Date(),
            }
        })
        var myCalendar = new SimpleCalendar('#container');
 </script>

    </body>

</html>

這樣在js里面用app.date = calendar.getSelectedDay()+1;就可以直接拿到數(shù)據(jù)。迷惑啊。。求解

回答

編輯回答

大濕胸

我的大概思路是，讓SimpleCalendar插件內(nèi)部的點(diǎn)擊事件去觸發(fā)回調(diào)函數(shù)，把內(nèi)部的數(shù)據(jù)通過(guò)回調(diào)函數(shù)傳出去。

// .vue部分
export default {
    name:'content',
    data() {
        return {
            selectDate:'',
            date:''
        }
    },
    mounted:function(){
        this.$nextTick(()=>{
            new SimpleCalendar('#container', {}, this.callback.bind(this));
        })
    },
    methods:{
        callback:function(val){
            this.selectDate = val;
        }
    }
}

// SimpleCalendar部分
// 構(gòu)造函數(shù)添加cb
function SimpleCalendar(query, options, cb) {
    ...
    this.cb = cb;
}

// 插件內(nèi)部點(diǎn)擊事件回調(diào)cb傳遞數(shù)據(jù)
daysElement.forEach(function (v, i) {
    //鼠標(biāo)點(diǎn)擊
    v.onclick = function () {
        calendar.selectDay = v;
        ...
        this.cb(calendar.getSelectedDay()+1);
    }.bind(this)
}

2018年6月16日 17:01