javascript - 从 Vue.JS 中的两个循环数组正确输出数据

Question

我正在使用 Vue.JS 开发这个基本的聊天应用程序，它就像一个聊天机器人概念，用户的输入会触发书面回复。它有效，但我只知道如何输出输入和响应，如下所示。这个问题是 {{ data.message }} 和 {{ data.response }} 在彼此下面循环，没有给 convo 命令。

用户的输入被存储在“消息”数组中。消息循环播放

<div class="userMessageC">
  <div class="userMessage" v-for="(data, index) in messages" :key='index'>
    {{ data.message }}
  </div>
</div>

而机器人的响应则存储在响应数组中。

<div class="botMessageC" v-for="(data, index) in responses" :key='index'>
  <span class="botAvatar">
    <img src="@/assets/pimAvatar.png" width="50"/> 
  </span>           
  <div class="botMessage">
    {{ data.response }} 
  </div>
</div>

我想要的是 data.message 之后是 data.response，然后是 data.message，然后是 data.response 等等。我将如何处理这个？这是它的样子(乱序)

.

A jsfiddle to give you better idea

Answer 1

因为您的“机器人”几乎被 mock 了，所以您的问题大大简化了:它具有相同的响应时间，并且结果返回的顺序与发送时的顺序相同。对于真实服务器而言，情况并非总是如此。

你想要做的是创建一个 utterance 或 pair 实体，其中包含 message 和 response，从返回 promise 的方法调用服务器，并在实现时将响应添加到话语中。在模板中，您需要做的就是遍历话语:

data: () => ({
  utterances: []
})
methods: {
  sendRequest(message) {
    const utterance = { message, response: '' };
    this.utterances.push(utterance);
    this.outputResponse(message).then(response => utterance.response = response);
  },
  outputResponse(message) {
    // do whatever you want to get response and return a resolved promise:
    return Promise.resolve(response);
  }
}

模板看起来像这样:

<div v-for="(u, key) in utterances" :key="key">
  <div v-text="u.message" />
  <div v-text="u.response" />
</div>

在现实生活中，对机器人的调用实际上可能与您的组件分离，您可能希望为每个话语赋予一个 uuid。并根据该唯一标识符将响应映射回话语。
此外，记录输入消息的时间戳可以为您打开大门，以便在将来按照发送顺序存储和重新呈现它们。

---

outputResponse 方法在上面有点过于简化了。调用实际服务器看起来像这样:

outputResponse(message) {
  return axios.get('https://your.bot', params: { message })
    .then(response => response.data)
}

...假设机器人用一个简单的字符串响应。

---

看看它的工作。
为了让它更像一个真实的服务器，我让“bot”响应时间可变，在 1 到 15 秒之间:

Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
  el: '#app',
  data: () => ({
    utterances: [],
    message: ''
  }),
  methods: {
    send(message) {
      const utterance = {
        message,
        response: ''
      };
      this.utterances.push(utterance);
      this.getResponse(message).then(response => utterance.response = response);
      this.message = '';
    },
    getResponse: message => new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(`<pre> => </pre>${message} back...`);
      }, (Math.floor(Math.random() * 15) + 1) * 1e3)
    })

  }
})

pre {
  margin: 2px 0 0;
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div>
    <input v-model="message" @keyup.enter="send(message)">
    <button @click="send(message)">Send</button> (or press enter)
  </div>
  <div v-for="(u, k) in utterances" :key="k" style="display: flex">
    <div v-text="u.message"></div>
    <div v-html="u.response"></div>
  </div>
</div>