Question

我了解Vue JS 2，您必须预先声明反应性。但是，只是想知道如果子对象根据其他一些条件而出现，您将如何进行休息呼叫。例如：

"abc": {
        "tests": [
        {
          "a1": "xxxx",
          "result": null,
          "selected": false,
          "comment": null
        } ...
        ]
}

现在在此示例中，如果在某些情况下测试为空（(null)）会怎样？例如：如果您使用v模型xx.xx.abc.tests[1].selected绑定它-这不会起作用，因为tests[1]为null。

因此，我尝试在已安装的函数中使用Vue.set来分配默认值，但这没有用。很难在静态数据中定义所有这些，因为这样我就必须在rest调用之前知道所有测试。

看看Vue warning when accessing nested object的问题是我是否要检查内部复选框（复选框是通过Spring MVC标签呈现的。）

 <form:checkbox id="xx" path="..Spring MVC Path.."   v-if="(xx.xx.abc.tests!=null && xx.xxx.abc.tests[3].selected)" **v-model**="xx.xxx.abc.tests[3].selected"/>

该复选框根本不出现。我希望它不考虑空值出现，因为它使用户可以添加选项。另外，静态声明它的另一个选项不起作用，因为我不知道要硬编码和定义数组。例如，这意味着如果添加了另一个元素，则将其硬编码到脚本中： [ { “ testName”：字符串， “结果”：字符串， “已选择”：否， “注释”：字符串 }， { “ testName”：字符串， “结果”：字符串， “已选择”：否， “注释”：字符串 } ]

基本上，即使在这种情况下它为null，我也需要使用v-model进行绑定。尝试使用Vue.set，但由于某种原因似乎无法正常工作。

我想我在这里缺少什么，任何帮助将不胜感激。

Answer 1

假定您具有复选框列表，以呈现子元素是否为null的情况。但是你知道数组的长度，对不对？如果这样做，请考虑使用v-for渲染复选框（然后您就可以按索引跟踪数组项）并侦听其change事件，然后在事件触发时为特定对象分配特定的值

Answer 2

感谢您的答复。由于这是由于rest调用未返回Vue模型中定义的所有必需属性（如上所述），因此我检查了rest调用的最后一部分，如果它们为空，请创建它们。

axios
                .get(***URL***)
                .then(
                    response => {
                        this.info = response.data;
                        this.status.loaded = true;
                    }
                )
               
                .finally(
                    () => {
                        *** check and fill missing attributes with default values ***
                        **Example: this.$set(this.someObject, 'b', 2)
                    }
                )

参考： https://vuejs.org/v2/guide/reactivity.html

Vue JS 2-动态数组

2 个答案: