【问题标题】：vue.js updating different model from form selectvue.js 从表单选择更新不同的模型
【发布时间】：2016-11-13 18:02:01
【问题描述】：

我有一个使用vue.js 创建的动态选择列表。我想用通过ajax 调用获取的数据更新页面上的“详细信息”框。基本思路在这里：https://jsfiddle.net/pznej8dz/1/

我不明白为什么当从 web 服务调用更新对象时，sf_detail 数据没有被更新。在 vue 中应该有不同的方法吗？

【问题讨论】：

标签： javascript ajax vue.js

【解决方案1】：

您的对象引用不同步了！调用getSourceFieldDetails 会导致field 和sf_detail 引用不同的对象。

问题

在脚本开始时，创建一个对象

{
  Name: 'Test',
  Label: 'Data',
  Type: 'Boolean'
};

并且该对象被赋予了一个名为sf_detail的引用。

在sf_detail_info 中，field 设置为等于名为sf_detail 的引用

data: {
  field: sf_detail
}

但是，在getSourceFieldDetails 中，sf_detail 被设置为引用一个新对象。因此sf_detail 引用了新对象，但field 仍然引用了旧对象。

解决方案

最简单的解决方案是永远不要将sf_detail 设置为等于新对象。相反，更新现有对象的属性。 getSourceFieldDetails 的修改版如下所示：

function getSourceFieldDetails(val) {
  // this would actually call an ajax endpoint to get this data
  console.log(val[0]);
  sf_detail.Name = val[0];
  sf_detail.Label = val[0] + 'Label',
  sf_detail.Type = val[0] + 'DataType'
  console.dir(sf_detail);
}

Here is a fork of your fiddle 有变化。

【讨论】：