切换模板时的vuejs未定义值

Question

我正在将一个列表移植到一个表中，以便将来进一步扩展列，但我遇到了一个未定义的变量错误，我不明白。

这是现有列表：

                <ul class="collection with-header">
                    <li class="collection-item" v-for="day in days">
                        <drop @drop="function(data, event) { handleDrop(data, day, event); }">
                            <div>{{ day.getLabel() }}</div>
                            <drag class="chip" v-for="meal in day.meals">{{ meal.title }}<i class="close material-icons" v-on:click="deleteMeal(meal)">close</i></drag>
                        </drop>
                    </li>
                </ul>

这是新表：

                <table>
                    <tr class="collection-item" v-for="day in days">
                        <td>{{ day.getLabel() }}</td>
                        <drop @drop="function(data, event) { handleDrop(data, day, event); }" tag="td">
                            <drag class="chip" v-for="meal in day.meals">{{ meal.title }}<i class="close material-icons" v-on:click="deleteMeal(meal)">close</i></drag>
                        </drop>
                    </tr>
                </table>

运行代码时，我收到“未定义日期”错误，这似乎发生在 drag 行上，因为将其注释掉可以修复错误。我不明白为什么没有定义该变量。在这两个示例中，元素都可以访问 day 对象以获取其标签，但在两个示例中相同的 drop 标记中，day 对象现在超出了范围。

是否有一些关于表格的具体问题导致了这里的问题？

Answer 1

问题是component标签被props中传递给它的标签替换发生在模板转换为DOM之后。并且在表格的情况下，不允许在表格内部的标签被转移到表格之前的DOM：

new Vue({
  el: "#app"
})

table {
  border: 4px solid green;
}

td {
  border: 1px solid red;
}

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

<div id="app">
  <table>
    <tr>
      <td>First column</td>
      <component :is="'td'" tag="td">Second column</component>
      <td>Third column</td>
    </tr>
  </table>
</div>

因此，day 范围内不会有变量 day。所以在这种情况下不要使用属性tag：

  <table>
    <tr class="collection-item" v-for="day in days">
      <td>{{ day.label }}</td>
      <td>
        <drop @drop="function(data, event) { handleDrop(data, day, event); }">
          <drag class="chip" v-for="meal in day.meals">{{ meal.title }}
              <i class="close material-icons" v-on:click="deleteMeal(meal)">x</i>
          </drag>
        </drop>
      </td>
    </tr>
  </table>