时间戳

首页 > 解决方案 > 如何从模板中获取属性

vue.js - 如何从模板中获取属性

问题描述

在向服务器发送有关数据的请求之前，我可以从模板中获取属性吗？这是我的模板：

<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 获取模板使用的变量并在服务器端调用它们时。在这种情况下，响应中只有那个变量，什么模板真正使用

标签： vue.jsvuejs2vue-component

解决方案

我不知道如何设置您的后端，但您可以在数据中拥有其他属性：

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

并使用它的列表将数据发送到服务器。

推荐阅读