微信小程序：如何将js中数据通过wxml在界面显示

Question

问题遇到的现象和发生背景

微信小程序
无法将js中数据通过wxml在界面显示，或者说显示不全

问题相关代码，请勿粘贴截图

.js文件如下：

Page({
  data: {
    names: [
        '治疗列表',
        '约诊',
        '消息',
        '顾客信息'
    ],
    navsText: [
        '../appointment/appointment',
        '../customer/customer',
        '../disposalList/disposalList',
        '../message/message',
    ]
  },
    //事件处理函数
  changeMotto: function(btn) {
    //获取button的target下的id参数
    var path;

    var num = btn.target.id;

    switch(num)
    {
        case '0':
           path = '../appointment/appointment'
           break;
        case '1':
           path = '../customer/customer'
           break;
        case '2':
           path = '../disposalList/disposalList'
           break;
        case '3':
           path = '../message/message'
           break;
        default:
           break;
    }

    wx.navigateTo({
 
        // switch
      url: path
    })
  }
})

.wxml文件如下:

<view class="downView">
    <image class="topImage" src="/image/图片1.png"></image>
    <view class="nameBoard">
      <block wx:for="{{names}}" wx:for-index="Index" >
        <swiper-item>
            <button class="nameBoard-btn" bindtap="changeMotto" id="{{index}}">
                <image class="nameBoard-image" src="/image/icon_API_HL.png"></image>
                <text class="nameBoard-text">{{item}}</text>
            </button>
        </swiper-item>
      </block>
    </view>
</view>

运行结果及报错内容

结果如下：无报错

我的解答思路和尝试过的方法

基本网上查到的都试了一下，但是可能理解不到位，还是没有成功，有时四个数据都出来了但是点击按钮没有反应

我想要达到的结果

四个按钮都读出来，并且点击按钮可以进行跳转

Answer 1

改成一致的，index