Как я могу получить текст метки, который оборачивается вокруг моего флажка ввода?

Question

В моем компоненте Vue для фильтра раздела я заполняю свои метки с помощью v-for и применяю текст из массива «content» в своем параметре данных.Когда пользователь нажимает флажок, я хочу получить значение «флажок» (уже сделано) и текст из родительской метки.

Я пытался напрямую вызвать document.getElementById (идентификатор метки), но он возвращает только первый 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' }
       ]
     }
   }
})

false и Мнение // если мнение не проверено

true и Мнение // если мнение проверено

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);
 }
},