뷰 구성 요소 소품 값은

모든 것이 내 main.js뷰 구성 요소 소품 값은

import User from './components/User.vue' 

new Vue({ 
    el: '#user', 
    render: h => h(User), 
    data() { 
     return { 
      groups: [] 
     } 
    }, 
    mounted() { 
     this.getGroups(); 
    }, 
    methods: { 
     getGroups: function() { 
      axios.get('http://vagrant.dev/groups') 
       .then(response => this.groups = response.data) 
       .catch(error => console.log(error)); 
     } 
    } 
});

에

<template> 
    <div id="user"> 
     {{groups}} <!-- must be printed but it doesn't seem --> 
    </div> 
</template> 
<script> 
    export default { 
     name: 'user', 
     props: ['groups'] 
    } 
</script>

및 index.html을

<div id="user"> 
    <user :groups="groups"></user> 
</div>

User.vue

괜찮 템플릿을하지 않는 것입니다

mi 말뚝?

나는 오류를 얻을하지 않습니다하지만 값이 HTML에서 템플릿을 혼합 기능을 렌더링하지 말아야 화면

출처

2017-09-23 mak

this.getGroups()와 getKurbanGroups에 오타가 설정 index.html을? 또는 그들은 다른 기능을 가지고 있습니다. –

미안합니다. setGroups가 있어야하고 다른 기능이 있어야합니다. 나는 그것을 고쳤다. – mak

귀하의 main.js 및 index.html에 인쇄되지 않은 이유를 나는 이해하지 못했다. 그래서 main.js가 있어야한다 :

```new Vue({ 
    el: '#user', 
    components: { User }, 
    data() { 
     return { 
     groups: [] 
     } 
    }, 
...```

뷰는 속성 추가 및 다시 쓰게보기를 감지 할 수 있기 때문에 직접 데이터 값을 다시 할당하지 않아야합니다. 이 같은 Vue.set 또는 this.$set를 통해 그것을 수행해야합니다

this.$set(this, 'groups', response.data)

당신은 어떻게 VUE 반응 https://vuejs.org/v2/guide/reactivity.html 및 Vue.set API에 대한 자세한 읽을 수 있습니다 : 당신은 2 퍼팅처럼 https://vuejs.org/v2/api/#Vue-set

출처

2017-09-23 11:13:58 imcvampire

그건 옳지 않습니다. 이것은 Vue 인스턴스 데이터 객체에 새로운 속성을 선언하고자 할 때만 해당합니다. 그의 경우 이미'groups'을 배열로 선언했기 때문에 옵저버가 붙어있어서이 속성은 반응 적입니다. –

가 보인다을 VUE 인스턴스는 주 파일에서 이미 으로 제어되는 el: "#user"으로 템플릿을 정의하므로 동일한 템플릿에 있습니다. 당신에

는 id="app"와 사업부를 추가하고 main.js에 el: "#app"

출처

2017-09-24 08:41:02 Tomer

뷰 구성 요소 소품 값은

답변

관련 문제