0

I'm fairly new to Vue and am having a tough time grasping all of the concepts. I am currently building a Laravel application and am using Vue to supplement some views. What I am trying to do is a pretty simple call to my backend API with the help of a prop set up with the Vue component (Laravel Nova card).

I have an account_id that I am able to access through a prop like so:

resource.fields[3].value

I am then trying to make a call to the api and save data relevant to the account

data() {
    return {
        account: {
            name: '',
            location: '',
            type: ''
        }
    };
},

methods: {
    getAccount() {
        let vm = this;
        var account_id = vm.resource.fields[3].value;
        page_url = page_url || '/api/accounts/${account_id}';
        fetch(page_url)
        .then(res => res.json())
        .then(res => {
            this.account = res.data;
        })
        .catch(err => console.log(err));
    }
}

And then render it in my view:

<h1>{{ account.name }}</h1>
<p>{{ account.location }}</p>
<p>{{ account.type }}</p>

All of my endpoints are correct - when I visit app.dev/api/accounts/{id} I get a JSON array with all of my fields. But, I see no data in my views when I try to render it.

How can I accomplish this?

4

1 回答 1

1

我认为首先您需要检查对服务器的请求，请求的 URL 是什么。

所以，我认为在这里page_url = page_url || '/api/accounts/${account_id}';你应该像这样使用反引号（`）page_url = page_url || `/api/accounts/${account_id}`;

如果所有这些都不适合你。我想你可以通过它props

data() {
    return {
        account: {
            name: '',
            location: '',
            type: ''
        }
    };
},
props: ['account_id'],
methods: {
    getAccount() {
        let vm = this;
        var account_id = vm.resource.fields[3].value;
        page_url = page_url || `/api/accounts/${this.account_id}`;
        fetch(page_url)
            .then(res => res.json())
            .then(res => {
                this.account = res.data;
            })
            .catch(err => console.log(err));
    }
}

在调用者组件中，使用 v-bind="account_id"prop到该组件。

希望它可以帮助你。

于 2018-11-21T03:50:21.827 回答