Vue2模板动态绑定attr

Question

在vue模板中html绑定一个attr.在以前的方法通过js拼装的代码是,

options += '<option ' + (editor.customKey
            ? 'data-' + editor.customKey + "=" + item[editor.customKey]
            : '') + ' value="' + v + '"' + (v == value
            ? " selected"
            : "") + '>' + d + '</option>';

这里面customKey是一个变量,每个option都有一个属性data-xx或者data-oo.

现在想给改成vue模板.

<option v-for="opt in col.editor.items" 
:value="opt[col.editor.value||'id']" 
:data-{{col.editor.customKey}}="col.editor.customKey">
{{opt[col.editor.display||'name']}}</option>                 

这里面:data-{{col.editor.customKey}}="col.editor.customKey"这一句是错误的,因为我不知道该怎么写.

求教此处应该如何写.

Answer 1

属性名称在模板里面是不支持动态化的，如果需要，需要在 render 方法里面写，你可以看一下 Vue2 的render api。
如果用了 vue 了，一般就比较少用 data-xxx 来存值了。 建议从其他思路来解决这个问题，例如把属性名改为固定的，因为你的属性值已经是动态的了，就没必要属性名也是动态的

Answer 2

var my_attr ='';
先声明一个变量
然后在data中定义
myTemplate: "<h4 v-bind:data="+ mydata +">标题</h4>"
最后在模板中
<div class="" v-html="myTemplate"></div>

Answer 3

可以分拆成两个部分：

<option data-subkey="col.editor.customKey" data-value="col.editor.customKey" />

这样也能完成想要的功能。