JSFiddle - React, Tailwind, and code Playground

HTML

<div id="productSelect">
	<li v-bind:class="{'active' : item.selected}" v-for="(item, index) in realList" @click="selectItem(index)">{{item.name}}</li>
</div>

CSS

* {
  user-select: none;
}

li {
  color: blue;
}

li.active {
  color: red;
}

JavaScript

var productChoice = new Vue({
	el: "#productSelect",
	data: {
		list: [],
    realList: []
	},
	created: function() {
		this.loadDate();
	},
	methods: {
		loadDate: function () {
			//AJAX, 成功后传一个 Array 给 printProductList
      let arr = [
      {name: 'string4'},
    	{name: 'string5'},
    	{name: 'string6'}
      ]
			setTimeout(() => {
        this.list = arr;
      	this.printProductList(arr);
      }, 3000)
		},
		selectItem: function(i) {
			this.realList[i].selected = !(this.realList[i].selected);
		},
		printProductList: function(arr) {
			let list = [];
			for(x in arr) {
				//经过某从筛选，通过的 push 到 list
				arr[x].selected = false; //每个条目中原先是没有 selected 这个属性的，这里加上去
				list.push(arr[x]);
			}
			this.realList = list;
		}
  }
})