我有一组用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 }"
那么这个类就不会像它应该的那样被添加到过去的元素中,因为我将引用数组答案的一个新对象。
2条答案
按热度按时间fcg9iug31#
根据你的问题陈述,不需要管理一个单独的
answerCount
变量。当你在最顶端的元素中迭代答案数组时。你可以直接使用点(.
)符号访问它的对象属性。建议**:**
@input="answers[answerCount - 1].answer = $event.target.value"
替换为v-model="answer.answer"
answer.id
作为参数传递到addNewAnswer
方法中,然后更新传递的对象ID的属性值。现场演示**:**
oyt4ldly2#
尝试使用v模型: