代码之家 › 专栏 › 技术社区 › TheWebs

如何获取复选框的值?

vuejs2

TheWebs · 技术社区 · 6 年前

<input v-on:click="$emit('addPartId', $event)" v-bind:value="13209" name="add_13209" type="checkbox">

然后调用以下方法:

 methods: {
        ....

        addPartId(evnt) {
            console.log(evnt);
        }
    },

在父容器中传递给子容器:

    <table-body
        v-bind:items="items"
        v-bind:columns="columns"
        v-bind:sort-column="sortColumn"
        v-bind:direction="direction"
        @sort="sort"
        @addPartId="addPartId"
        >
    </table-body>

如何注册click事件,以便在单击复选框时获取event对象(我希望该值来自 v-bind:value

1 回复 | 直到 6 年前

Sphinx 6 年前

您应该使用事件名称 烤羊肉串 Vue Guide: Custom Event ,

与组件和道具不同,事件名称永远不会用作 JavaScript中的变量或属性名,因此没有理由使用模板将自动转换为小写(由于 HTMLs case不敏感),所以v-on:myEvent将变成v-on:myEvent 使我无法倾听。

名字。

Vue.component('my-checkbox', {
  template: `
    <input v-on:click="$emit('add-part-id', {'whole': $event, 'value':13209})" v-bind:value="13209" name="add_13209" type="checkbox">
  `
})

Vue.component('my-another-checkbox', {
  template: `
    <input v-on:click="$emit('add-part-id', $event)" v-bind:value="13209" name="add_13209" type="checkbox">
  `
})

new Vue({
  el: '#emit-example-simple',
  methods: {
    getChecked1: function (ev) {
      console.log('checkbox1', ev.value)
      console.log('checkbox1', ev.whole.target.value)
    },
    getChecked2: function (ev) {
      console.log('checkbox2', ev.target.value)
    }
  }
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="emit-example-simple">
  First Example: <my-checkbox @add-part-id="getChecked1"></my-checkbox>
  Second Example: <my-another-checkbox @add-part-id="getChecked2"></my-another-checkbox>
</div>

推荐文章

4r60_ · 如何停止VueJS上的间隔?[副本]

2 年前

Park · Vuejs道具,路径较长

3 年前

Mathijs · vue-chartjs4中的混合气泡图和折线图

3 年前

roev · 大堆来自(物体)。forEach不使用vue。js

3 年前

haferje · Vue。用于计算属性重新渲染的js加载指示器

7 年前

Ready Dev · Axios一次发出多个请求(vue.js)

7 年前

JeanValjean · 如何在Vue中使用事件总线通过自定义事件传递数据。js 2

7 年前

dede.brahma · VueJs-元素UI el select:如何获取值父级和子级

7 年前

tzortzik · 如何使用vue路由器将对象作为道具传递?

7 年前

Tim · VueJS-迭代从AJAX调用返回的数据

7 年前