Question

我在服务器端生成了一个动态表。该表的每一行都与一个ID相关联。每行都有一个按钮。我的目标很简单：当用户连续单击一个按钮时，该特定按钮应更改为“正在加载”类，并且应触发AJAX调用。当AJAX调用解决后，该按钮应更改为“成功”类。

我可以在jQuery中轻松完成此操作，但是我正在尝试为该项目学习Vue.js。当我尝试从Vue的角度考虑这一点时，我实际上是在说每行的状态首先变为“正在加载”状态，然后再变为“成功”状态。因此，如果我有一个rowState对象，则可以更改rowState[rowID]的值以更改按钮的状态，并将按钮的类绑定到rowState[rowID]的值。例如，对于表的第2行，我的按钮可能类似于：

<button :class="[{ 'is-loading': (rowState[2] == 1) }, {'is-success': (rowState[2] == 2) }]" @click="changeRowState(2)">

然后changeRowState方法如下：

changeRowState(rowID) {
    this.rowState[rowID] = 1;
}

如果我在Vue中这样定义rowState，则此方法可以很好地工作（即，将“ is-loading”类添加到第2行中的按钮上）：

data: {
    rowState: {2: 0},
}

但是，如果我没有用所有可能的行ID的列表预填充rowState，它将失败。如果在创建2时没有rowState属性，则以后添加该属性将不起作用。

data: {
    rowState: {},
}

我看不到任何实用的方法来将此动态生成的表中的每一行的属性添加到初始定义中。我是否缺少明显的东西？我对JS相当熟悉，但对Vue还是很陌生。

Here's a fiddle demonstrating the behavior。如果将rowState定义更改为{2: 0}，它将起作用（单击时按钮变为红色）。但是，如果2中没有定义data属性，则不会定义（按钮保持不变）。

Answer 1

对于一个对象，您必须使用Vue.set（或this.$set）。请参阅文档中的Reactivity In Depth。

Answer 2

Vue js不允许您直接访问数组。请参阅https://vuejs.org/2016/02/06/common-gotchas/

上的文档

代替使用

this.rowState[rowID] = newValue;

您应该使用

rowState.$set(rowID, newValue)

或

rowState.splice(rowID, 1, newValue).

Vue.js不会绑定到未预定义的对象属性

2 个答案: