请问如何让两个picker的选择内容是独立的？

data: {
    array: ['全新', '瑕疵', '残损'],
    objectArray: [
      {
        id: 0,
        name: '全新'
      },
      {
        id: 1,
        name: '瑕疵'
      },
      {
        id: 2,
        name: '残损'
      }
    ],
    index: 0,

    array1: ['收纳工具', '手账用品', '数码电器','服装饰品'],
    objectArray1: [
      {
        id: 0,
        name: '收纳工具'
      },
      {
        id: 1,
        name: '手账用品'
      },
      {
        id: 2,
        name: '数码电器'
      },
      {
        id:3,
        name: '服装饰品'
      }
    ],
    index: 0,
  },

  bindPickerChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },

这是js文件

<mp-cell prop="quality" title="品质" ext-class="">
        <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
            <view class="picker">{{array[index]}}</view>
        </picker>
      </mp-cell>

<mp-cell prop="classification" title="分类" ext-class="">
        <picker bindchange="bindPickerChange1" value="{{index}}" range="{{array1}}">
            <view class="picker">{{array1[index]}}</view>
        </picker>
      </mp-cell>

这是wxml文件

现在出现的问题是我第一个picker点了 id:0 的选择之后，第二个picker也会显示 id:0 的选择，而我希望他们两个选择是不受对方影响的。请问应该怎么做？求指点，谢谢！