javascript - Vue.js:从 DOM 中提取数据 - 特别是表单操作属性

Question

是否可以使用 Vue 创建某种绑定(bind)，以便从 DOM 初始化 Vue 实例中的数据项？

具体来说，就我而言，我希望我的 Vue 实例接收表单元素的 action 属性。

例如，我的 HTML 看起来像这样(使用服务器端代码生成的路径):

<form action="path/to/script.php" id="my-form">

</form>

我的 Vue 元素看起来像这样:

new Vue({
    el: 'my-form',
    data: {
        action: '' // I want this item to receive 'path/to/script.php' on load
    },
    compiled: function() {
        console.log(this.action); // Should output 'path/to/script.php'
    }
});

我已经尝试过这样做，但没有成功。 DOM 中的操作刚刚被删除以匹配 action 数据项:

 <form action="path/to/script.php" v-bind:action="action">

 </form>

谢谢

Answer 1

您所要求的有点不寻常，因为 View 模型通常不会从 View 中提取数据，而是向 View 提供数据，因此您需要一个 custom directive .

我在下面编写的代码采用属性名称和数据成员名称并进行分配。

Vue.directive('initialize', {
  params: ['item','attr'],
  bind: function() {
    this.vm[this.params.item] = this.el.getAttribute(this.params.attr);
  }
});

new Vue({
  el: '#my-form',
  data: {
    action: '' // I want this item to receive 'path/to/script.php' on load
  },
  compiled: function() {
    console.log('Action:', this.action); // Should output 'path/to/script.php'
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<form id="my-form" action="path/to/script.php" v-initialize attr="action" item="action">
</form>