0

当页面首次加载时，VueJS 没有在 v-for 循环中的项目上设置类，我遇到了一个奇怪的问题。It works after I click on it to toggle the selected attribute on and off, but when selected is initially true, the row is not highlighted. 因此，只需单击 2 次即可将屏幕“同步”到数据。

<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>

function itemSelected(row) {
    row.selected = !row.selected
    app.$nextTick(function() {
        console.log( $('tr.selected').length )
    })
    return false
}

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

app.listOfItems = [{
    id: 100,
    label: 'Item 100',
    selected: true
}]

所有其他数据都正确显示，甚至选择在表格单元格中显示为真。在我单击两次（一次取消选择，再次重新选择）之前，最初不会应用“选定”类。

4

1 回答 1

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>

于 2018-01-18T18:36:15.897 回答