Question

嗯，我希望解释一下，我正在从一个组件生成这些数据，当我点击复选框时生成的数据中的更改没有反映出来，但是当点击按钮时，实例中的数据已经发生了变化，我如果您解释为什么或他们有解决方案，请欣赏？

这是我的代码

JS

Vue.component('fighters', {
    template: '#fighters-template',
  data() {
    return {
      items: [
        { name: 'Ryu' },
        { name: 'Ken' },
        { name: 'Akuma' }
      ],
      msg: 'hi'
    }
  },
  methods: {
    newData() {
        this.items.forEach(item => {
        item.id = Math.random().toString(36).substr(2, 9);
        item.game = 'Street Figther';
        item.show = false;
      });
      this.items.push()
    },
    greeting() {
        this.msg = 'hola'
    }
  }
});

new Vue({
    el: '#app'
})

HTML

<main id="app">
  <fighters></fighters>
</main>

<template id="fighters-template">
  <div class="o-container--sm u-my1">
    <ul>
      <li v-for="item in items">
      <input type="checkbox" v-model="item.show">
      {{ item.name }}</li>
    </ul>
    <button class="c-button c-button--primary" @click="newData()">New Data</button>
    <h2>{{ msg }}</h2>
    <button class="c-button c-button--primary" @click="greeting()">Greeting</button>
    <hr>
    <pre>{{ items }}</pre>

  </div>
</template>

这个实时代码 https://jsfiddle.net/cqx12a00/1/

谢谢你的帮助

Answer 1

您没有声明您的复选框绑定的show变量，因此它们不会被动 - Vue在更新时不知道。

它应该像这样初始化：

  items: [
    { name: 'Ryu', show: false },
    { name: 'Ken', show: false },
    { name: 'Akuma', show: false }
  ]

您可能会认为newData会修复它，因为它会为每个项目分配一个show成员，但是Vue cannot detect added properties因此它们仍然没有被动。如果我如上所示初始化数据，那么分配将是被动的。

如果要向对象添加新的反应属性，则应使用Vue.set。

如何查看vue组件中生成的新数据的更改？

1 个答案: