变量已在上层范围内声明答案

【问题标题】：Variable is already declared in the upper scope变量已在上层范围内声明
【发布时间】：2020-02-03 14:02:26
【问题描述】：

我有一个负责发送消息的代码，但它有一个错误。

    <div id="block-messages">
      <ul class="block-messages">
        <li v-for="(message, index) in messages" :key="index" class="mess">
          <b>{{ message.time }}</b>
          <b :style="{ color: message.colornick }" style="margin-left: 8px;">{{ message.nick }}</b>:
          <span :style="{ color: message.colortext }">{{ message.msg }}</span>
        </li>
      </ul>
    </div>

错误：

warning  Variable 'message' is already declared in the upper scope

我该怎么办？

【问题讨论】：

data 或 props 中是否有 message 值？
是的，message 在数据中

标签： javascript vue.js frontend

【解决方案1】：

根据您的评论，数据中有 message 值。

这就是错误发生的原因。

您可以通过重命名模板或数据中的message 变量之一来避免这种情况，如下所示（我重命名了v-for 中的值）：

<div id="block-messages">
  <ul class="block-messages">
    <li v-for="(item, index) in messages" :key="index" class="mess">
      <b>{{ item.time }}</b>
      <b :style="{ color: item.colornick }" style="margin-left: 8px;">{{ item.nick }}</b>:
      <span :style="{ color: item.colortext }">{{ item.msg }}</span>
    </li>
  </ul>
</div>

【讨论】：