列表渲染，将整个列表绑定一个长度对应的数组，为什么数据绑定不成功？

粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

大家好。我需要渲染一个li列表，将每个li的class绑定到数组items中对应的位置，点击li后改变items[index]，从而改变li的class。但是结果并不如我所愿，items[index]确实改变了，但li的class并没有如愿的改变。主要代码如下，请教各位朋友，是我什么地方写错了吗？

Vue.component('v-choice', {
	props: ['question'],
	data: function () {
		return {
			items: [],
		}
	},
	methods: {
		getAnswer: function (index) {
			this.items[index] = 'active'
			console.log(this.items)		// 这里是显示 items[index] 确实被赋值成active了
		}
	},
	created: function() {
		let len = this.question.options.length
		let items = []
		for ( let i = 0; i < len; i++ ) {
			items[i] = ''
		}
		this.items = items
	},
	template: `
		<ul class="qt-items">												// 可是此处的 class 并没有随着数据的 items[index]的改变而改变
			<li v-for="(option, index) in question.options" v-bind:class="items[index]" @click="getAnswer(index)">
				<div class="qt-item-order"><em>{{ numToLetter(index) }}</em></div>
				<div class="qt-item-detail"><p>{{ option.answer }}</p></div>
			</li>
		</ul>`
})