How binding between computed property in model and view's @Binding property in SwiftUI

Question

I trying make a API Tester app about restful. my model stored a few property， scheme protocol like “http”，host like “www.google.com”，path like “/search” and query parameter like “?q=keyword”. and a computed property about URL string ，it joined from above stored propertys.

class ModelStore: ObservableObject {
        
        @Published var scheme = “http”
        @Published var host = ""
        @Published var port = "80"
        @Published var path = ""
        @Published var query = "" 
        
        var urlString: String {
            get {
                var tempUrl: String
                tempUrl =  scheme + “://” + host + ":" + port + "?" + query
                return tempUrl
            }
            set {
                guard let url = URL(string: newValue) else {
                    return
                }
                scheme = url.scheme ?? ""
                host = url.host ?? ""
                path = url.path
                query = url.query ?? ""
            }
        }
    
        var parametersArray: [String] {
            get {
                query.components(separatedBy: "&")
            }
            set {
                query = newValue.joined(separator: "&")
            }
        }
        
        var paramStruct: [ParaStruct] {
            get {
                var params = [ParaStruct]()
                parametersArray.forEach { (str) in
                    let item = str.components(separatedBy: "=")
                    if item.count > 1 {
                        params.append(ParaStruct(key: item[0], value: item[1]))
                    }
                }
                return params
            }
            set {
                var newQuery = [String]()
                newValue.forEach { (value) in
                    let item = value.key + "=" + value.value
                    newQuery.append(item)
                }
                query = newQuery.joined(separator: "&")
            }
        }
    }

class ParaStruct: Identifiable, ObservableObject{
    var id = UUID()
    static func == (lhs: ParaStruct, rhs: ParaStruct) -> Bool {
        lhs.key == rhs.key && lhs.value == rhs.value
    }
    @Published var key: String = ""
    @Published var value: String = ""
    init(key: String, value: String) {
        self.key = key
        self.value = value
    }
}

struct ContentView: View {
    @ObservedObject var modelStore = ModelStore()
    var body: some View {
        GeometryReader { geometryProxy in
            VStack(spacing: 0) {
                TextField("URL", text: self.$modelStore.urlString) 
                TextField("Host", text: self.$modelStore.host)
                TextField("Port", text: self.$modelStore.portString)
                TextField("Path", text: self.$modelStore.path)
                TextField("Query Parameters", text: self.$modelStore.query)
                
                List(self.modelStore.paramStruct) { (param) in
                    TextField("value", text: Binding(get: {
                        param.value
                    }, set: { (value) in

//this textfield doesn't work in here
                        param.value = value
                    }))
                }
            }
        }
    }
}

everything is OK so far，but the textfield in List doesn't work. it can read update from model，but can't write textfield‘s change to model，result in other view doesn't change sync.

set: { (value) in
//this textfield doesn't work in here
                  param.value = value
     }

what problem with it？ maybe I understand wrong？anyone help me？

Answer 1

Try the following

TextField("value", text: Binding(get: {
    param.value
}, set: { (value) in
    self.modelStore.objectWillChange.send()     // << this !!
    param.value = value
}))