访问从道具Vue.js创建的数据

问题描述 投票:1回答:3

我无法从创建函数中的props访问数据。它在方法中工作正常,如下面的代码所示。

enter image description here

它的工作方法如下所示

enter image description here

export default {
    props: ['projectId'],
    data() {
        return {
            elements: []
        }
    },
    created() {
        axios.get(`api/projects/${this.projectId}/elements`).then(response => {
           this.elements = response.data.data
        });
    },
    methods: {
        addingElement(element) {
            alert(this.projectId);
        }
    }
}

父模板

<add-project-element :projectId="project.id"></add-project-element>

谢谢

vue.js vuejs2 vue-component prop
3个回答
2
投票

<add-project-element :projectId="project.id"></add-project-element>必须是

<add-project-element :project-id="project.id"></add-project-element>

HTML属性名称不区分大小写。任何大写字符都将被解释为小写。所以camelCased道具名称需要使用他们的kebab-cased等价物。


1
投票

你的axios请求中有一个拼写错误。你的道具是projectId,但你有project.id那里...


0
投票

好的,所以最后我找到了一些东西,我不确定它是否正确,但它的工作正常。

实际上,道具在创建之后呈现,这就是它显示为未定义的原因。所以我设定了一些时间。它起作用了

    created() {
    setTimeout(() => {
        axios.get(`/api/projects/${self.projectId}/elements`)
            .then(response => {
                this.elements = response.data.data
            });
    }, 1)
},

感谢大家

© www.soinside.com 2019 - 2024. All rights reserved.