Vue ошибка в npm и её отсутствие в cdn

184

24 сентября 2018, 21:20

Суть такая: имеется один и тот же кусок кода. Если использовать его при подключении Vue как простой js библиотеки (вот так <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>), то всё прекрасно работает ( 4 дива заполняются из массива), но если точно такой же подход использовать при сборке npm, то появляется ошибка (в браузере в консоли ):

Property or method "posts" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

Ошибка ругается на тот самый массив. Собственно вопрос: Почему при подключении из CDN всё работает???

Далее код (разделю статика/компонент) HTML+JS

<!DOCTYPE html> 
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
</head> 
<body> 
<div id="greed"> 
    <div v-for="post in posts"> 
        <h3>{{ post.title }}</h3> 
        <p>{{ post.intro}}</p> 
    </div> 
</div> 
 
</body> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
</html> 
 
<style> 
    * { margin: 0; padding: 0;} 
    #greed { 
        display: grid; 
        grid-template-columns: repeat(4, 1fr); 
    } 
    #greed div { 
        display: inline-block; 
        border: 1px black solid; 
    } 
</style> 
 
<script> 
    var app = new Vue({ 
        el: '#greed', 
        data: { 
            posts: [ 
                { id: 1, title: 'title 1', intro: 'intro 1' }, 
                { id: 2, title: 'title 2', intro: 'intro 2' }, 
                { id: 3, title: 'title 3', intro: 'intro 3' }, 
                { id: 4, title: 'title 4', intro: 'intro 4' } 
            ] 
        } 
    }); 
</script>

А вот компонент Vue (собираемый npm)

<template> 
  <div id="greed"> 
    <div v-for="post in posts" v-bind:key="post.id"> 
      <h3>{{ post.title }}</h3> 
      <p>{{ post.intro}}</p> 
    </div> 
  </div> 
</template> 
 
<script> 
import Vue from 'Vue'; 
export default { 
  name: 'LatestWork' 
}; 
// eslint-disable-next-line 
var app = new Vue({ 
  el: '#greed', 
  data: { 
    posts: [ 
      { id: 1, title: 'title 1', intro: 'intro 1' }, 
      { id: 2, title: 'title 2', intro: 'intro 2' }, 
      { id: 3, title: 'title 3', intro: 'intro 3' }, 
      { id: 4, title: 'title 4', intro: 'intro 4' } 
    ] 
  } 
}); 
</script> 
 
<style scoped> 
  #content { 
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr 1fr; 
  } 
  #content div { 
    display: inline-block; 
    border: 1px black solid; 
    margin: 0.5rem; 
  } 
</style>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как вызывать событие клика и считывание input?

https://codepenio/anon/pen/gjRYWx

170

javascript

Vue не работает фильтр uppercase

196

javascript

Не работает функция SeriesSum(n)

Функция возвращает строку в формате "ххх"

184

javascript

Как выглядит изнутри нативная функция apply?

Как известно синтаксис функции apply: funcapply(context, [arg1, arg2]); Как будет выглядеть кастомная функция, которая принимает контекст, аргументы в массиве...

211