Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vue.js one-way binding forms

I'm new with Vue.js and I'm trying to test some features of this framework. Now I'm testing the input forms, and I would like to make a one-way binding, without using the v-model directive, but I can't find any example. Anyone could help me, please?

like image 985
Nuovo 001 Avatar asked Nov 17 '17 10:11

Nuovo 001


People also ask

Is Vue One way binding?

One-way Data BindingIf we want to bind any variable, we can simply use Vue. js's double curly braces syntax or “Mustache” syntax to bind any variable from the relative component instance. Or, if we want to bind any variable inside an HTML attribute, we can use the v-bind directive. Vue.

Is Vue one way or two way?

Vue's two-way binding system takes one of the trickiest parts of developing a web application, user input synchronization, and makes it dead simple with v-model.

Does Vue.js have two way data binding?

Vue is also perfectly capable of powering sophisticated Single-Page Applications in combination with modern tooling and supporting libraries. The v-model directive makes two-way binding between a form input and app state very easy to implement.


1 Answers

Here is example of one way and two way binding

var V = new Vue({
  el:'#vue-instance',
  data:{
    name:'Niklesh'
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.4/vue.js"></script>
<div id="vue-instance">
<div>One Way binding with input box <input type="text" :value="name"></div>
<div>One Way binding as text {{name}}</div>

<div>Two way binding : <input type="text" v-model="name"></div>
</div>
like image 139
Niklesh Raut Avatar answered Sep 22 '22 19:09

Niklesh Raut