Question

我对Vue还是很陌生，并且在掌握所有概念方面遇到了困难。我目前正在构建一个Laravel应用程序，并且正在使用Vue来补充一些视图。我想做的是借助Vue组件（Laravel Nova卡）设置的道具，非常简单地调用我的后端API。

我有一个account_id，我可以通过这样的道具访问它：

resource.fields[3].value

然后我尝试调用api并保存与该帐户有关的数据

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

然后在我的视图中呈现它：

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

我所有的端点都是正确的-当我访问app.dev/api/accounts/{id}时，我得到了一个包含所有字段的JSON数组。但是，尝试渲染数据时，我的视图中没有看到数据。

我该怎么做？

Answer 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到此组件。

希望它对您有帮助。

如何在方法中使用Vue prop作为变量？

1 个答案: