vue2 组件 计算属性 双向绑定

改变原数组方法可以响应式返回双向绑定结果

push() - 向数组的末尾添加一个或多个元素，并返回新的长度。
pop() - 删除数组的最后一个元素，并返回被删除的元素。
shift() - 删除数组的第一个元素，并返回被删除的元素。
unshift() - 在数组的开头添加一个或多个元素，并返回新的长度。
splice() - 通过删除现有元素和/或添加新元素来修改数组，改变原数组的内容。
sort() - 对数组的元素进行排序，并直接改变原数组。
reverse() - 将数组中元素的位置颠倒，直接改变原数组。
fill() - 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素，直接改变原数组。
copyWithin() - 在数组内部，将一段元素序列拷贝到另一段位置上覆盖原有的序列，直接改变原数组。

<template>
	<view class="">
		<slot>
			<view class="list">
				<view :class="{'checked': selectValue.includes(item[valueKey]),'disabled': (disabled || item.disabled) }"
					v-for="(item,index) in options" :key="index" @click.stop="onSelect(item, index)">
					<view class="checkbox">
						<view class="checked_gou"></view>
					</view>

					<text class="text">{{ item[labelKey] }}</text>
				</view>
			</view>
		</slot>
	</view>
</template>

<script>

	export default {
		name: "my-radio-group",
		props: {
			value: {},
			options: {
				default: () => []
			},
			labelKey: {
				type: String,
				default: "label"
			},
			valueKey: {
				default: "value"
			},
			
		},
		data() {
			return {
			
			};
		},
		
		computed: {
			selectValue(){
				let value = this.value;
				let newValue = []
				if (value || value === 0) {
					newValue = Array.isArray(value) ? value : Array.of(value)
				}
				console.log('计算选中的值: ', newValue);
				return newValue
			},
		},
		methods: {
			async onSelect(item, index) {
				
				this.selectValue.push(item[this.valueKey])

			},

		},
	}
</script>

<style lang="scss" scoped>

</style>