⚠️ Vue Native has been deprecated and is no longer maintained.

Handling user input

To let users interact with your app, we can use the v-bind directive to attach event listeners that invoke methods on our Vue Native instances:

<view class="container">
  <button v-bind:onPress="handleBtnClickCount" :title="btnTitle" />
  <text class="text-container">{{btnClickCount}}</text>
</view>

<script>
export default {
  data: function() {
    return {
      btnTitle: "Click Me",
      btnClickCount: 0,
    };
  },
  methods: {
    handleBtnClickCount: function() {
      this.btnClickCount = this.btnClickCount + 1;
    }
  }
};
</script>

<style>
.container {
  background-color: white;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.text-container {
  color: blue;
  padding: 2;
  font-size: 20;
}
</style>

Note that in this method we update the state of our app when ever the user click on the button, and Vue Native internally talk with the React Native to update the UI Elements

Vue Native also provides the v-model directive that makes two-way binding between form input and app state a breeze:

<view class="container">
    <text-input
      class="text-input-container"
      placeholder="Type here to translate!"
      v-model="textContent"
    />
    <text class="text-container">{{textContent}}</text>
</view>

<script>
export default {
  data: function() {
    return {
      textContent: ""
    };
  }
};
</script>

<style>
.container {
  background-color: white;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.text-container {
  color: blue;
  padding: 2;
  font-size: 22;
}
.text-input-container {
  width: 300;
  height: 40;
  font-size: 22;
  border-color: gray;
}
</style>

← Composing with components Animations →

Guide

Handling user input