vue.js从表单选择中更新不同的模型

Question

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

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

Answer 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随之改变。