Vue.js:从DOM中拉入数据——特别是form action属性

Vue.js: Pull in data from DOM - Specifically form action attribute

本文关键字：数据 特别是 form 属性 action js DOM Vue      更新时间：2023-09-26

是否有可能使用Vue创建某种绑定，使Vue实例中的数据项从DOM初始化?

具体来说，在我的例子中，我希望我的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>

谢谢

你所要求的是有点不寻常的，因为视图模型通常不会从视图中提取数据，它提供数据给它，所以你需要一个自定义指令。

我在下面写的代码接受一个属性的名称和一个数据成员的名称并进行赋值。

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>

我设法得到某种工作使用props。action属性并没有完全绑定到data中，但它可以从Vue实例中以相同的方式访问，即this.action。

HTML: 

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

new Vue({
    el: '#my-form',
    props: {
        'action'
    },
    compile: function() {
        console.log(this.action); // Outputs 'path/to/file.php'
    }
});
相关文章：