Как использовать Vue проп в качестве переменной в методе? - PullRequest
Новая
       10

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

0 голосов
/ 21 ноября 2018

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

У меня есть account_id, к которому я могу получить доступ через опору следующим образом: 

resource.fields[3].value

Затем я пытаюсь позвонить в API и сохранить данные, относящиеся к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));
    }
}

И затем отобразите его в моем представлении: 

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

Все мои конечные точки верны - когда я посещаю app.dev/api/accounts/{id}, я получаю массив JSON со всеми моими полями,Но я не вижу данных в своих представлениях, когда пытаюсь их отобразить.

Как мне это сделать?

1 Ответ

0 голосов
/ 21 ноября 2018

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

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

...