Question

我有

Vue.component ('test', {
template: '<div 
    '@click="imageHelperClick($event)"  ' +
    '@mouseout="mouseoutHelper" ' +
    'class="el-hover image-hover" :data-div-id="helper.htmlId">' +
    '<transition name="fade"><span v-if="helper.mouseover">Press to load image</span></transition>' +
    '<size-check-input ref="fileInput" type="file" data-upload-check @change="imageSelected($event)" accept=".eps,image/x-png,image/jpeg"/>' +
    '</div>',
methods:{...},

如果helper.isEditable==true否则不是可点击的，可触摸的，那么我想使该div可点击。

复杂性在于，仅当document.ready和服务器向我发送有关字段isEditable的信息时，我才会获得该参数。

所以，我的问题是：

我可以做

computed:{
isEditable: function(){
return helper.isEditable;
}
}

然后做类似的事情

v-if = "isEditable" @click.prevent @mouseOver.prevent 
v-else @click="imageHelperClick($event)" @mouseout="mouseoutHelper"

等吗？

Answer 1

Vue没有这样的语法。您可以尝试

const inline = `
    position: absolute;
    top: 1rem;
    right: 1rem;

    ${
        media.smalldevice`
            top: 4rem;
            right: 5rem;
        `
    }

`;

并切换:disabled="yourFlag"以使其可点击

vue v-if =“ isEditable” @ click.prevent

1 个答案: