Как я могу получить свойства из шаблона - PullRequest
Новая
       5

Как я могу получить свойства из шаблона

0 голосов
/ 22 января 2020

Могу ли я получить свойства из шаблона перед отправкой запроса на сервер о данных? Вот мой шаблон: 

<box-component inline-template>
<div>
    <div class="loading" v-if="Loading">  Loading ...  </div>
    <div  v-if="Result">
        <ul>
            <li> {{ Result.FirstProp }} </li>
            <li> {{ Result.FourthProp }} </li>
        </ul>
    </div>
</div>

А это мой компонент: 

let BoxComponent = {
data() {
    return {            
        Result: null,
        Loading: true
    };
},
created: function () {
    this.Update();
},
methods: {
    Update: function () {
        this.Loading = true;    
        axios.post("#SERVER_URL#")
            .then(response => {
                this.Loading = false;
                this.Result = response.data;
            });
         }
}
}
 Vue.component('box-component', BoxComponent);

Работает отлично! Проблема в том, что ответ сервера содержит гораздо больше данных. Ответ сервера: 

{
    "FirstProp": "first",
    "SecondProp": "second"
     ...
    "HundredthProp": "hudredth"
}

Я не могу изменить ответ (другой проект использует это тоже). Но если я могу отправить список свойств из шаблона (в данном случае это FirstProp и FourthProp), серверная сторона выдаст мне отфильтрованный ответ, который содержит только эти свойства, потому что оптимальный ответ выглядит следующим образом: 

{
    "FirstProp": "first",
    "FourthProp": "fourth"
}

Итак, вопрос: как я могу это сделать?

Могу ли я найти его в Vue объекте?

Я могу загрузить шаблон как строковую переменную, но я хочу избежать взлома регулярных выражений.

Обновление:

В этом случае серверная часть вызова BoxTemplate без «фильтров»

Это оптимальный вариант , когда js получить переменные, которые использует шаблон, и вызвать их на стороне сервера. В этом случае в ответе присутствуют только те переменные, какой шаблон реально использовать

1 Ответ

1 голос
/ 22 января 2020

Я не знаю, как настроить ваш бэкэнд, но вы можете иметь дополнительное свойство в ваших данных: 

data() {
    return { 
        listOfProperty: [
            'FirstProp',
            'FourthProp',
        ],
...

И использовать его список для отправки данных на сервер.

...