vue @ клик не меняет класс

Question

извините, я все еще новичок в реактивных vue моделях и обновлении. Я пытаюсь нарисовать линию через элемент ввода, если установлен флажок.

, пока у меня есть эта настройка:

 data: {
      selected: null,
      checked: null,
      list: [
        {
          id: 0,
          category: 'Bakery',
          food: ['bread','muffins','pie']
        },
        {
          id: 1,
          category: 'Fruits',
          food: ['apple','bananna','orange']
        },
        {
          id: 2,
          category: 'Diary',
          food: ['cheese','milk','yogurt']
        }
      ],
      isHidden: true, 
      form: {},
    },

my html выглядит следующим образом (это одностраничное приложение)

<li v-for="food in item.food" class="list-group-item">
                    <input :class="{marked:food == checked}" @click="checked = food" type="checkbox"> {{ food }}</input>
                </li>

это css я пытаюсь реализовать

.marked{
    text-decoration: line-through;
}

Я не уверен, что мне нужно сделать с моим @click, чтобы он заработал, но пока ничего не происходит, и класс не применяется. Может кто-нибудь дать мне советы?

Answer 1

Элемент <input> не может иметь содержимого.

Итак, у вас есть такая структура:

<input>{{ food }}</input>            

Но это вводит в заблуждение, так как тег <input> будет закрыт автоматически , В итоге вы получите текст рядом с флажком, а не внутри него.

Возможно, вам нужно что-то похожее на это:

<label :class="{marked: food === checked}" @click="checked = food">
  <input type="checkbox"> {{ food }}
</label>              

Существуют и другие проблемы, связанные с отмена выбора и множественный выбор. Я попытался исправить это в примере ниже:

new Vue({
  el: '#app',
  
  data: {
    checked: [],

    list: [
      {
        id: 0,
        category: 'Bakery',
        food: ['bread','muffins','pie']
      },
      {
        id: 1,
        category: 'Fruits',
        food: ['apple','bananna','orange']
      },
      {
        id: 2,
        category: 'Diary',
        food: ['cheese','milk','yogurt']
      }
    ]
  }
})

.marked{
    text-decoration: line-through;
}

<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>

<div id="app">
  <ul v-for="item in list">
    <li v-for="food in item.food" class="list-group-item">
      <label :class="{marked: checked.includes(food)}">
        <input type="checkbox" v-model="checked" :value="food">{{ food }}
      </label>
    </li>
  </ul>
</div>