如何将输入值推入数组并在 Nuxt 2 中更新它？

Question

我想将输入值推送到数组中并从那里更新它。如果文本区域为空，我还想删除数组内的该值。但我无法做到这一点，因为我陷入了第一步。我正在与您分享代码。

<div class="coffee-textarea">
  <InputTextarea
    ref="questionTextarea"
    class="mt-4"
    placeholder="Sorularınız?"
    :required="true"
    @input="addQuestion"
  />
</div>

这是文本区域组件。在里面我发出输入的值：

@input="$emit('input', $event.target.value)"

所以我可以毫无问题地发出价值并接收它。接下来，我将采用

addQuestion

方法。

methods: {
  addQuestion(value) {
    const question = value
    this.selectedQuestions.push(question)
  },
  // ...
}

数据对象中有一个

selectedQuestions

数组为空：

data() {
  return {
    selectedQuestions: [],
    // ...
  }
}

我还有

selectCheckbox

方法，它将复选框值推入同一数组中：

methods: {
  selectCheckbox(text) {
    const index = this.selectedQuestions.indexOf(text)
    if (index !== -1) {
      this.selectedQuestions.splice(index, 1)
    } else {
      this.selectedQuestions.push(text)
    }
  },
  // ...
}

结果显然不是我想要的。

addQuestion

正在为每个字符输入在

selectedQuestions

内添加一个新的数组项。

在 Vue.js 开发工具中，当我在文本区域中输入“efe”时，结果如下所示：

在这个

addQuestion

方法中，我想将新值推入

selectedQuestions

数组中。我想根据输入的值更新该值。我也不想以任何方式重置

selectedQuestions

数组，因为我还从

selectedQuestions

方法将不同的值推送到

selectCheckbox

数组中。我该如何解决这个问题？

感谢您的宝贵时间。

Answer 1

使用

@change

代替

@input

。

@input

和

@change

之间的区别：

• @input

  输入值变化时触发

• @changed

  当元素在值变化期间失去焦点时触发

MDN 网络文档：

oninput

、

onchange