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

Question

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

我正在使用 Element-ui

中的步骤组件

<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 属性。

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

Load html in vue.js component attribute

vue.js

element-ui