Question

我试图在v-model循环上使用v-for并抛出错误。

我怎样才能让这个工作

<ul class="">
  <li class="" v-model="category.data" v-for="category in categories" :key="category.id">
    <input :id="'checkbox'+ category.id" type="checkbox" @change="categoriesComputed($event)" :value="category.slug">
    <label :for="'checkbox'+ category.id">
      {{category.title | capitalize}}
      <span>{{category.job_posts | countObj | toNumber}} Jobs</span>
    </label>
  </li>
</ul>

在Vue

<script>
export default {
    data(){
        return {
            type: [],
            categories: [],
            category: {
                data: [],
            },
        }
    },
}
</script>

Answer 1

V-model仅在输入元素或自定义组件上使用时才会起作用，该组件会发出一个值事件，该事件提供您希望更新v-model的值。

https://vuejs.org/v2/guide/forms.html

https://jsfiddle.net/amcquistan/grq3qj36/

V-model is demo in this fiddle

Answer 2

您必须在<input>标记中使用v-model。

const app = new Vue({
  el: '#app',
  data: {
    categories: [
      { id: 1, slug: true, title: 'FOO', job_posts: 'Foo'},
      { id: 2, slug: false, title: 'BAR', job_posts: 'Bar'},
      { id: 3, slug: true, title: 'BAZ', job_posts: 'Baz'}
    ]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <ul class="">
    <li class="" v-for="category in categories" :key="category.id">
    <input 
      :id="'checkbox'+ category.id" 
      type="checkbox" 
      v-model="category.slug">
    <label :for="'checkbox'+ category.id">
      {{category.title}} {{category.slug}}
    </label>
    <input v-model="category.title"/>
  </li>
</ul> 
</div>

在循环上使用V模型

2 个答案: