Question

我遇到一个奇怪的问题，VueJS没有在页面首次加载时在v-for循环内的项目上设置类。单击它后可以打开和关闭所选属性，但是当选择最初为true时，该行不会突出显示。因此，需要2次点击才能将屏幕“同步”到数据中。

RESULT_OK

在屏幕显示之前，最初加载数组：

RESULT_CANCELLED

所有其他数据都正确显示，甚至在表格单元格中显示为true。直到我点击两次（一次取消选择并再次重新选择），才会初始应用“选定”类。

Answer 1

将代码放入代码段，它按预期工作。您的问题可能与您加载listOfItems的方式有关，但很难说。您可能希望复制此代码段，看看是否可以引入更多原始代码流程，以确定是否可以重现错误。

制作这样的片段在各方面都是一个好主意：它可以帮助你自己发现问题;它可以确定问题是否在您认为存在的代码中;它给你练习;它为潜在的回答者提供了一个起点。我希望更多的人会这样做。

const app = new Vue({
  el: '#app',
  data: {
    listOfItems: [{
      id: 100,
      label: 'Item 100',
      selected: true
    }]
  },
  methods: {
    itemSelected(row) {
      row.selected = !row.selected
      app.$nextTick(function() {
        console.log($('tr.selected').length)
      })
      return false
    }
  }
});

.selected {
  background-color: lightgray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<table id="app">
  <tbody>
    <tr v-for="v in listOfItems" :key="v.id" :class="{ selected: v.selected }" v-on:click="function(){ itemSelected(v) }">
      <td style="text-align:right"><span v-text="v.selected"></span></td>
      <td style="text-align:right"><span v-text="v.label"></span></td>
    </tr>
  </tbody>
</table>

Vuejs类绑定不适用于初始渲染

1 个答案: