无法使用 vue.js 在同一个按钮上调用 v-show 和 @click [英] Unable to call v-show and @click on same button with vue.js
问题描述
我正在尝试根据数据变量在按钮上显示文本，并为 vue.js axios 方法调用一个函数.我能够根据数据变量在按钮上显示文本，但无法调用 axios post 方法.我遇到以下错误.当我点击按钮时，url "
<span v-if="user.user_role_id ==results.desk_user_role_id"><button small color="primary" style="width:400px;"@click="forward" v-show="forwardTo">{{ forwardTo }}</button><br><button small color="primary" style="width:400px;"@click="revert" v-show="revertTo">{{ revertTo }}</button></span><预><代码>数据() {返回 {用户:[],角色:{2:{名称:'注册'，下一个:4，上一个:0}，4:{名称:'技术'，下一个:6，上一个:2}，6: { name: 'Executive', next: 0, previous: 4 },},};},安装(){const currentuserUrl = 'api/profile';VueAxios.get(currentuserUrl, {标题:{'X-Requested-With': 'XMLHttpRequest',授权:`Bearer ${localStorage.getItem('token')}`，},}, {超时:100000，}).then((响应) => {//调试器；this.user = response.data;//console.log(response.data);//调试器；});计算:{转发() {const { next } = this.roles[this.user.user_role_id];返回下一个?`转发到 ${this.roles[next].name}` : false;},恢复() {const {前} = this.roles[this.user.user_role_id];返回上一个?`恢复到 ${this.roles[previous].name}` : false;},},方法: {向前() {this.$refs.form.forward();const url = `/api/registration/${this.$route.params.id}/forward`;VueAxios.post(url, this.forward_message, {标题:{'X-Requested-With': 'XMLHttpRequest',授权:`Bearer ${window.localStorage.getItem('token')}`，},}, {超时:10000，}).then((响应) => {如果(响应.状态 === 200){//this.successmessage = '转发成功.';this.message = '转发成功.';}}).catch((错误) => {控制台日志(错误)；});},恢复() {const url = `/api/registration/${this.$route.params.id}/revert`;VueAxios.post(url, this.forward_message, {标题:{'X-Requested-With': 'XMLHttpRequest',授权:`Bearer ${window.localStorage.getItem('token')}`，},}, {超时:10000，}).then((响应) => {如果(响应.状态 === 200){//this.successmessage = '转发成功.';this.message = '恢复成功.';}}).catch((错误) => {控制台日志(错误)；});},
this.user 是数组还是对象?如果它是一个包含单个对象的数组，那么您必须尝试 this.user[0].user_role_id，或者如果它是一个对象，那么可能有一个用户 id 不作为角色对象中的键出现.为此，您可以在计算属性中使用它.
forwardTo() {const tempObj = this.roles[this.user.user_role_id];返回 tempObj ?`转发到 ${this.roles[tempObj.next].name}` : false;}I'm trying to display text on button based on data variable and call a function for vue.js axios method. I'm able to show text on button based on data variable but unable to call axios post method .I'm getting below error. When I click the button, url "http://localhost:8085/#/applicationtab/3" changes to http://localhost:8085/?#/applicationtab/3.
<span v-if="user.user_role_id ==results.desk_user_role_id">
<button small color="primary" style="width:400px;" @click="forward" v-show="forwardTo">{{ forwardTo }}</button><br>
<button small color="primary" style="width:400px;" @click="revert" v-show="revertTo">{{ revertTo }}</button>
</span>
data() {
return {
user: [],
roles: {
2: { name: 'Registration', next: 4, previous: 0 },
4: { name: 'Technical', next: 6, previous: 2 },
6: { name: 'Executive', next: 0, previous: 4 },
},
};
},
mounted() {
const currentuserUrl = 'api/profile';
VueAxios.get(currentuserUrl, {
headers: {
'X-Requested-With': 'XMLHttpRequest',
Authorization: `Bearer ${localStorage.getItem('token')}`,
},
}, {
timeout: 100000,
})
.then((response) => {
// debugger;
this.user = response.data;
// console.log(response.data);
// debugger;
});
computed: {
forwardTo() {
const { next } = this.roles[this.user.user_role_id];
return next ? `Forward to ${this.roles[next].name}` : false;
},
revertTo() {
const { previous } = this.roles[this.user.user_role_id];
return previous ? `Revert to ${this.roles[previous].name}` : false;
},
},
methods: {
forward() {
this.$refs.form.forward();
const url = `/api/registration/${this.$route.params.id}/forward`;
VueAxios.post(url, this.forward_message, {
headers: {
'X-Requested-With': 'XMLHttpRequest',
Authorization: `Bearer ${window.localStorage.getItem('token')}`,
},
}, {
timeout: 10000,
})
.then((response) => {
if (response.status === 200) {
// this.successmessage = 'Forwarded successfully.';
this.message = 'Forwarded successfully.';
}
})
.catch((error) => {
console.log(error);
});
},
revert() {
const url = `/api/registration/${this.$route.params.id}/revert`;
VueAxios.post(url, this.forward_message, {
headers: {
'X-Requested-With': 'XMLHttpRequest',
Authorization: `Bearer ${window.localStorage.getItem('token')}`,
},
}, {
timeout: 10000,
})
.then((response) => {
if (response.status === 200) {
// this.successmessage = 'Forwarded successfully.';
this.message = 'Reverted successfully.';
}
})
.catch((error) => {
console.log(error);
});
},
this.user is an array or object? If it is an array containing an single object then, you must try this.user[0].user_role_id, or if it is an object so there may be a user id which is not present as a key in the roles object. For that you can use this in your computed property.
forwardTo() {
const tempObj = this.roles[this.user.user_role_id];
return tempObj ? `Forward to ${this.roles[tempObj.next].name}` : false;
}
这篇关于无法使用 vue.js 在同一个按钮上调用 v-show 和 @click的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
