Vue.js删除渲染函数中的contentitable属性

Question

这似乎应该是一个简单的解决方案，但事情出了问题…

我需要有条件地删除

contenteditable属性

<!-- first state -->
<div contenteditable="true"></div>
<!-- second state -->
<div></div>

我试过:

data() {
return {
contenteditable: true,
title: "Title",
};
},
methods: {
handleClick() {
this.contenteditable = null;
this.title = null;
},
},
render(createElement) {
const options = {
attrs: {
id: "ID",
title: this.title,
contenteditable: this.contenteditable,
// Not working either
//...(this.contenteditable && { contenteditable: true }),
},
domProps: {
innerHTML: "<p>Test</p>",
},
on: {
click: this.handleClick,
},
};
return createElement("div", options);
},

沙箱

结果是:<div contenteditable="false"></div>，但我需要完全删除属性。例如，title属性工作如预期，它不呈现，如果它的值被设置为null。我也试着让attrs对象完全反应，像:

data() {
return {
attrs: {
title: 'Title',
contenteditable: true,
}
}
},
methods: {
handleClick() {
Vue.delete(this.attrs, 'contenteditable')
Vue.delete(this.attrs, 'title')
},
},
render(createElement) {
const options = {
attrs: this.attrs,
domProps: {
innerHTML: "<p>Test</p>",
},
on: {
click: this.handleClick,
},
};
return createElement("div", options);
},

沙箱

…但运气不好。有办法解决这个问题吗?

谢谢!

Answer 1

Vue 2将contenteditable属性视为特例，如果新属性值为undefined，则不会删除该属性。这在Vue 3中是固定的(或计划的)。

您可以绕过此行为并使用domProps来设置它:

domProps: {
contentEditable: this.contenteditable ? 'true' : 'inherit'
}

下面是一个示例:

new Vue({
el: '#app',
data() {
return {
contenteditable: false
}
},
render(h) {
return h('div', [
h('button', {
on: {
click: () => this.contenteditable = !this.contenteditable
}
}, `contenteditable: ${this.contenteditable}`),
h('div', {
domProps: {
contentEditable: this.contenteditable ? 'true' : 'inherit'
}
}, 'Text')
])
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
</div>

Answer 2

假设您的div如下所示

<div id="editable"></div>

然后使用下面的方法切换contentitable

document.getElementById('editable').contentEditable = "true"

或

document.getElementById('editable').setAttribute('contentEditable',"true")

如果你想让这个div在开始时是可被满足的，那么在mounted中添加上面的行。