(简易)测试数据构造平台: 23 编辑工具

【本节目标】实现编辑工具功能的 显示旧数据功能

当前，我们点开编辑按钮后，发现旧工具名字输入框是空的。目的是让这个可以显示工具原本的名字

做法如下：

找到原本工具的名字，首先我们首页看到的是一堆工具：

那么点击他们自己编辑按钮，要怎么来区分呢？

当然是点击编辑后我们会传入这一行工具的独特的数据。

不过这里有俩个数据都可以验明身份：1. 列表的下标 ， 2. 工具的id

如果使用列表下标，那么我们直接从该页面获取的工具列表数据变量中就可以拿到工具的全部数据，自然也包括这个名字。

如果使用工具id，那么我们就只能发送一个axios的http的get请求去后台获取到这个工具的所有数据。这样虽然麻烦，但是也更为实时。

不过我们这里肯定选用列表下标，因为简单：

到这里我们要思考一下，这个tool_old是我们已经拿到的数据。

但是要怎么给渲染到dom层的输入框呢？

原来，在vue中，inuput输入框的值要想被控制，那么就需要绑定一个变量。然后只要这个变量更改，那么这个input输入框的值也会同步更改：

注意，我故意把这个变量设计的复杂了一点，为一个叫做form_data的字典，且里面有个元素名为name，默认值为空。

为什么不直接就写一个name变量呢？因为，这个dialog对话框后续上面可能会有很多输入框，为了把它们都集中在一起，所以最外层用这个字典来包裹上。

那么为什么要写个默认值呢？因为只有这样才能让一开始这里面没有值的时候，dom层也可以正常渲染。(实际上多层字典才会触发这种vue的特有bug)

有了这个默认值，我们在dom层的输入框中给它绑定上就可以了：

那么到此我们还剩最后一步，就是在把前面找到的工具的旧名称赋值给变量form_data既可。其中的name也会自动赋值。

然后我们保存，刷新页面测试：

可以看到，工具的名字已经成功显示在了输入框内。

下节课：我们搞定保存新数据进去