vue2 中使用Highcharts

stackoverflow 上的有答案 http://stackoverflow.com/questions/38777136/highcharts-in-vue-js-component
因为画布要刷新，涉及到数据销毁, 需要执行 this.target.destroy(); 。
需要注意的是，当数据处于隐藏状态时不能触发 beforeDestroy ， 即 <div v-show="isShow"></div>
刷新数据需要销毁之前的画布数据， 利用 v-if 进行动态销毁、新增。

<script>
var Highcharts = require('highcharts');
export default {
    name : "Chart",
    props : {
    series : {
        type: Array,
        required: true
    }
    },
    data : function() {
    return {
        target: undefined
    }
    },
    mounted : function() {
    this.target = Highcharts.chart(this.$el, {
        title: {
        text: 'Monthly Average Temperature',
        x: -20 //center
        },
        subtitle: {
        text: 'Source: WorldClimate.com',
        x: -20
        },
        xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
        title: {
        text: 'Temperature (°C)'
        },
        plotLines: [{
        value: 0,
        width: 1,
        color: '#808080'
        }]
    },
    tooltip: {
        valueSuffix: '°C'
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
            borderWidth: 0
    },
    series: this.series
    });
},
beforeDestroy: function() {
    this.target.destroy();
},
}
</script>

vue2 使用select2

先看官方示例

<div id="el"></div>
<!-- using string template here to work around HTML <option> placement restriction -->
<script type="text/x-template" id="demo-template">
<div>
    <p>Selected: {{ selected }}</p>
    <select2 :options="options" v-model="selected">
    <option disabled value="0">Select one</option>
    </select2>
</div>
</script>

<script type="text/x-template" id="select2-template">
<select>
    <slot></slot>
</select>
</script>

Vue.component('select2', {
props: ['options', 'value'],
template: '#select2-template',
mounted: function () {
    var vm = this
    $(this.$el)
    .val(this.value)
    // init select2
    .select2({ data: this.options })
    // emit event on change.
    .on('change', function () {
        vm.$emit('input', this.value)
    })
},
watch: {
    value: function (value) {
    // update value
    $(this.$el).val(value)
    },
    options: function (options) {
    // update options
    $(this.$el).select2({ data: options })
    }
},
destroyed: function () {
    $(this.$el).off().select2('destroy')
}
})

var vm = new Vue({
el: '#el',
template: '#demo-template',
data: {
    selected: 0,
    options: [
    { id: 1, text: 'Hello' },
    { id: 2, text: 'World' }
    ]
}
})

上面是官方的代码有个问题， 就是当 一个事件，比如 click 让select的值发生改变，但select2不会自动进行切换。

改动下select2组件，赋值后使select2同步变化。
下面是我自己改进后的：

Vue.component('select2', {
props: ['options', 'value'],
template: '#select2-template',
mounted: function () {
    var vm = this
    $(this.$el)
    // .html('')
    // init select2
    .select2({ data: this.options })
    .val(this.value)
    .trigger('change')
    // emit event on change.
    .on('change', function () {
        vm.$emit('input', this.value)
    })
},
    watch: {
    value: function (value, old) {
    // update value
    if ( value === old )
        return ;
    console.log('change value: '+this.value+'-- old: '+old)

    $(this.$el).val(value).trigger('change')
    },
    options: function (options) {
    // update options
    console.log('value: '+this.value)
    $(this.$el).html('').select2({ data: options }).trigger('change')
    }
},
destroyed: function () {
    $(this.$el).off().select2('destroy')
}
})

var vm = new Vue({
el: '#el',
template: '#demo-template',
data: {
    selected: 2,
    options: [
    { id: 1, text: 'Hello' },
    { id: 2, text: 'World' }
    ]
},
methods:{
    tt: function(){
    this.options = [{id:33, text:'sdfs'}, {id:24, text:34}]
    },
    tt1: function(){
    this.options = [{id:44, text:'师傅带'}, {id:4, text:'放大'}];
    var self = this;
    // this.$nextTick(function(){this.selected = 4;});   
    setTimeout(function(){self.selected = 4;}, 0);       
    }
}
})