vantWeapp使用动作面板(van-action-sheet)时数组动态添加编辑数据

项目背景：在实现如下功能时，我们想要实现点击电话按钮实现弹出电话号码面板并点击拨打电话。但是后台返回的电话号码数据并不是数组，因为我们要对data值进行动态添加。

数据格式

对应代码

    <van-action-sheet show="{{ show }}" actions="{{ actions }}" cancel-text="取消" bind:cancel="onClose" bind:close="onClose" bind:select="onSelect" />


  data: {
    show: false,
    actions: [],
  },
  // 选择号码面板弹出
  onEject: function (event) {
    const {
      currentTarget: {
        dataset: { storephone },
      },
    } = event;
    console.log(storephone);
    let actions = [];
    actions.push({ storephone });

    this.setData({
      show: true,
      actions,
    });
  },

动态修改data值

为了防止以后忘记再找以前的代码~~~，这赋值方式确实不太好记住(每天react、vue、微信小程序无缝切换，脑子属实有点儿不好使了)，记下笔记。

  data: {
  mockdata: [
      {
        id: 0,
        shopname: "嗷嗷眼镜店",
        timeline: "9:00-12:00",
        distance: "800m",
        location: [
          {
            id: 102,
            name: "北京市京东总部1号楼c座超级爆丸小子迪迦奥特曼15",
          },
        ],
      },
]
    params: {
      storeId: "",
      guideName: "",
      page: 1,
    },
  },
  test: function (event) {
   // 第一种
   this.setData({
         ["params.page"]: this.data.params.page + 1,
   });
   let index = 0;
   // 第二种
   var key = "mockdata[" + index + "].id";
   this.setData({
      [key]: 10,
   });
   // 第三种
   this.setData({
      ["mockdata[" + index + "].id"]: 10,
   });
  },

在修改完以后又出现了电话号码不显示的问题，后来经过查询官网看到属性名只能为name


修改代码：

  data: {
    show: false,
    actions: [],
  },
  // 选择号码面板弹出
  onEject: function (event) {
    const {
      currentTarget: {
        dataset: { storephone : name },
      },
    } = event;
    console.log(name );
    let actions = [];
    actions.push({ name});

    this.setData({
      show: true,
      actions,
    });
  },

正常显示，大功告成，继续写别的bug了

参考链接：vant Weapp官网
博客园