当属性名称包含在值中时，Vue.js如何在html标签内输出属性？

Question

如果我有一个包含如下字段属性的数据结构，如何在html中输出dataAttributes的值？

var app3 = new Vue({
    el: '#app-3',
       data: {
         field: { 
                  type: 'text,
                  name: 'First Name', 
                  class: 'form-control js-user-lookup',
                  dataAttributes: 'data-autocomplete-url=api/users data-selected=123',
                }
       }
})

<input :type="field.type"
       :id="field.name"
       :name="field.name"
       :class="field.class"
       {{field.dataAttributes}} />

您不能在 html 标记中使用 mustache 语法，我也不能将它绑定到 data-* 属性，因为该属性是值的一部分，例如data-autocomplete-url 和 data-selected?

Answer 1

您无法使用简单的数据绑定语法来做到这一点。您将需要使用自定义directive。它看起来像这样。

<input :name="field.name" v-data-binder="field.dataAttributes" />

您的指令定义将类似于：

// Register a global custom directive called `v-focus`
Vue.directive('data-binder', {
    // When the bound element is inserted into the DOM...
    inserted: function (el, binding) {
        // Perform data attribute manipulations here.

        // 1. Parse the string into proper key-value object
        // binding.value

        // 2. Iterate over the keys of parsed object

        // 3. Use JavaScript *dataset* property to set values
    }
})

您还需要在指令定义中添加updated 挂钩，以便在传递给指令的值发生更改时删除现有的 data-* 属性。

Answer 2

如果您将 dataAttributes 字符串作为 javascript 对象传递并像 v-bind="myobject" 那样绑定它，您可以更轻松地做到这一点。如果不可能，您可以通过计算属性对其进行转换 检查下面的例子

<div id="app">
</div>



 var instance = new Vue({
  el:'#app',
  data:function(){
    return {
      inputType:'password',
      fieldAttributes:"data-autocomplete-url=api/users data-selected=123"
   };
 },
  computed:{
    getDataAttributes:function(){
     var attributes = this.fieldAttributes.split(' ');

    var attributesO = {};
    for(var a=0;a<attributes.length;a++){
      var attribute = attributes[a];
      var attribute_ar = attribute.split('=');
      attributesO[attribute_ar[0]] = attribute_ar[1];
    }

     return attributesO;
    }
 },
 methods:{
   getAttribute:function(){
     alert(this.$refs.myinput.dataset.selected)
   }
  },
   template:`<div>
    <input ref="myinput" v-on:click="getAttribute" :type="inputType"  v-bind="getDataAttributes" />
    </div>`
   });