How to replace HTML content of <span> tag with value of input field without setting the value of input
Question
I have a message saying Hey There. I would like to replace the 'There' text with the value being typed in the input box.
I tried using directive
HTML
<div id="updateName">
<!--form sec-->
<section class="animated container-fluid align-center sec-ptop">
<h3 class="salutation">Hey <span>{{inputName}}There</span>, happy to hear from you.</h3>
<div>
<form name="contactform" method="post" class="row form-horizontal" role="form">
<div class="form-group input--josh col-sm-6">
<div class="input-wrap">
<input autocomplete="off" v-init type="text" v-model="inputName" class="form-control input__field input input__field--josh" id="inputName" name="inputName" placeholder="Name" value="" required />
<label class="input__label input__label input__label--josh input__label--josh-color-1 input__label--josh input__label--josh-color-1"></label>
</div>
</div>
</form>
</div>
</section>
</div>
vue
var app = new Vue({
el: '#updateName',
data: {
inputName: 'There'
},
directives: {
init: {
bind(el){
el.value = el.getAttribute('value');
el.dispatchEvent(new Event('input'));
}
}
},
});
HTML
<div id="updateName">
<!--form sec-->
<section class="animated container-fluid align-center sec-ptop">
<h3 class="salutation">Hey <span>{{inputName}}There</span>, happy to hear from you.</h3>
<div>
<form name="contactform" method="post" class="row form-horizontal" role="form">
<div class="form-group input--josh col-sm-6">
<div class="input-wrap">
<input autocomplete="off" type="text" v-model="inputName" v-on:keyup.enter="replaceText(inputValue)" class="form-control input__field input input__field--josh" id="inputName" name="inputName" placeholder="Name" required />
<label class="input__label input__label input__label--josh input__label--josh-color-1 input__label--josh input__label--josh-color-1"></label>
</div>
</div>
</form>
</div>
</section>
</div>
vue
var app = new Vue({
el: '#updateName',
data: {
inputName: 'There'
},
methods: {
replaceText: function(inValue) {
this.inputName = this.inputName + inValue
}
}
});
On page load
Hey There, happy to hear from you.
Name
On run-time
Hey John, happy to hear from you.
John
On Run Time
2 answers
solution1
0 2019-04-02 14:43:20
You can remove your method because you use the 'v-model', which says that if your input changes, your data will change too.
You can also remove your span tag if you don't need to change something on the name and remove the static 'There' in your span.
<h3 class="salutation">Hey <span>{{inputName}}</span>, happy to hear from you.</h3>
is the same as
<h3 class="salutation">Hey {{inputName}}, happy to hear from you.</h3>
Here's a fiddle
Hope it works for you.
solution2
0 ACCPTED 2019-04-02 14:50:25
I'm not sure whether we can populate the form data while a form submit.
If you want to submit the form data then you have to prevent ( event.preventdefault ) the form data and saved it into another variable.
But if you no need to submit the form means you can achieve it by using my below sample code
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id='myApp'>
<h3 class="myName">Hey <span v-if='inputName.length'>{{inputName}}</span> <span v-else>There</span>, happy to hear from you.</h3>
<form method="post">
<input autocomplete="off" type="text" v-model="inputName" class="form-control" id="inputName" name="inputName" placeholder="Name" />
</form>
</div>
</body>
</html>
<script type="text/javascript">
var myInstance = new Vue({
el:'#myApp',
data:{
inputName : ''
}
})
</script>
You have to do the same for the rest of the place you needed.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.