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>

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

有关表的特定信息在这里引起了问题吗？

Answer 1

问题在于，在模板转换为DOM之后，用道具中传递给它的标签替换了component标签。对于表，不允许在表内部的标签将在表之前传输到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范围内将没有变量tr。因此，在这种情况下，请勿使用属性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>

vuejs切换模板时未定义的值

1 个答案: