How to get the value of textarea in uniapp

When using the textarea component in uniapp, we need to get the text entered by the user in the component. So how to get the value of textarea? Next, let’s answer it in detail.

1. Basic usage of textarea

First of all, we need to understand the basic usage of textarea component. In uniapp, using the textarea component needs to be introduced in the template. The sample code is as follows:

<template>
  <view>
    <textarea 
      style="height: 200rpx;" 
      value="{{textValue}}" 
      @input="inputHandle"
    ></textarea>
  </view>
</template>

In the above code, we bind a textValue variable through value and an inputHandle method through the input event. Among them, style sets the height of the textarea component.

2. Obtain the value of textarea through two-way binding

In the above code, we bind the value of textarea to the textValue variable through two-way binding. When the user enters content in the textarea, the value of the textValue variable will also change. At this point, we can get the value of textarea through the textValue variable. The sample code is as follows:

<template>
  <view>
    <textarea 
      style="height: 200rpx;" 
      v-model="textValue" 
      @input="inputHandle"
    ></textarea>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        textValue: '' // 绑定值
      }
    },
    methods: {
      inputHandle(e) {
        console.log(e.detail.value) // 获取输入的值
      }
    }
  }
</script>

In the above code, we bind the textValue variable through the v-model directive. When the user enters content in the textarea, the value of the textValue variable will also change. Through the @input event, we get the input value in the inputHandle method, and we can get the value of the textarea.

3. Obtain the value of textarea through the ref attribute

In addition to the two-way binding method, we can also obtain the value of textarea through the ref attribute. Set the ref attribute on the textarea component, then get the instance of the component through this.$refs in the code, and finally get the value of the textarea through the value attribute of the instance. The sample code is as follows:

<template>
  <view>
    <textarea 
      style="height: 200rpx;" 
      ref="myTextarea" 
      @input="inputHandle"
    ></textarea>
    <button @click="getValue">获取值</button>
  </view>
</template>

<script>
  export default {
    methods: {
      inputHandle(e) {
        console.log(e.detail.value)
      },
      getValue() {
        const myTextarea = this.$refs.myTextarea // 获取组件实例
        console.log(myTextarea.value) // 获取输入的值
      }
    }
  }
</script>

In the above code, we assigned a name myTextarea to the textarea component through the ref attribute. In the getValue method, obtain the instance of the myTextarea component through this.$refs, and finally obtain the input value through the value attribute of the instance to obtain the value of the textarea.

Summary

Through the above introduction, we can see that obtaining the value of textarea is very simple. In uniapp, we can obtain the value of textarea through two-way binding or through the ref attribute. No matter which method you choose, you can easily manipulate the textarea component to get the text entered in it. Hope this article is helpful to everyone.

The above is the detailed content of How to get the value of textarea in uniapp. For more information, please follow other related articles on the PHP Chinese website!