如果在根中初始化对象时未显式声明，则组件 v 无法识别道具

Posted 2023-02-23

【中文标题】如果在根中初始化对象时未显式声明，则组件 v 无法识别道具

【英文标题】：Component v for doesn't recognise prop, if not explicitly declared while initializing object in root

【发布时间】：2018-01-10 09:04:31

【问题描述】：

在我的根目录中，我在数据中声明我的（多维）对象，如下所示：

var app = new Vue(
    el: '#root',
    data: 
       accounts: 

如果我这样发送道具：

<div id="root">
   <my-component :accounts="accounts"></my-component>
</div>

同样在组件中，接受道具。在组件中，我还有执行 for 循环的模板。

Vue.component('my-component', 
   props: ['accounts'],
   template `
       <div>
        <another-component v-for="(x, i) in accounts"></another-component>
       </div>
   `
)

在这种情况下，当我在根中初始化帐户时，如果我给它一个空对象，它将不会执行循环。

如果在 for 循环中，而不是帐户，我使用数字，它会执行循环。

另外，在根目录初始化时，如果我变得明确...

accountTypes : 
     1: [],
     2: []
,

...for 循环有效。但是，这一次我得到另一个错误：

避免使用非原始值作为键，而是使用字符串/数字值。

另外，我不想明确表示 1 和 2，有时我根本不希望 2 出现。

---

我正在使用我的根目录中的方法填充帐户，绑定到复选框@change。

 methods: 
   accountSelected() 
       this.pushValue(index, name)
   ,

   pushValue(key, value) 
        var obj = this.accounts

        if (obj.hasOwnProperty(key)) 
            var idx = $.inArray(value, obj[key]);
            if (idx == -1) 
                obj[key].push(value);
            
         else 
            obj[key] = [value];
        
    ,
 

【问题讨论】：

如果你动态添加一个属性到一个对象，Vue 将无法检测到它是否被添加并且它不会是响应式的。您需要使用 $set 添加它。 vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

如何将 $set 与像这样的嵌套对象一起使用？你能举个例子吗？我需要声明对象推送和对象删除方法吗？

您在何时何地添加帐户？

在复选框上使用@change="accountSelected"，我使用了我在问题中添加的 pushValue 方法

【参考方案1】：

正如我在上面的评论中提到的，Vue cannot detect 当你在对象被添加到 Vue 之后向对象添加属性时。在else 子句中使用$set。

pushValue(key, value) 
    var obj = this.accountTypes

    if (obj.hasOwnProperty(key)) 
        var idx = $.inArray(value, obj[key]);
        if (idx == -1) 
            obj[key].push(value);
        
     else 
        this.$set(obj, key, [value]);
    
,

您看到的关于 key 的错误可能是因为您在循环期间设置了 key：

<another-component v-for="(x, i) in accounts" :key="x"></another-component>

这里的问题是x 是一个数组。 i，不过是accounts的key，所以用那个吧。

<another-component v-for="(x, i) in accounts" :key="i"></another-component>

【讨论】：

它有效，但是我得到了同样的错误“避免使用非原始值作为键，而是使用字符串/数字值。”

@senty 你在哪里使用密钥？