Wechat applet event pass parameter, parameter synchronously display button submission content, read input content

Let's review what we have learned before

We can add the bindtap parameter to the button component for event binding

<button type="primary" bindtap="onbutton">按钮</button>

  onbutton(e){
    console.log('按钮被按下')
  },

Then we can also add bindinput parameters to the input component for event binding

<input type="text" bindinput="oninput"/>

  oninput(e){
    console.log(e.detail.value)
  },

 Combining the above content, let's continue to learn, so that the event binding front-end data is synchronized with the back-end

It's actually very simple, let's learn first

1. button to modify the data parameter

Let's start with a basic code

We give the button an event binding, and at the same time give the data a parameter info 

At this time, our requirement is that when the button is pressed, the data parameter is incremented by one

The principle of our previous programming is to assign values ​​directly, right? Let’s try it first.

 Everyone thinks that it should be no problem to do so, just assign the value and add one

Now it is 0 when I press the button for the first time

the second time

 

We thought we had achieved the effect we needed, but it was not the case. This kind of data is only modified in the backend, not rendered to the frontend.

Let's try to use Mustache syntax to render to the front end

  

 When the first time is pressed, only the back-end data changes to 1, and the front-end does not change, but what should we do if we need to update the front-end and back-end synchronously? In fact, the correct usage given by WeChat official is

Use this.setData({}) syntax to set, see the setting method in the figure below

 

You must use this method when you want to set the back-end data to synchronize with the front-end data

2. Input data synchronization, extract the data in the input

Let's first give a basic component code and event binding

 We first enter a message in the input box, the event will print out the variable e, let's look at the content first

We found that our content is in the detail.value value, so that’s easy, we take the value out

 

 

In this way, the value can be easily extracted from the front-end input input box. We add a view component to the front-end to display the content and add a stored value to the data as inputValue.

At the same time, set the value of the backend through the setting method of learning the button above

We found that the content we entered was synchronized to the front-end page