vue.js 如何向用v-for呈现的元素添加条件类?

afdcj2ne  于 2023-03-03  发布在  Vue.js
关注(0)|答案(2)|浏览(162)

我有一组用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类,我该如何正确地做到这一点?
如果我把这个加到input元素中

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

那么这个类就不会像它应该的那样被添加到过去的元素中,因为我将引用数组答案的一个新对象。

fcg9iug3

fcg9iug31#

根据你的问题陈述,不需要管理一个单独的answerCount变量。当你在最顶端的元素中迭代答案数组时。你可以直接使用点(.)符号访问它的对象属性。
建议**:**

  • @input="answers[answerCount - 1].answer = $event.target.value"替换为v-model="answer.answer"
  • answer.id作为参数传递到addNewAnswer方法中,然后更新传递的对象ID的属性值。

现场演示**:**

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>
oyt4ldly

oyt4ldly2#

尝试使用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>

相关问题