Two way data binding in wechat applet

Preface

Due to many restrictions, wechat applets cannot be like vue Data binding through instructions , Is there any way for wechat applets to achieve two-way data binding ？ Today, I will share with you two methods of data binding for wechat applets .

adopt model:value binding

When you click form In the form form-type by submit Of button When the component , In the form component value Worth submitting , You need to add... To the form component name As a key.

.wxml file

<form catchsubmit="formSubmit">
    <view class="formItemBox">
        <view> full name </view>
        <view>
            <input name="name" model:value="{
    { formData.name }}" type="text" placeholder=" Please enter a name " />
        </view>
    </view>
    <view class="formItemBox">
        <view> Age </view>
        <view>
            <input name="age" model:value="{
    { formData.age }}" type="text" placeholder=" Please enter age " />
        </view>
    </view>
    <view class="formItemBox">
        <view> number </view>
        <view>
            <input name="number" model:value="{
    { formData.number }}" type="text" placeholder=" Please enter the number " />
        </view>
    </view>
    <view class="formItemBox">
        <view> Address </view>
        <view>
            <input name="address" model:value="{
    { formData.address }}" type="text" placeholder=" Please enter the address " />
        </view>
    </view>
    <!--  Bottom operation button  -->
    <view>
        <button formType="submit"> Submit </button>
    </view>
</form>

.js file

Page({
    
  data: {
    
    //  Bound data 
    formData: {
    
      name: "",
      age: "",
      number: "",
      address: "",
    },
  },
  //  Submit operation 
  formSubmit(e) {
    
    console.log(e.detail.value); // Data submitted 
  },
})

Click Submit ：

adopt bindinput Method

First, use the tag attribute data- binding js Medium data Parameters , Re pass bandinput Event acquisition key value , Finally, the template string is used to assign values to data The value in .

.wxml file

<view>
    <view class="formItemBox">
        <view> full name </view>
        <view>
            <input data-gater="formData.name" bindinput="inputFrame" value="{
    { formData.name }}" type="text"
                placeholder=" Please enter a name " />
        </view>
    </view>
    <view class="formItemBox">
        <view> Age </view>
        <view>
            <input data-gater="formData.age" bindinput="inputFrame" value="{
    { formData.age }}" type="text"
                placeholder=" Please enter age " />
        </view>
    </view>
    <view class="formItemBox">
        <view> number </view>
        <view>
            <input data-gater="formData.number" bindinput="inputFrame" value="{
    { formData.number }}" type="text"
                placeholder=" Please enter the number " />
        </view>
    </view>
    <view class="formItemBox">
        <view> Address </view>
        <view>
            <input data-gater="formData.address" bindinput="inputFrame" value="{
    { formData.address }}" type="text"
                placeholder=" Please enter the address " />
        </view>
    </view>
    <!--  Bottom operation button  -->
    <view>
        <button bindtap="submit"> Submit </button>
    </view>
</view>

.js file

Page({
    
  data: {
    
    //  Bound data 
    formData: {
    
      name: "",
      age: "",
      number: "",
      address: "",
    },
  },
  //  Submit operation 
  submit() {
    
    console.log(this.data.formData); // Data submitted 
  },
  // input event ( Trigger when content changes )
  inputFrame(e) {
    
    this.setData({
    
      [`${
    e.currentTarget.dataset.gater}`]: e.detail.value
    })
    console.log(this.data.formData);
  },
})

input Box input and submit ：

The last attached .wxss file

.formItemBox {
    
    display: flex;
    margin: 0rpx 10rpx;
    padding: 14rpx 0rpx;
    border-bottom: 1px solid gainsboro;
}

.formItemBox view:first-child {
    
    width: 20%;
    color: #323333;
    font-size: 28rpx;
}

.formItemBox view:last-child {
    
    width: 80%;
}

input {
    
    font-size: 24rpx;
    color: #626263;
}