HarmonyOS 数据绑定失败，如何破？

Question

HarmonyOS App 开发中，在使用数据绑定时，数据无法正确绑定到视图。

问题代码如下：

<!-- 确保数据绑定语法正确 -->
<Text value="{{item.title}}"></Text>

// 确保数据模型正确
this.data = {
  items: [
    { title: 'Item 1' },
    { title: 'Item 2' }
  ]
};

Answer 1

确保数据绑定语法正确

// 确保数据绑定语法正确
<Text value="{{item.title}}"></Text>

确保数据模型正确

this.data = {
  items: [
    { title: 'Item 1' },
    { title: 'Item 2' }
  ]
};

使用循环生成列表项

<!-- 在视图中使用For循环绑定数据 -->
<List>
  <For each="{{item}}" index="{{index}}" of="{{items}}">
    <Text value="{{item.title}}"></Text>
  </For>
</List>

// 在JS文件中定义数据模型
export default {
  data: {
    items: [
      { title: 'Item 1' },
      { title: 'Item 2' }
    ]
  }
};