Question

我在点击Select all names按钮时尝试选择所有输入字段，但这不起作用？

我做了一个例子：

new Vue({
    el: '#app',
    data: {
        names: [ 
            { "name": "one" },
            { "name": "two" },
            { "name": "three" }
        ]
    },
    created() {
         this.names.filter(name => name.checked = false);
    },
    methods: {
        selectAll() {
        		this.names.filter(name => name.checked = true);
        }
    }
})

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>

<div id="app">
    <table>
      <tr>
        <th>Names</th>
      </tr>
      
      <tr v-for="name in names">
        <td>
        <input type="checkbox" v-model="name.checked">{{name.name}}        </td>
      </tr>
  </table>
  
   <button @click="selectAll()">
        Select all names
   </a>
</div>

我在这里做错了什么？

Answer 1

Vue cannot detect property addition or deletion。在数据对象中初始化checked，以便Vue可以使其成为被动的。

Answer 2

您需要在checked数组的每个元素中初始化data.names，以便Vue知道它存在。以下代码应正确执行预期的行为：

new Vue({
    el: '#app',
    data: {
        names: [ 
            { "name": "one", checked: false },
            { "name": "two", checked: false },
            { "name": "three", checked: false }
        ]
    },
    created() {
         this.names.filter(name => name.checked = false);
    },
    methods: {
        selectAll() {
            this.names.filter(name => name.checked = true);
        }
    }
})

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>

<div id="app">
    <table>
      <tr>
        <th>Names</th>
      </tr>
      
      <tr v-for="name in names">
        <td>
        <input type="checkbox" v-model="name.checked">{{name.name}}        </td>
      </tr>
  </table>
  
   <button @click="selectAll()">
        Select all names
   </a>
</div>

Answer 3

正如罗伊所说，Vue在向现有对象添加新属性方面存在问题，但是您可以像这样解决这个问题：

created () {
    this.names = this.names.map(name => Object.assign({}, name, { checked: false }));
}

new Vue({
    el: '#app',
    data: {
        names: [ 
            { "name": "one" },
            { "name": "two" },
            { "name": "three" }
        ]
    },
    created() {
        this.names = this.names.map(name => Object.assign({}, name, { checked: false }));
    },
    methods: {
        selectAll() {
        	this.names.filter(name => name.checked = true);
        }
    }
})

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>

<div id="app">
  <table>
    <tr>
      <th>Names</th>
    </tr>
      
    <tr v-for="name in names">
      <td>
      <input type="checkbox" v-model="name.checked">{{name.name}}        </td>
    </tr>
  </table>
  
  <button @click="selectAll()">
    Select all names
  </button>
</div>

Answer 4

我会抛出这个变体，因为从评论 '我通过ajax调用得到名字'

在ajax调用返回后，您可以使用Vue.set()和vm.$data的组合动态添加到names数组。

参考：Vue.set(target, key, value)

在对象上设置属性。如果对象是被动的，请确保将该属性创建为被动属性并触发视图更新。这主要用于解决Vue无法检测属性添加的限制。

此文档说target不能是实例的根数据对象，但Vue.set(vm.$data, 'names',...确实有效。

但是，如果有一些看不见的后果names可以向下移动。

console.clear()
const vm = new Vue({
    el: '#app',
    data: {
      data: {
        names: []
      }
    },
    mounted() {
      // setTimeout to simulate an ajax call
      setTimeout(() => {
        console.log(vm.$data)
        Vue.set(vm.$data.data, 'names', [ 
          {name: 'one', checked: false}, 
          {name: 'two', checked: false} 
        ]);
      }, 100);
    },
    methods: {
        selectAll() {
        	this.data.names.filter(name => name.checked = true);
        }
    }
})

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>

<div id="app">
  <table>
    <tr>
      <th>Names</th>
    </tr>
      
    <tr v-for="name in data.names">
      <td>
      <input type="checkbox" v-model="name.checked">{{name.name}}        </td>
    </tr>
  </table>
  
  <button @click="selectAll()">
    Select all names
  </button>
</div>

Vue.js选择所有输入字段

4 个答案: