如何在JSON中使用Vue数据属性
如何在JSON中使用Vue数据属性
提问于 2021-10-05 16:44:20
在下面的数据属性下的Vue代码中，如何使用vue数据属性设置json字段：elasticSearchQuery.query.term."searchId.keyword"：searchId
const app = Vue.createApp({
data() {
return {
reports: [],
searchId: "example",
elasticSearchQuery: {
query: {
term: {
"searchId.keyword": "example",
},
},
},
};
},
methods: {
getElasticReports() {
axios
.post("http://localhost:9200/search-reports/_search", this.elasticSearchQuery, {
headers: {
"Content-Type": "application/json",
}
})
.then((response) => (this.reports = response.data.hits.hits))
.catch((error) => console.log(error));
},
},
});
app.mount("#app");当我设置"searchId.keyword": "example"时，它工作得很好，但是"searchId.keyword": this.searchId不工作，我得到了400个坏的响应
我应该如何将vue数据属性传递到json字段？
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-10-05 16:55:25
vue中的数据变量在运行时不能访问其他数据变量。将elasticSearchQuery设置为计算属性。
computed: {
elasticSearchQuery() {
return {
query: {
term: {
"searchId.keyword": this.searchId,
}
}
}
}
}点击此处了解更多信息：https://vuejs.org/v2/guide/computed.html
Stack Overflow用户
发布于 2021-10-05 16:56:09
您可以尝试使用computed
new Vue({
el: '#demo',
data() {
return {
reports: [],
searchId: "example",
elasticSearchQuery: {
query: {
term: {
["searchId.keyword"]: this.searchId,
},
},
},
};
},
computed: {
elSearch() {
return this.elasticSearchQuery.query.term['searchId.keyword'] = this.searchId
}
},
})
Vue.config.productionTip = false
Vue.config.devtools = false<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<p>{{elSearch}}</p>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69454338
复制相关文章
相似问题
腾讯云开发者
