Question

在我的部分过滤器Vue组件中，我使用v-for填写标签，并在我的数据选项中应用来自“内容”数组的文本。当用户单击复选框时，我想获取“已选中”（已完成）的值以及其父标签中的文本。

我尝试直接调用document.getElementById（label的id），但这只会返回第一个c.text，而不会返回其他c.text。

我尝试将输入的value属性设置为c.text，类似于v-for对其应用的方式。

//component for the filter section
Vue.component('section-filter', {

  template:

  `<div class="filter-container">
    <h3 id="filter-header">{{ header }}</h3>
    <div class="filter-main">
      <label id = "checkboxLabel" class="filter-checkbox" v-for="c in content">{{ c.text }}
        <input type="checkbox" checked @change="onChange">
        <span class="checkmark"></span>
      </label>
    </div>
   </div>`,

   methods: {
     onChange: function(e){
       var checked = e.target.checked;
       var text = //label text goes here

       console.log(checked + ' and ' + text);

     }
   },

   //set my text in data function so it can be reactive
   data: function() {
     return {
       header: 'Choose your sections',
       content: [
         { text: 'Health' },
         { text: 'Magazine' },
         { text: 'Opinion' },
         { text: 'Smarter Living' },
         { text: 'U.S.' },
         { text: 'World' }
       ]
     }
   }
})

错误和意见///如果未选中意见

真实与意见//如果意见被选中

Answer 1

您可以将文本值作为参数传递给事件处理程序

<input type="checkbox" checked @change="(event) => onChange(event, c.text)">

然后处理程序将显示文本

 onChange: function(e, text) {

Answer 2

在您的onChange方法内部，使用e.target.parentElement获取父标签元素，然后您应该可以访问标签内容

类似这样的东西

methods: {
 onChange: function(e){
   var checkedLabel = e.target.parentElement;
   var text = checkedLabel.textContent;
   console.log(checked + ' and ' + text);
 }
},

如何获取环绕复选框输入的标签文本？

2 个答案: