VueJS 데이터()가 작동하지 않음

VueJS 데이터()가 작동하지 않음

나는 VueJS 앱을 만들려고 노력중이지만 가장 간단한 예로 실패한다.나는 VueJS(버전 1, 버전 2도 시도했다)를 위해 사전 구축된 지원으로 Laravel 5.3을 사용하고 있다.

여기 나의 예가 있다.vue 구성 요소

<template>
    <div class="profile">
        {{ name }}
    </div>
</template>

<script>
    export default {
        data () {
            return {
                name: 'John Doe'
            }
        }
    }
</script>

그리고 여기 메인 코드가 있다.

Vue.component('example', require('./components/Example.vue'));

const app = new Vue({
    el: '#app'
});

콘솔에 매번 표시되는 오류:

[부유 경고]:속성 또는 메서드 "이름"은 인스턴스에서 정의되지 않고 렌더링 중에 참조된다.데이터 옵션에서 반응형 데이터 속성을 선언하십시오.(구성 요소에 있음)

뭐가 잘못됐는지 알기나 해?고마워요.

당신 안에script대신 태그export default사용:

module.exports = {
  data() {
    return { counter: 1 }
  }
}

이게 너에게 효과가 있을 거야

템플릿 내의 구성 요소 호출

Vue.component('example', {
  template: `<div class="profile">{{ name }}</div>`,
  data () {
return {
  name: 'John Doe'
}
  }
})

const app = new Vue({
  el: '#app'
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app"><example></example></div>

문제는 당신이 그 파일에서 구성 요소 '예'를 로드하려고 하는데 이름을 대지 않았다는 것이다.다음을 사용하십시오.

<script>
   export default {
     name: 'example',
     data() {
       return {
         name: 'John Doe'
       }
     }
   }
</script>

또는 다음 방법으로 구성 요소를 로드하십시오(확장 .vue가 필요한지 확실하지 않음).

require('./exmaple').default();

Babel을 사용하는 경우 다음 구문을 사용하여 이름을 지정하지 않고 구성 요소를 로드할 수도 있다.

import Example from ./example

또한 Babel을 사용할 경우에 대비하여 추가 정보를 얻으려면 이 게시물을 체크아웃하십시오.

참조URL: https://stackoverflow.com/questions/39932110/vuejs-data-not-working