Блог

Главная - Вопросы по программированию - измените состояние, щелкнув по тексту?

измените состояние, щелкнув по тексту?

#vue.js

Вопрос:

Мне нужно создать опцию выбора, чтобы переключиться на статус уведомлять/не уведомлять. Но мой клиент хочет использовать обычный текстовый формат. Значение по умолчанию-уведомлять, при нажатии на текст изменится на не уведомлять. У меня возникли проблемы в этом деле. Я пытаюсь сделать это с помощью флажка и такой метки, но если я нажму на один из них, все они изменят состояние. Как лучше всего справиться с этим делом? Это мой код этой проблемы и картинка об этом. Начальное значение selected_option выглядит следующим образом private selected_option: any = 'no notify' 

 <div class="d-block">
          <ul class="list-unstyled m-0">
            <li
              v-for="group in list_groups"
              :key="group.id"
              class="d-flex align-items-center mb-3"
            >
              <input
                class="form-check-input w--4 h--4 rounded-0 m-0 me-6"
                type="checkbox"
                :value="group.id"
                :id="group.id"
              />
              <div class="w--11 h--11 me-3">
                <img
                  :src="group.avatar"
                  alt="group-avatar"
                  class="img-cover w-100"
                />
              </div>
              <label :for="group.id" class="form-check-label">
                {{ group.name }}
              </label>
              <div class="ms-auto">
                    <input
                      @change="changeNotifyOption"
                      type="checkbox"
                      class=""
                      :id="`notify${group.id}`"
                      v-model="selected_option"
                      true-value="notify"
                      false-value="no notify"
                    />
                    <label
                      class="text-primary cursor-pointer"
                      :for="`notify${group.id}`"
                      >{{ selected_option }}</label
                    >
                  </div>
            </li>
          </ul>
        </div>

введите описание изображения здесь введите описание изображения здесь

Комментарии:

1. ты пользуешься v-for ?

2. да, мне нужно использовать v-for выше, чтобы получить все группы текущего пользователя.

3. Нам нужен полный код, чтобы мы могли вам помочь, по крайней мере одного v-for не хватает.

4. пожалуйста, поделитесь своим кодом и кодом метода changeNotifyOption

5. <label><input ..... /><span class="text-primary">.....</span></label> это все, что тебе нужно

Ответ №1:

Добавьте selected_option свойство в group объект, например:

 list_groups: [{id: 1, selected_option: null}, {id: 2, selected_option: null}]

затем измените v-model , как v-model="group.selected_option" и {{ selected_option }} как {{ group.selected_option || selected_option }}

Метки: ,