warning: For developer:Two-way binding does not support complex data paths currently. This two-way binding is ignored.
---- > result is correct with the waring, to remove the warning:
the difference between value and model:value in WeChat Mini Programs.
1. value="{{ someData }}" (One-Way Binding)
- Data Flow: JavaScript (.js) to WXML (.wxml).
- How it works: You set the component's value attribute based on a variable (someData) in your page's data.
- Updates:
- If someData changes in your JavaScript (using this.setData), the component's displayed value updates automatically.
- If the user interacts with the component (e.g., types into an input field), the someData variable in your JavaScript does not change automatically.
- Handling User Input: To update someData when the user changes the value, you must listen to an event (like bindinput or bindchange) and manually call this.setData in the event handler function.
- Example: <input value="{{ myValue }}" bindinput="onInput" /> and in .js: onInput(e) { this.setData({ myValue: e.detail.value }) }
- Use Case: This is the standard, fundamental way data binding works. It gives you explicit control over when and how your data updates. It works reliably with any data path (simple or complex).
2. model:value="{{ someData }}" (Two-Way Binding)
- Data Flow: JavaScript (.js) to WXML (.wxml) AND WXML (.wxml) to JavaScript (.js).
- How it works: It's essentially syntactic sugar or a shortcut. It tries to automatically handle both setting the component's value and updating the JavaScript data when the user interacts with the component.
- Updates:
- If someData changes in your JavaScript (using this.setData), the component's displayed value updates.
- If the user interacts with the component, the framework automatically tries to update someData in your JavaScript using setData behind the scenes (as if you had written the bindinput handler yourself).
- Handling User Input: You don't need to write an explicit bindinput or bindchange handler just to update the bound data. The framework does it for you.
- Why you might have used it: Convenience! It reduces boilerplate code for simple input scenarios, saving you from writing the event handler and setData call every time.
- The Catch (Why it caused errors for you): As the warning message stated, "Two-way binding does not support complex data paths currently."
- A "complex data path" means accessing nested properties (like dicOfSel.brand.nowText) or array elements.
- The framework's automatic setData mechanism built into model:value cannot handle these complex paths. It only works reliably with simple, top-level data properties (like {{ currentValue }} when currentValue is directly in this.data).
- This limitation seems to apply even within components like van-field if they internally rely on model:value.
In Summary:
- value: One-way data flow (JS -> WXML). Requires manual event handling (bindinput/bindchange + setData) for user input to update JS data. Works everywhere.
- model:value: Two-way data flow attempt (JS <-> WXML). A shortcut that automatically handles the setData on user input, but only for simple data paths.
You likely used model:value initially for convenience, but because the underlying data path was complex (either directly in your page or within the component you were using), the framework's shortcut failed, leading to the warning. Switching back to value and explicit bindinput handlers gives you the necessary control to handle those complex paths correctly.