vue+赋值html,vue中怎么给下面的这种html结构的 中的options[?]赋值？

//需求是:变量number是2 对应的是4个video的视频墙 (1个 ，4个，9个，以此类推的视频监控墙)number是3 对应的结构就是9宫格，现在要做的是 把数组options中的地址赋值给 (v-bind:options) 它是一个对象，怎么才能把数组options中的对象依次赋值给这个video，并且要能够随意赋值给这个video,因为是这样的双for结构 不知道怎么写算法了

require('videojs-flash')

export default {

data() {

return {

number:3,

option:null,

options:[

{

sources: [{

type: "rtmp/flv",

// src: "rtmp://192.168.0.11:1935/live/01"

src: "rtmp://live.hkstv.hk.lxdns.com/live/hks"

}],

techOrder: ['flash'],

autoplay: true,

controls: true,

fluid:true

},

{

sources: [{

type: "rtmp/flv",

// src: "rtmp://192.168.0.11:1935/live/01"

src: "rtmp://live.hkstv.hk.lxdns.com/live/hks"

}],

techOrder: ['flash'],

autoplay: true,

controls: true,

fluid:true

}

]

}

},

created(){

for( var i = 0 ; i

this.option = this.options[i]

}

// alert(1);

}

}

.box{

display: flex;

flex-direction: column;

}

.row{

display: flex;

flex-wrap: wrap;

flex: 1

}

.col{

flex: 1;

}