Как добавить условный класс к элементам, отображаемым с помощью v-for?

У меня есть группа объектов, которые визуализируются с помощью v-for.

    <div v-for = "answer in answers" :key = "answer.id" class = "field has-addons">
      <p class = "control">
        <button @click = "addNewAnswer" class = "button is-primary">
          <span class = "icon">
            <i class = "fas fa-plus"></i>
          </span>
          <span>Добавить</span>
        </button>
      </p>
      <p class = "control">
        <input
            @input = "answers[answerCount - 1].answer = $event.target.value"
            type = "text"
            class = "input"
        >
      </p>
    </div>

Это модели, которые я использую для рендеринга

  data() {
    return {
      answers: [
        {
          id: 0,
          answer: '',
          isEntered: false,
        }
      ],
      answerCount: 1,
    }
  },

А это код добавления новой строки для ввода ответа

addNewAnswer() {
      const newAnswer = {
        id: Date.now(),
        answer: '',
        isEntered: false,
      };
      this.answers.push(newAnswer);
      this.answers[this.answerCount - 1].isEntered = true;
      this.answerCount += 1;
    },

Мне нужно добавить класс is-static к вводу после добавления введенного ответа. Как мне это сделать правильно?

Если я добавлю это к элементу ввода

:class = "{ 'is-static':answers[answerCount - 1].isEntered }"

Тогда класс не будет добавлен к прошлому элементу как положено, потому что я буду ссылаться на уже новый объект ответа массива. Я не мог придумать никаких альтернатив

javascript vue.js vuejs3

20.02.2023 10:25

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Попробуйте с v-моделью:

const app = Vue.createApp({
  data() {
    return {
      answers: [
        {
          id: 0,
          answer: '',
          isEntered: false,
        }
      ],
      answerCount: 1,
    }
  },
  methods: {
    addNewAnswer() {
      const newAnswer = {
        id: Date.now(),
        answer: '',
        isEntered: false,
      };
      this.answers.push(newAnswer);
      this.answers[this.answerCount - 1].isEntered = true;
      this.answerCount += 1;
    },
  }
})
app.mount('#demo')

.is-static {
  color: red;
}

<script src = "https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id = "demo">
  <div v-for = "answer in answers" :key = "answer.id" class = "field has-addons">
    <p class = "control" >
      <button @click = "addNewAnswer" class = "button is-primary">
        <span class = "icon">
          <i class = "fas fa-plus"></i>
        </span>
        <span>Добавить</span>
      </button>
    </p>
    <p class = "control">
      <input
          v-model = "answer.answer"
          type = "text"
          class = "input"
          :class = "{ 'is-static':answer.isEntered }"
      >
    </p>
  </div>
  {{ answers }}
</div>

20.02.2023 10:41

Ответ принят как подходящий

Согласно вашему постановлению о проблеме, нет необходимости управлять отдельной переменной answerCount. Поскольку вы повторяете массив ответов в самом верхнем элементе. Вы можете получить доступ к его свойствам объекта напрямую, используя запись через точку (.).

Предложения :

Замените @input = "answers[answerCount - 1].answer = $event.target.value" на v-model = "answer.answer"
Передайте answer.id в качестве параметра в методе addNewAnswer, а затем обновите значение свойства переданного идентификатора объекта.

Живая демонстрация:

const app = Vue.createApp({
  data() {
    return {
      answers: [
        {
          id: 0,
          answer: '',
          isEntered: false,
        }
      ],
      answerCount: 1,
    }
  },
  methods: {
    addNewAnswer(answerId) {
      const newAnswer = {
        id: Date.now(),
        answer: '',
        isEntered: false,
      };
      this.answers.push(newAnswer);
      this.answers.forEach(obj => {
        if (obj.id === answerId) {
          obj.isEntered = true;
        }
      })
    },
  }
})
app.mount('#app')

.is-static {
  color: red;
}

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

<div id = "app">
  <div v-for = "answer in answers" :key = "answer.id" class = "field has-addons">
    <p class = "control" >
      <button @click = "addNewAnswer(answer.id)" class = "button is-primary">
        <span class = "icon">
          <i class = "fas fa-plus"></i>
        </span>
        <span>Добавить</span>
      </button>
    </p>
    <p class = "control">
      <input
          v-model = "answer.answer"
          type = "text"
          class = "input"
          :class = "{ 'is-static': answer.isEntered }"
      >
    </p>
  </div>
</div>

20.02.2023 11:52

Другие вопросы по теме

Как выделить первые теги <p> в массиве жирным шрифтом

При проверке цен используются регулярные выражения

Img src не отображался в vue

Как переместить подстроку в конец строки в javascript?

Откройте раскрывающийся список, щелкнув правой кнопкой мыши в Vue3 и Vuetify3

Почему реактивная переменная изменяется, когда она не назначена v-модели

Vue: значение таймера не обновляется при использовании setInterval

Как ускорить VueJS SPA?

Можно ли вызвать watch() для входной ссылки в Vue 3, чтобы посмотреть атрибут значения ввода?

Nuxt 3 импортирует внешний пакет npm

Как добавить условный класс к элементам, отображаемым с помощью v-for?

Ответы 2

Другие вопросы по теме

Похожие вопросы