Question

因此，在Vuejs中，我创建了一个名为这样的下拉组件：

                        <Dropdown
                        :style="{width: '100%'}"
                        v-on:selectReturn='selectReturn'
                        :dropDataArray="expenseType"/>

                        <Dropdown
                        :style="{width: '100%'}"
                        v-on:selectReturn='selectReturn'
                        :dropDataArray="loanType"/>

我在哪里有数据

    expenseType: [
        'expenseType',
        'one time',
        'recurring',
        'loan'
    ], 
    loanType: [
        'loanType',
        'new loan',
        'recurring payment',
        'one time payment'
    ]

出于各种原因，在孩子中，我需要读取数组的第一行。

我有...

props: ['dropDataArray']

和...

this.dataArrayName = this.dropDataArray[0];

但是：

控制台记录this.dataArrayName值表明它将第一个子组件的第0个项目更改为“ loanType”（我在@click上称呼它）。这很奇怪，因为我没有将第一个Dropdown子项传递给loanType数组！我认为我对vuejs的反应性警告不满意，但是我不知道如何改变它或最好的方法。如果有人有任何想法，请告诉我。谢谢！

这是一个codeandbox.io链接https://codesandbox.io/s/x38j14900q。

如果单击顶部的选择框并在控制台中查找，则会发现问题。您会看到以下内容：

value of this.dataArrayName: loanType

实际上应该是ExpenseType！

进一步的测试表明问题比我预期的要严重。

                        <Dropdown
                        :style="{width: '100%'}"
                        :stringProp="'expenseString'"
                        :dropDataArray="expenseType"/>

                        <Dropdown
                        :style="{width: '100%'}"
                        :stringProp="'loanString'"
                        :dropDataArray="expenseType"/>

与props: ['dropDataArray', 'stringProp']

再次仅返回loanString

Answer 1

在window.onclick中，这似乎是一个范围界定问题。 dataArrayName的实际值不变。您的窗口事件可能取自最近渲染的Dropdown组件的值。

我对您的示例应用程序做了一些更改： https://codesandbox.io/s/rrpq67q9ro

我添加的是一个间隔，每3秒显示一次dataArrayName进行记录。如您所见，它同时显示expenseType和loanType。我还添加了一个test(e)方法，并将您的window.onclick的内容移到了该方法。当您单击下拉列表时，将运行test。如果您现在查看控制台，它会根据您单击的Dropdown实例显示正确的dataArrayName。

带有单一价值的Vuejs亲子沟通问题

1 个答案: