Vue Component props值似乎不在模板上

Question

我的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));
        }
    }
});

User.vue

<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>

错误在哪里？

我没有收到任何错误，但我不明白为什么这个值没有打印在屏幕上

Answer 1

您的main.js和index.html不应在HTML和渲染功能中混合使用模板。所以你的main.js应该是：

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

1. 您不应直接重新分配数据值，因为Vue无法检测属性添加和重新呈现视图。您应该通过Vue.set或this.$set这样执行此操作：

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

您可以在https://vuejs.org/v2/guide/reactivity.html和Vue.set API中详细了解vue如何反应：https://vuejs.org/v2/api/#Vue-set

Answer 2

似乎您将2个Vue实例放在同一个模板上，因为在您的主文件中，您将模板定义为el: "#user"，该模板已由User.vue控制。

在index.html中添加一个带有id="app"的div，并在main.js中添加el: "#app"