Как использовать Vue prop в качестве переменной в методе?

Я новичок в Vue, и мне трудно понять все концепции. В настоящее время я создаю приложение Laravel и использую Vue для дополнения некоторых представлений. То, что я пытаюсь сделать, - это довольно простой вызов моего backend API с помощью опоры, настроенной с помощью компонента Vue (карта Laravel Nova).

У меня есть 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 со всеми моими полями. Но я не вижу данных в своих представлениях, когда пытаюсь их отобразить.

Как я могу этого добиться?


javascript vue.js laravel laravel-nova
person ladidaadi    schedule 21.11.2018    source источник
comment
Должен ли this.account = res.data; быть vm.account = res.data; для установки значения в вашем компоненте?   -  person Peter    schedule 21.11.2018
comment
@Peter не имеет значения, поскольку OP использует стрелочные функции   -  person Phil    schedule 21.11.2018
comment
У вас есть app.dev/api/accounts/{id} и /api/accounts/${account_id}. какой это должен быть? Также где определяется props?   -  person Psidom    schedule 21.11.2018
comment
Всегда сначала проверяйте консоль браузера на наличие ошибок. Также проверьте вкладку Сеть, где вы должны увидеть любые запросы AJAX. Вы видите, что делается запрос? Если да, то каков ответ (включая фактические данные ответа)   -  person Phil    schedule 21.11.2018
comment
@Phil Конечно! Спасибо.   -  person Peter    schedule 21.11.2018

Ответы (1)


arrow_upward
1
arrow_downward

Я думаю, что сначала вам нужно проверить запрос к серверу, какой 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 для этого компонента.

Надеюсь, это поможет тебе.

person ThangLe    schedule 21.11.2018
comment
Ага, отличная уловка по поводу обратных кавычек. Хороший! - person Phil; 21.11.2018
comment
Да, это были обратные кавычки! Спасибо - person ladidaadi; 21.11.2018