在 vue 中加载 html.js 组件属性

Question

我不完全确定我应该如何命名这个问题，这可能是我在网上找不到任何相关信息的原因，所以如果我错了，请纠正我。

我正在使用元素用户界面中的步骤组件

<el-steps :active="active" align-center>
<el-step v-for="(el,idx) in certain_list" :key="idx" :title="getTitle(el)">
</el-step>
</el-steps>

现在我不想将文本设置为标题属性，而是例如可编辑的输入字段。我希望通过在 getTitle 函数中返回 html 来实现这一点，但我不确定这是否是正确的方法，因为我也想在这个输入字段上使用 v-model。

感谢所有帮助！

Answer 1

var Main = {
data() {
return {
active: 0,
certain_list: [
{title: 'Title1'},
{title: 'Title2'},
{title: 'Title3'}
]
};
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css");

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="//unpkg.com/element-ui@2.13.0/lib/index.js"></script>
<div id="app">
<el-steps :active="active" align-center>
<el-step v-for="(el,idx) in certain_list" :key="idx">
<el-input slot="title" v-model="el.title"></el-input>
</el-step>
</el-steps>
</div>

使用命名slot覆盖title属性。