时间戳

首页 > 解决方案 > Vue - @input 由 Internet Explorer 11 中的 :placeholder 在页面加载后立即触发，而不是在输入值时触发

vue.js - Vue - @input 由 Internet Explorer 11 中的 :placeholder 在页面加载后立即触发，而不是在输入值时触发

问题描述

Vue - @input 由 Internet Explorer 11 中的 :placeholder 在页面加载时立即触发，而不是在输入值时触发。也就是说，问题仅在资源管理器中。页面加载时，立即触发输入，但前提是有占位符

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег SCRIPT</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 </head>
 <body> 
 <div id="app">
	  <component-c/>
 </div>
  <script type="text/javascript">
	var ComponentA = Vue.component('ComponentA', {
	  props: ['field'],
	  methods: {
		//@input is triggered by :placeholder in Interner Exployer 11 immediately upon page load not when entering a value
		validator: function (ev){
			console.log(ev.target.value, 'value in validator');
		}
	  },
	  computed: {
        fieldPlaceholder: function () {
            return this.field.placeholder;
		},
	   },
		template: '<input type="password" @input="validator" :placeholder = "fieldPlaceholder">'
	});
	
	var ComponentС = Vue.component('ComponentB', {
		data: function () {
		  	return {
					field: {
							placeholder: 'place'
					}
			}
		},
	   components: {
		'component-a': ComponentA,
	   },
	   template: '<component-a :field = "this.field" />'
	})
  
	var app = new Vue({
	  el: '#app',
	   components: {
		'component-c': ComponentС,
	   }
	})
  </script>
 </body>
</html>

标签： vue.js

解决方案

推荐阅读