Question

我有一个这样的对象：

  myObject: {
    items: [{
      title: '140',
      isActive: true,
    }, {
      title: '7',
      isActive: false
    }, {
      title: '10',
      isActive: false
    }]
  }

我正在使用的是这样的：

<my-component :items="myObject.items"></my-component>

这是组件的样子：

<template>
  <div class="i-panel panel-container d-flex"
    <div
      v-for="item in prefs.items"
      class="panel-item"
      @click="onClick(item)">
      <!-- some content -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'IPanel',
  props: {
    items: {
      type: Array,
      default () {
        return []
      }
    }
  },

  computed: {
    // code
    prefs () {
      return {
        items: this.items
      }
    }
  },

  methods: {
    onClick (item) {
      this.prefs.items.forEach(item => {
        if (JSON.stringify(item) === JSON.stringify(clickedItem)) {
          item.isActive = true
        }
      })
    }
  }
}
</script>

当我点击某个项目时（item与clickedItem相同），它应该变为isActive true。确实如此。但我必须刷新Vue devtools或重新渲染页面才能使更改生效。

为什么不item.isActive = true被动？

Answer 1

在您发布的代码中，您使用的是未在任何位置定义的clickedItem对象。我不知道这是不是在写你的问题或者是你的问题。

但是，当以正确的方式使用clickedItem时，它似乎有效：https://jsfiddle.net/d5z93ygy/4/

<强> HTML

<div id="app" class="i-panel panel-container d-flex">
    <div
      v-for="item in prefs.items"
      class="panel-item"
      @click="onClick(item)">
      <!-- some content -->{{ item.isActive ? 'active' : 'inactive' }}
    </div>
</div>

<强> JS

new Vue({
    el: "#app",
  data: {
    items: [{
      title: '140',
      isActive: true,
    }, {
      title: '7',
      isActive: false
    }, {
      title: '10',
      isActive: false
    }]
  },
  computed: {
    // code
    prefs () {
      return {
        items: this.items
      }
    }
  },
  methods: {
    onClick (clickedItem) {
      this.prefs.items.forEach(item => {
        if (JSON.stringify(item) === JSON.stringify(clickedItem)) {
          item.isActive = true
        }
      })
    }
  }
})

Answer 2

更改

<div
  v-for="item in prefs.items"
  class="panel-item"
  @click="onClick(item)">
  <!-- some content -->
</div>

到

<div
  v-for="(item, index) in prefs.items"
  class="panel-item"
  @click="onClick(index)">
  <!-- some content -->
</div>

然后，在你的改变方法中，像这样：

onClick (index) {
  Vue.set(this.items, index, true);
}

https://vuejs.org/v2/guide/list.html#Object-Change-Detection-Caveats

为什么此组件的计算属性不响应：

2 个答案: