Шаблон Vue не отображается в цикле for

Question

Итак, после изучения учебника по Vue для начинающих по настройке приложения Todo, я решил попытаться адаптировать некоторые его части для веб-сайта, который я пытаюсь создать. Я застрял на том, что, несмотря на все сказанное, мой цикл for должен работать, это не так.

Сам проект был создан с использованием vue-cli, и большая часть кода скопирована из учебника. (который отлично работает с собственным циклом for)

Возможно, данные не передаются в шаблон?

Я пробовал:

1. с информацией внутри разделов реквизита и данных
2. передача всего объекта и только параметров в шаблон
3. пробовал с жестко закодированными значениями внутри массива, который повторяется на

(После настройки нового проекта vue-cli:)

App.vue:

<template>
  <div id="app">
    <create-section v-on:create-section="addSection" />
    <section v-for="section in sections" v-bind:key="section.title" :info="section"></section>
  </div>
</template>

<script>
import CreateSection from "./components/CreateSection";
import Section from "./components/Section";
export default {
  name: "App",
  components: {
    CreateSection,
    Section
  },
  data() {
    return {
      sections: []
    };
  },
  methods: {
    addSection(section) {
      this.sections.push({
        title: section.title,
        description: section.description
      });
      console.log(
        "Added to sections! : " + section.title + " | " + section.description
      );
      console.log("Sections length: " + this.sections.length);
    }
  }
};
</script>

Section.vue

<template>
  <div class="ui centered card">
    <div class="content">
      <div class="header">{{ info.title }}</div>
      <div>{{ info.description }}</div>
    </div>
  </div>
</template>


<script type = "text/javascript" >
export default {
  props: {info: Object},
  data() {
    return {};
  }
};
</script>

Ожидаемый результат: Показать шаблон раздела на веб-сайте (после его создания с помощью addSection, который вызывает другой скрипт. Для краткости не включен)

Фактический результат: Ничего не отображается, добавляется только пустой тег

Answer 1

Я думаю, проблема в том, что вы назвали это Section. Поскольку <section> является стандартным элементом HTML, его нельзя использовать в качестве имени компонента.

В библиотеке есть предупреждение, но оно чувствительно к регистру, что не совсем полезно. Попробуйте изменить раздел components на этот:

components: {
  CreateSection,
  section: Section
},

Вы должны увидеть предупреждение.

Исправление будет просто называть это как-то еще.

Это упоминается в первой записи в руководстве по стилю:

https://vuejs.org/v2/style-guide/#Multi-word-component-names-essential

Answer 2

Помимо проблемы с использованием существующей команды HTML5 в качестве имени для вашего компонента Vue (кстати, вы должны поменять его на другое имя), вы также должны посмотреть, как вы объявили реквизиты в Section.vue.Приведенный ниже код показывает правильный способ сделать это:

<script type = "text/javascript" >
export default {
  props: ['info'],
  data() {
    return {};
  }
};
</script>

Пропики принимают имя свойства, объявленного из родительского компонента, и должны быть строкой.

Надеюсь, это поможет.

Answer 3

Проблема в том, что когда вы выполняете цикл в <section v-for="section in sections" v-bind:key="section.title" :info="section"></section>, массив sections не готов, там ничего нет .. поэтому, когда вы добавляете новые вещи в этот массив, вам нужно вызвать (вычисляемую пропу)снова отправьте данные в компонент section.

Answer 4

section - это существующий элемент HTML5, вы должны назвать свой компонент section как-то иначе.

Если вы действительно хотите назвать компонент Раздел, зарегистрируйте его как 'v-section'