javascript - Vue 应该只触发被点击的元素

Question

我正在进行我的第一个 Vue 项目。我有一张带单元格的 table 。当我双击一个单元格时，我想用 updated 或类似的方式触发该单元格中的子组件。

到目前为止，我一直通过向它发送 Prop 来做到这一点。有用。问题是，当我双击一个单元格时，所有子组件都会触发 updated。它可以被触发 100 次或 1000 次，只是为了“激活”单个细胞。

截图

代码和问题

下面的这段代码与我的项目看起来很不一样，但仍然会显示问题。点击一个按钮，所有的细胞都会对此使用react，而不仅仅是被点击的那个。

我明白为什么会这样。在我的子组件中，我输出已被父组件更改的数据。然后所有的子组件都会对它使用react。但是，没有必要在它们不活动时都触发它们。

我怎样才能触发我点击的项目的更新？

Vue.component('v-child', {
  props: ['item', 'active'],
  updated() {
    console.log('Clicked');
  },
  template: `
  <div>
      {{ item }} {{ active }}
  </div>`
  });

new Vue({
  el: '#app',
  data: {
    active: 0,
  	items: {
    	first: '1',
      second: '2',
      third: '3',
      a: 'a',
      b: 'b',
      c: 'c'
    },
    message: 'Hello Vue.js!'
  },
  methods: {
  	click(item) {
      this.active = item;
      console.log(this.active);
    }
  }
});

li {
  list-style: none;
  margin-bottom: 1rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
    <li v-for="item in items">
      <button v-on:click="click(item)">Button</button>
      <v-child :item="item" :active="active"></v-child>
    </li>
  </div>

Answer 1

updated 为每个 child 调用，因为 active 已更改，因此需要渲染每个 child 。

有两种方法可以实现你想要的:

• 使 active 仅针对事件项更改
• 保留您的代码并添加一些验证以检查 child 是否是活跃的(Steven Spungin 解决方案)

解决方案#1 的示例

Vue.component('v-child', {
  props: ['item', 'active'],
  updated() {
    console.log('Clicked');
  },
  template: `
  <div>
      {{ item.value }} {{ item.count }}
  </div>`
});

new Vue({
  el: '#app',
  data: {
    active: 0,
    items: {
      first: {value:'1', count:0},
      second: {value:'2', count:0},
      third: {value:'3', count:0},
      a: {value:'a', count:0},
      b: {value:'b', count:0},
      c: {value:'c', count:0}
    },
    message: 'Hello Vue.js!'
  },
  methods: {
    click(item) {
      item.count++;
    }
  }
});

li {
  list-style: none;
  margin-bottom: 1rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <li v-for="item in items">
    <button v-on:click="click(item)">Button</button>
    <v-child :item="item" :active="active"></v-child>
  </li>
</div>