A
A
Alexander Ivanov2018-02-25 08:58:46
Vue.js
Alexander Ivanov, 2018-02-25 08:58:46

How to pass value through vue checkbox?

Working example from documentation:

<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>

new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

Life is not so easy, namely
<div v-for="item in getPosts" :key="item.key" class="table__body__line">
                        <div class="table-cell">{{ item.key }}</div>
                        <div class="table-cell">{{ item.name }}</div>
                        <div class="table-cell">
                            <input type="checkbox" id="checkbox" v-model="status">
                            <label for=" ??? ">{{ status }}</label><br>
                        </div>
                    </div>

// так не сработает
<input type="checkbox" id="checkbox" v-model="status" value={{ item.key }}>

    export default {
        name: 'Search',
        components: {
            AppMenu
        },
        data () {
            return {
                status: []
            }
       }
}

How to pass item.key to status ?

Answer the question

In order to leave comments, you need to log in

1 answer(s)
0
0xD34F, 2018-02-25
@cimonlebedev

<input type="checkbox" :id="`checkbox-${item.key}`" :value="item.key" v-model="status">

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question